How to implement CircularProgressIndicator in Flutter

CircularProgressIndicator can be implemented in UI with a condition.If you want to implement it in some area of your page you can use boolean to make it work like this:

 bool showCircular = false;

  Future<void> signIn() async {
    if (_formKey.currentState.validate()) {
      new Loading();
      _formKey.currentState.save();
      setState(() {
        showCircular=true;
       });
      try {
        final user = await FirebaseAuth.instance
            .signInWithEmailAndPassword(email: _email, password: _password);
        if (user != null) {
          final FirebaseUser user = await auth.currentUser();
         setState(() {
           showCircular=false;
         });
          print('success login');
          Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (context) => Home(user: user),
              ));
        }
      } catch (e) {
        print(e);
      }
    }
  }

Now anywhere in your UI add this widget:

showCircular ? CircularProgressIndicator() : SizedBox(),

Recommended way is using an AlertDialog to show progress indicator. Here is an example with AlertDialog.To open Dialogs you need context so take BuildContext as a parameter and call signIn(context); from sign in button.We will call dialog using openLoadingDialog function and when sign in is completed we will pop it using Navigator.of(context).pop();

Future<void> signIn(BuildContext context) async {
    if (_formKey.currentState.validate()) {
      new Loading();
      _formKey.currentState.save();
            openLoadingDialog(context, 'Signing In...');

      try {
        final user = await FirebaseAuth.instance
            .signInWithEmailAndPassword(email: _email, password: _password);
        if (user != null) {
          final FirebaseUser user = await auth.currentUser();
         Navigator.of(context).pop();
          print('success login');
          Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (context) => Home(user: user),
              ));
        }
      } catch (e) {
        print(e);
      }
    }
  }

Paste this dialog anywhere in your app.You can call it by passing context and message you want to show.

 openLoadingDialog(BuildContext context, String text) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => AlertDialog(
        content: Row(children: <Widget>[
          SizedBox(
            width: 30,
            height: 30,
            child: CircularProgressIndicator(
              strokeWidth: 1,
              valueColor: AlwaysStoppedAnimation(Colors.black)
            )
          ),

          SizedBox(width: 10),

          Text(text)
        ]),
      )
    );
  }