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

Question

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…

Answer 1

I didn't fully understood if you want the user to be able to touch the form while retrieving data. If not, then I'd recommend using the modal progress hud package. You'll achieve the same thing Nick offered but with less effort.

Answer 2

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(),
      ],
    );
  }
}