title: How to work with progress indicator in flutter?
body: <p>I'm newbie in flutter and wanted to know what is better way to add <code>CircularProgressIndicator</code> in my layout. For example, my login view. This view have username, password and login Button. I did want create a overlay layout (with <code>Opacity</code>) that, when loading, show progress indicator like I use in NativeScript, but I'm little confused with how to do and too if it is the better way. On NativeScript, for example, I add IndicatorActivity in main layout and set busy to true or false, so it overlay all view components when is loading.</p>
  
  <p>Edit:</p>
  
  <p>I was able to reach this result:</p>
  
  <pre><code>    void main() {
        runApp(new MyApp());
      }
  
      class MyApp extends StatelessWidget {
        // This widget is the root of your application.
        @override
        Widget build(BuildContext context) {
          return new MaterialApp(
            title: 'Flutter Demo',
            theme: new ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
          );
        }
      }
  
      class MyHomePage extends StatefulWidget {
        MyHomePage({Key key, this.title}) : super(key: key);
  
        final String title;
  
        @override
        _MyHomePageState createState() =&gt; new _MyHomePageState();
      }
  
      class _MyHomePageState extends State&lt;MyHomePage&gt; {
        bool _loading = false;
  
        void _onLoading() {
          setState(() {
            _loading = true;
            new Future.delayed(new Duration(seconds: 3), _login);
          });
        }
  
  
        Future _login() async{
          setState((){
            _loading = false;
          });
        }
  
        @override
        Widget build(BuildContext context) {
  
  
            var body = new Column(
                children: &lt;Widget&gt;[
                  new Container(
                    height: 40.0,
                    padding: const EdgeInsets.all(10.0),
                    margin: const EdgeInsets.fromLTRB(15.0, 150.0, 15.0, 0.0),
                    decoration: new BoxDecoration(
                      color: Colors.white,
                    ),
                    child: new TextField(
                      decoration: new InputDecoration.collapsed(hintText: "username"),
                    ),
                  ),
                  new Container(
                    height: 40.0,
                    padding: const EdgeInsets.all(10.0),
                    margin: const EdgeInsets.all(15.0),
                    decoration: new BoxDecoration(
                      color: Colors.white,
                    ),
                    child: new TextField(
                      decoration: new InputDecoration.collapsed(hintText: "password"),
                    ),
                  ),
                ],
              );
  
  
            var bodyProgress = new Container(
              child: new Stack(
                children: &lt;Widget&gt;[
                  body,
                  new Container(
                    alignment: AlignmentDirectional.center,
                    decoration: new BoxDecoration(
                      color: Colors.white70,
                    ),
                    child: new Container(
                      decoration: new BoxDecoration(
                        color: Colors.blue[200],
                        borderRadius: new BorderRadius.circular(10.0)
                      ),
                      width: 300.0,
                      height: 200.0,
                      alignment: AlignmentDirectional.center,
                      child: new Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: &lt;Widget&gt;[
                          new Center(
                            child: new SizedBox(
                              height: 50.0,
                              width: 50.0,
                              child: new CircularProgressIndicator(
                                value: null,
                                strokeWidth: 7.0,
                              ),
                            ),
                          ),
                          new Container(
                            margin: const EdgeInsets.only(top: 25.0),
                            child: new Center(
                              child: new Text(
                                "loading.. wait...",
                                style: new TextStyle(
                                  color: Colors.white
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            );
  
            return new Scaffold(
              appBar: new AppBar(
                title: new Text(widget.title),
              ),
              body: new Container(
                decoration: new BoxDecoration(
                  color: Colors.blue[200]
                ),
                child: _loading ? bodyProgress : body
              ),
              floatingActionButton: new FloatingActionButton(
                onPressed: _onLoading,
                tooltip: 'Loading',
                child: new Icon(Icons.check),
              ),
            );
        }
      }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ZaLq3.png" alt="app screen result"></p>
  
  <p>I'm still adapting to the idea of ​​states. This code is within the expected when working with flutter?</p>
  
  <p>Thanks!</p>