formsflutterprogress-indicator

How to use Flutter CircularProgressIndicator() middle of the Form?


I have a form as; - 3 text form field - 1 dropdown. - 1 normal text ************** - 2 text form field

And based on dropdown (Yes/No) example; if the section is Yes gets value from the internet and assign to normal text and continue to shows the last 2 text form field.

My question is how can I use CircularProgressIndicator() while I am getting data from the internet middle of the Form. I know how to use CircularProgressIndicator() and show widget but I can make it do the same thing middle of the form. How can I use the CircularProgressIndicator() middle of the Form and continue…


Solution

  • Full code is here. I use Future.delayed to demonstrate how I did it for sake of clarity. We can use Future ....() async {} to get data from internet, so it will be easy to replace the void _showPrint() to 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(),
          ],
        );
      }
    }