如何在Flutter中使用進度指示器。 建立指標

Question

我是新來的。 我需要進度指示器方面的幫助。 我的按鈕代碼帶有字符串，我需要通過指示器轉換到“ FirstScreen”。 這樣，當我單擊“登錄”按鈕時，進度指示器將彈出3秒鍾，然后消失。

編輯：

我能夠達到以下結果：

class LoginScreen extends StatefulWidget {
      @override
      State createState() => new _LoginScreenState();
    }

    class _LoginScreenState extends State<LoginScreen> {
      String _email = '';
      String _password = '';
      bool _load = false;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          resizeToAvoidBottomPadding: false,
          backgroundColor: Colors.white,
          body: Container(
              padding: EdgeInsets.only(top: 150),
              child: Column(
                children: <Widget>[
                  Image.asset(
                    'img/img_login.png',
                    width: 50,
                    height: 50,
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
                    child: TextField(
                      decoration: InputDecoration(
                          labelText: 'Email',
                          icon: Padding(
                            padding: EdgeInsets.only(top: 15.0),
                            child: Icon(Icons.email),
                          )),
                    ),
                  ),
                  SizedBox(
                    height: 15.0,
                  ),
                  Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
                      child: PasswordField(
                        helperText: 'No more than 8 characters',
                        labelText: 'Password',
                      )),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Expanded(
                        child: Padding(
                          padding:
                              EdgeInsets.only(left: 20.0, right: 5.0, top: 20.0),
                          child: 
                          FlatButton(
                            onPressed: ()
                            {
                              setState((){
                                _load = true;
                              });
                            },
                          // GestureDetector(
                          //   onTap: () {
                          //     Navigator.push(
                          //         context,
                          //         MaterialPageRoute(
                          //             builder: (context) => FirstScreen()));
                          //   },
                            child: Container(
                                alignment: Alignment.center,
                                height: 45.0,
                                decoration: BoxDecoration(
                                    color: Color(0xFF1976D2),
                                    borderRadius: BorderRadius.circular(9.0)),
                                child: Text('Login',
                                    style: TextStyle(
                                        fontSize: 20.0, color: Colors.white))),
                          ),
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding:
                              EdgeInsets.only(left: 10.0, right: 20.0, top: 20.0),
                          child: GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => SecondScreen()));
                            },
                            child: Container(
                                alignment: Alignment.center,
                                height: 45.0,
                                decoration: BoxDecoration(
                                    color: Color(0xFFD32F2F),
                                    borderRadius: BorderRadius.circular(9.0)),
                                child: Text('Register',
                                    style: TextStyle(
                                        fontSize: 17.0, color: Colors.white))),
                          ),
                        ),
                      )
                    ],
                  ),
                  Expanded(
                      child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Padding(
                          padding: EdgeInsets.only(bottom: 18.0),
                          child: GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => SecondScreen()));
                            },
                            child: Text('Forgot password?',
                                style: TextStyle(
                                    fontSize: 14.0,
                                    color: Colors.black,
                                    fontWeight: FontWeight.bold)),
                          ))
                    ],
                  ))
                ],
              )),
        );
      }
    }

Answer 1

您可以使用material.dart庫執行此操作

import 'package:flutter/material.dart';

class LoadingDialog extends StatefulWidget{
  LoadingDialogState state;

  bool isShowing(){
    return state!=null&&state.mounted;
  }

  @override
   createState()=> state=LoadingDialogState();
}

class LoadingDialogState extends State<LoadingDialog>{
  @override
  Widget build(BuildContext context) {
    return  Align(alignment: Alignment.center,
      child:  CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.lightBlue
      ) ,),);
  }


}

添加您的LoadingDialog類，您可以使用showLoadingDialog()和hideDialog()隱藏或顯示您的加載對話框

class LoginScreen extends StatefulWidget {
  @override
  State createState() => new _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  String _email = '';
  String _password = '';
  bool _load = false;
  LoadingDialog loadingDialog;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      backgroundColor: Colors.white,
      body: Container(
          padding: EdgeInsets.only(top: 150),
          child: Column(
            children: <Widget>[
              Image.asset(
                'img/img_login.png',
                width: 50,
                height: 50,
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
                child: TextField(
                  decoration: InputDecoration(
                      labelText: 'Email',
                      icon: Padding(
                        padding: EdgeInsets.only(top: 15.0),
                        child: Icon(Icons.email),
                      )),
                ),
              ),
              SizedBox(
                height: 15.0,
              ),
             /* Padding(
                  padding:
                  EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
                  child: Text(
                    helperText: 'No more than 8 characters',
                    labelText: 'Password',
                  ))*/
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: Padding(
                      padding:
                      EdgeInsets.only(left: 20.0, right: 5.0, top: 20.0),
                      child:
                      FlatButton(
                        onPressed: ()
                        {
                          setState((){
                            showLoadingDialog();
                          });
                        },
                        // GestureDetector(
                        //   onTap: () {
                        //     Navigator.push(
                        //         context,
                        //         MaterialPageRoute(
                        //             builder: (context) => FirstScreen()));
                        //   },
                        child: Container(
                            alignment: Alignment.center,
                            height: 45.0,
                            decoration: BoxDecoration(
                                color: Color(0xFF1976D2),
                                borderRadius: BorderRadius.circular(9.0)),
                            child: Text('Login',
                                style: TextStyle(
                                    fontSize: 20.0, color: Colors.white))),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding:
                      EdgeInsets.only(left: 10.0, right: 20.0, top: 20.0),
                      child: GestureDetector(
                        onTap: () {
                       //  Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
                        },
                        child: Container(
                            alignment: Alignment.center,
                            height: 45.0,
                            decoration: BoxDecoration(
                                color: Color(0xFFD32F2F),
                                borderRadius: BorderRadius.circular(9.0)),
                            child: Text('Register',
                                style: TextStyle(
                                    fontSize: 17.0, color: Colors.white))),
                      ),
                    ),
                  )
                ],
              ),
              Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Padding(
                          padding: EdgeInsets.only(bottom: 18.0),
                          child: GestureDetector(
                            onTap: () {
                           //   Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
                            },
                            child: Text('Forgot password?',
                                style: TextStyle(
                                    fontSize: 14.0,
                                    color: Colors.black,
                                    fontWeight: FontWeight.bold)),
                          ))
                    ],
                  ))
            ],
          )),
    );
  }
  void showLoadingDialog() async {
    await new Future.delayed(new Duration(milliseconds: 30));
    await showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) =>
        loadingDialog = loadingDialog ?? LoadingDialog());
    //builder: (BuildContext context) => WillPopScope(child:loadingDialog = LoadingDialog() , onWillPop:  () async => false,));
  }
  Future hideDialog() {
    if (loadingDialog != null && loadingDialog.isShowing()) {
      Navigator.of(context).pop();
      loadingDialog = null;
    }
  }

}

Answer 2

嘗試使用進度提示。 對我來說有用。 鏈接在這里。

https://pub.dartlang.org/packages/progress_hud