如何在顫振中使用 CircularProgressIndicator

Question

嗨，我設計了忘記密碼屏幕和點擊按鈕時集成的 Firebase。 我想在用戶單擊按鈕時顯示CircularProgressIndicator並在 firebase 執行完成時關閉它。

有誰知道如何做到這一點 ？ 我想在設備的中心有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),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ));
  }

}

Answer 1

好的，首先你必須稍微改變你的代碼。

更改從Stateless到Stateful來管理您的控件的狀態，並把命名的全局變量isLoading 。 你可以用該變量播放，請將isLoading當你按下按鈕真實isLoading虛假它完成之后。

在您的build方法中添加驗證以在isLoading為 true 時顯示循環isLoading ，否則顯示您的字段。

代碼示例在這里：

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

Answer 2

這個問題有點老了，但我會在這里注冊一個更多的選項，僅供期貨參考。 我們將創建三個類。 一個叫做 ModalRoundedProgressBar 將負責顯示和隱藏一個 CircularProgressBarIndicator，一個 ModalRoundedProgressBarState 類來創建小部件布局，最后一個叫做 ProgressBarHandler 的句柄類將允許我們在我們需要的時間和地點顯示和隱藏圓形 ProgressBar。 代碼有一些注釋

class ModalRoundedProgressBar extends StatefulWidget {
  final double _opacity;
  final String _textMessage; // optional message to show
   final Function _handlerCallback; // callback that will give a handler object to change widget state.

  ModalRoundedProgressBar({
    @required Function handleCallback(ProgressBarHandler handler),
    String message = "", // some text to show if needed...
    double opacity = 0.7, // opacity default value
  })  : _textMessage = message,
        _opacity = opacity,
        _handlerCallback = handleCallback;

  @override
  State createState() => _ModalRoundedProgressBarState();
}
//StateClass ...
class _ModalRoundedProgressBarState extends State<ModalRoundedProgressBar> {
  bool _isShowing = false; // member that control if a rounded progressBar will be showing or not

  @override
  void initState() {
    super.initState();
    /* Here we create a handle object that will be sent for a widget that creates a ModalRounded      ProgressBar.*/
    ProgressBarHandler handler = ProgressBarHandler();

   handler.show = this.show; // handler show member holds a show() method
    handler.dismiss = this.dismiss; // handler dismiss member holds a dismiss method
    widget._handlerCallback(handler); //callback to send handler object
  }

  @override
  Widget build(BuildContext context) {
    //return a simple stack if we don't wanna show a roundedProgressBar...
    if (!_isShowing) return Stack(); 

   // here we return a layout structre that show a roundedProgressBar with a simple text message
    return Material(
      color: Colors.transparent,
      child: Stack(
        children: <Widget>[
          Opacity(
            opacity: widget._opacity,
            //ModalBarried used to make a modal effect on screen
            child: ModalBarrier( 
              dismissible: false,
              color: Colors.black54,
            ),
          ),
  
          Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircularProgressIndicator(),
                Text(widget._textMessage),
              ],
            ),
          ),
        ],
      ),
    );
  }
  // method do change state and show our CircularProgressBar
  void show() {
    setState(() => _isShowing = true);
  }

 // method to change state and hide our CIrcularProgressBar
  void dismiss() {
    setState(() => _isShowing = false);
  }
}

// handler class
class ProgressBarHandler {
  Function show; //show is the name of member..can be what you want...
  Function dismiss;
}

現在你只需要在你的 Screen 小部件中實現這個小部件。 我將編寫一個簡單的實現示例。

class YourScreen extends StatelessWidget{

   //handler that we will use to show and hide widget
  ProgressBarHandler _handler;

  @override
  Widget build(BuildContext context){
    var scaffold = Scaffold(
      appBar: AppBar(title: Text("Title"),),
      
      body: _buildYourBodyLayout(),
    );
  
    var progressBar = ModalRoundedProgressBar(
      //getting the handler
      handleCallback: (handler) { _handler = handler;},
    );
    
    return Stack(
      children: <Widget>[
        scaffold,
        progressBar,
      ],
    );
  }
  
  // some code.... when you need to show a progress you will call: _handler.show();
  //when you want hide the progress bar call: _handler.dismiss();
}

通過這種方法，您擁有了一個可重用的組件，並且您不需要重新創建所有屏幕布局來顯示或隱藏圓形進度條。

我希望這可以幫助某人。