Want to use CircularProgressIndicator in flutter? Change from Stateless to Stateful to manage the state of your widget and put a global variable named isLoading. You can play with that variable, set isLoading true when you press the button and isLoading false after it complete.
Add a validation inside your build method to display a circularprogresss when isLoading is in true otherwise display your fields.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | class ForgotPasswordScreen extends StatefulWidget { @override ForgotPasswordScreenState createState() { return new ForgotPasswordScreenState(); } } class ForgotPasswordScreenState extends State<ForgotPasswordScreen> { final emailController = new TextEditingController(); final authHandler = new Auth(); bool isLoading = false; @override Widget build(BuildContext context) { return new Scaffold( body: Container( height: MediaQuery.of(context).size.height, decoration: BoxDecoration( color: Colors.white, ), child: isLoading ? Center( child: CircularProgressIndicator(), ) : new Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Row( children: <Widget>[ new Expanded( child: new Padding( padding: const EdgeInsets.only(left: 40.0), child: new Text( "EMAIL", style: TextStyle( fontWeight: FontWeight.bold, color: Colors.redAccent, fontSize: 15.0, ), ), ), ), ], ), new Container( width: MediaQuery.of(context).size.width, margin: const EdgeInsets.only( left: 40.0, right: 40.0, top: 10.0), alignment: Alignment.center, decoration: BoxDecoration( border: Border( bottom: BorderSide( color: Colors.redAccent, width: 0.5, style: BorderStyle.solid), ), ), padding: const EdgeInsets.only(left: 0.0, right: 10.0), child: new Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ new Expanded( child: TextField( controller: emailController, textAlign: TextAlign.left, decoration: InputDecoration( border: InputBorder.none, hintText: 'PLEASE ENTER YOUR EMAIL', hintStyle: TextStyle(color: Colors.grey), ), ), ), ], ), ), Divider( height: 24.0, ), new Container( width: MediaQuery.of(context).size.width, margin: const EdgeInsets.only( left: 30.0, right: 30.0, top: 20.0), alignment: Alignment.center, child: new Row( children: <Widget>[ new Expanded( child: new FlatButton( shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(30.0), ), color: Colors.redAccent, onPressed: () { setState(() { isLoading = true; }); authHandler .sendPasswordResetEmail( emailController.text) .then((void nothing) { print("done"); setState(() { isLoading = false; }); }).catchError((e) => print(e)); }, child: new Container( padding: const EdgeInsets.symmetric( vertical: 20.0, horizontal: 20.0, ), child: new Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Expanded( child: Text( "FORGOT PASSWORD", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold), ), ), ], ), ), ), ), ], ), ), ], ))); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
