title: Flutter - How can I add a circular loading indicator to my button?
body: <p>I have a Flutter code. instead of showing nothing when the submit button is clicked, I want to show the circular loading indicator when the button is clicked so to keep the user busy but I'm having a challenge to convert a tutorial I have that does that to a work with my code.</p>
  <p>Here is the tutorial:</p>
  <pre><code>...
   children: &lt;Widget&gt;[
              new Padding(
                padding: const EdgeInsets.all(16.0),
                child: new MaterialButton(
                  child: setUpButtonChild(),
                  onPressed: () {
                    setState(() {
                      if (_state == 0) {
                        animateButton();
                      }
                    });
                  },
                  elevation: 4.0,
                  minWidth: double.infinity,
                  height: 48.0,
                  color: Colors.lightGreen,
                ),
              )
            ],
   Widget setUpButtonChild() {
      if (_state == 0) {
        return new Text(
          &quot;Click Here&quot;,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 16.0,
          ),
        );
      } else if (_state == 1) {
        return CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation&lt;Color&gt;(Colors.white),
        );
      } else {
        return Icon(Icons.check, color: Colors.white);
      }
    }
  
    void animateButton() {
      setState(() {
        _state = 1;
      });
  
      Timer(Duration(milliseconds: 1000), () {
        setState(() {
          _state = 2;
        });
      });
  
      Timer(Duration(milliseconds: 3300), () {
         Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) =&gt; AnchorsPage(),
          ),
        );
      });
    }
  </code></pre>
  <p>Here's my code. All I want to do is to display the <code>CircularProgressIndicator</code> when the system is performing the HTTP request.</p>
  <p>And here is my code where I want to use the <code>CircularProgressIndicator</code>:</p>
  <pre><code>                           Center(
  
                              child: 
                              RaisedButton(
                                padding: EdgeInsets.fromLTRB(80, 10, 80, 10),
                                color: Colors.green,
                               
                                child: setUpButtonChild(),
                               
                                onPressed: ()  {
  
                                  setState(()async {
                                  _state = 1;
                                  var toSubmit = {
                                    &quot;oid&quot;: EopOid,
                                    &quot;modifiedBy&quot;: user['UserName'].toString(),
                                    &quot;modifiedOn&quot;: DateTime.now().toString(),
                                    &quot;submitted&quot;: true,
                                    &quot;submittedOn&quot;: DateTime.now().toString(),
                                    &quot;submittedBy&quot;: user['UserName'].toString()
                                  };
                                  for (EopLine i in selectedEops) {
                                    var item = {
                                      &quot;oid&quot;: i.oid.toString(),
                                      &quot;quantityCollected&quot;: i.quantityCollected,
                                      &quot;modifiedBy&quot;: user['UserName'].toString(),
                                      &quot;modifiedOn&quot;: DateTime.now().toString(),
                                    };
                                    await http
                                        .put(
                                            &quot;http://api.ergagro.com:112/UpdateEopLine&quot;,
                                            headers: {
                                              'Content-Type': 'application/json'
                                            },
                                            body: jsonEncode(item))
                                        .then((value) async {
                                      if (selectedEops.indexOf(i) ==
                                          selectedEops.length - 1) {
                                        await http
                                            .put(
                                                &quot;http://api.ergagro.com:112/SubmitEop&quot;,
                                                headers: {
                                                  'Content-Type':
                                                      'application/json'
                                                },
                                                body: jsonEncode(toSubmit))
                                            .then((value) {
                                          print('${value.statusCode} submitted');
                                          Navigator.pop(context);
                                        });
                                      }
                                    });
                                  }
                                 _state = 2;
                                  });
                                //Navigator.of(context).push(MaterialPageRoute(
                                //builder: (context) =&gt;
                                //StartScanPage(widget.dc_result)));
                                },
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(50),
                                ),
                              ),
                            ),
  
  </code></pre>