How to work with progress indicator in flutter?

后端 未结 12 791
面向向阳花
面向向阳花 2020-12-02 05:29

I\'m newbie in flutter and wanted to know what is better way to add CircularProgressIndicator in my layout. For example, my login view. This view have username,

12条回答
  •  独厮守ぢ
    2020-12-02 06:03

    Step 1: Create Dialog

       showAlertDialog(BuildContext context){
          AlertDialog alert=AlertDialog(
            content: new Row(
                children: [
                   CircularProgressIndicator(),
                   Container(margin: EdgeInsets.only(left: 5),child:Text("Loading" )),
                ],),
          );
          showDialog(barrierDismissible: false,
            context:context,
            builder:(BuildContext context){
              return alert;
            },
          );
        }
    

    Step 2:Call it

    showAlertDialog(context);
    await firebaseAuth.signInWithEmailAndPassword(email: email, password: password);
    Navigator.pop(context);
    

    Example With Dialog and login form

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:firebase_auth/firebase_auth.dart';
    class DynamicLayout extends StatefulWidget{
      @override
      State createState() {
        // TODO: implement createState
        return new MyWidget();
        }
      }
    showAlertDialog(BuildContext context){
      AlertDialog alert=AlertDialog(
        content: new Row(
            children: [
               CircularProgressIndicator(),
               Container(margin: EdgeInsets.only(left: 5),child:Text("Loading" )),
            ],),
      );
      showDialog(barrierDismissible: false,
        context:context,
        builder:(BuildContext context){
          return alert;
        },
      );
    }
    
      class MyWidget extends State{
      Color color = Colors.indigoAccent;
      String title='app';
      GlobalKey globalKey=GlobalKey();
      String email,password;
      login() async{
       var currentState= globalKey.currentState;
       if(currentState.validate()){
            currentState.save();
            FirebaseAuth firebaseAuth=FirebaseAuth.instance;
            try {
              showAlertDialog(context);
              AuthResult authResult=await firebaseAuth.signInWithEmailAndPassword(
                  email: email, password: password);
              FirebaseUser user=authResult.user;
              Navigator.pop(context);
            }catch(e){
              print(e);
            }
       }else{
    
       }
      }
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar:AppBar(
            title: Text("$title"),
            ) ,
              body: Container(child: Form(
                key: globalKey,
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Column(children: [
                  TextFormField(decoration: InputDecoration(icon: Icon(Icons.email),labelText: 'Email'),
                  // ignore: missing_return
                  validator:(val){
                    if(val.isEmpty)
                      return 'Please Enter Your Email';
                  },
                  onSaved:(val){
                    email=val;
                  },
                  ),
                    TextFormField(decoration: InputDecoration(icon: Icon(Icons.lock),labelText: 'Password'),
                 obscureText: true,
                      // ignore: missing_return
                      validator:(val){
                        if(val.isEmpty)
                          return 'Please Enter Your Password';
                      },
                      onSaved:(val){
                        password=val;
                      },
                  ),
                    RaisedButton(color: Colors.lightBlue,textColor: Colors.white,child: Text('Login'),
                      onPressed:login),
                ],)
                  ,),)
             ),
        );
      }
    }
    

提交回复
热议问题