嗨,我设计了“忘记密码”屏幕,并在单击按钮时集成了Firebase。我想显示CircularProgressIndicator用户单击按钮的时间,并在Firebase执行完成时将其关闭。
CircularProgressIndicator
有谁知道如何做到这一点 ?我想CircularProgressIndicator放在设备的中央。
class ForgotPasswordScreen extends StatelessWidget { final emailController = new TextEditingController(); final authHandler = new Auth(); @override Widget build(BuildContext context) { return new Scaffold(body: Container( height: MediaQuery.of(context).size.height, decoration: BoxDecoration( color: Colors.white, ), child: 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: () => authHandler.sendPasswordResetEmail(emailController.text).then((void nothing) { print("done"); }).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), ), ), ], ), ), ), ), ], ), ), ], ), )); } }
好的,首先您必须稍微更改代码。
从更改Stateless为Stateful来管理小部件的状态,并放置一个名为的全局变量isLoading。您可以使用该变量,isLoading在按下按钮时将其设置为true,在按钮isLoading完成后将其设置为false。
Stateless
Stateful
isLoading
在您的build方法内添加一个验证,以在isLoading为true 时显示循环进度,否则显示您的字段。
build
代码示例在这里:
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), ), ), ], ), ), ), ), ], ), ), ], ))); } }