Как я могу использовать Flutter CircularProgressIndicator() в середине формы?

Question

У меня есть форма как; - 3 поля текстовой формы - 1 выпадающий список. - 1 обычный текст ************** - 2 текстовых поля формы

И на основе раскрывающегося (да / нет) примера; если раздел Да, получает значение из интернета, присваивает обычный текст и продолжает отображать последние 2 текстовых поля формы.

Мой вопрос заключается в том, как я могу использовать CircularProgressIndicator(), когда я получаю данные из Интернета в середине формы. Я знаю, как использовать CircularProgressIndicator() и показывать виджет, но я могу сделать это, чтобы сделать то же самое в середине формы. Как я могу использовать CircularProgressIndicator() в середине формы и продолжить...

Answer 1

Полный код здесь. Я использую Future.delayed, чтобы продемонстрировать, как я это сделал для ясности. Мы можем использовать Future ....() async {} для получения данных из Интернета, поэтому будет легко заменить void _showPrint() на Future _getDataFromInternet() async {....... _load = false; _buildRest = true;}

class _MyHomePageState extends State<MyHomePage> {
  bool _load = false;
  bool _buildRest = false;

  void _showPrint() {
    print("loading is true");
    Future.delayed(const Duration(seconds: 6), () {
      setState(() {
        _load = false;
        _buildRest = true;
      });
    });
  }

  //TODO: MAIN BUILD WIDGET *****************************
  @override
  Widget build(BuildContext context) {
    Widget loadingIndicator = _load
        ? new Container(
            color: Colors.green.withOpacity(0.3),
            width: MediaQuery.of(context).size.width,//70.0,
            height: MediaQuery.of(context).size.height, //70.0,
            child: new Padding(
                padding: const EdgeInsets.all(5.0),
                child: new Center(child: new CircularProgressIndicator())),
          )
        : new Container();
    return new Scaffold(
        backgroundColor: Colors.white,
        body: new Stack(
          children: <Widget>[
            new Padding(
              padding:
                  const EdgeInsets.symmetric(vertical: 50.0, horizontal: 20.0),
              child: new ListView(
                children: <Widget>[
                  new Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      new TextField(),
                      new TextField(),
                      new TextField(),
                      new TextField(),
                      new Padding(
                          padding: EdgeInsets.only(top:20.0),
                        child: new FlatButton(
                            color: Colors.green[400],
                            child: new Text('Get Data From Internet'),
                            onPressed: () {
                              setState(() {
                                _load = true;
                              });
                              _showPrint();
                            }),
                      ),
                      _buildRest == true
                        ? _buildRestoftheForm()
                        : new Container()
                    ],),],),
            ),
            new Align(
              child: loadingIndicator,
              alignment: FractionalOffset.center,
            ),
          ],
        ));
  }

  Widget _buildRestoftheForm(){
    return new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        new TextField(),
        new TextField(),
        new TextField(),
      ],
    );
  }
}

Answer 2

Я не совсем понял, хотите ли вы, чтобы пользователь мог прикасаться к форме при получении данных. Если нет, то я бы порекомендовал использовать модальный пакет прогресса hud. Ты достигнешь того же, что предложил Ник, но с меньшими усилиями.