How do I add loading screen in Flutter

Question

I am making an app with flutter and I want a loading screen while fetching data from firestore I used to do this in android by setvisibilty .I am new to flutter and I don't know how to do it I saw some questions on stack but they didn't seem to help full

I want to show the loading screen if firebaseUser is not null, this is my initState method

  void initState() {
    super.initState();
    isRegistered();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(32),
        child: Form(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("Login"),
              SizedBox(
                height: 16,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Container(
                    width: 50,
                    child: TextFormField(
                      maxLength: 4,
                      keyboardType: TextInputType.number,
                      controller: countryCodeController,
                      decoration: InputDecoration(
                        hintText: '+251',
                      ),
                    ),
                  ),
                  Container(
                    width: 200,
                    child: TextFormField(
                      maxLength: 9,
                      keyboardType: TextInputType.number,
                      controller: phonenumberController,
                      decoration: InputDecoration(
                        hintText: '912345678',
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 16,
              ),
              Container(
                width: double.infinity,
                child: FlatButton(
                    child: Text('Login'),
                    color: Colors.white,
                    padding: EdgeInsets.all(16),
                    onPressed: () {
                      final phoneNumber = countryCodeController.text.trim() + phonenumberController.text.trim();
                      if(phonenumberController.text.trim().length == 9 || countryCodeController.text.trim().length == 4){
                        loginUser(phoneNumber, context);
                      }else{
                        Fluttertoast.showToast(msg: "wronge input");
                      }
                    }),
              )
            ],
          ),
        ),
      ),
    );
  }
  void isRegistered() async{
    FirebaseAuth firebaseAuth = FirebaseAuth.instance;
    final FirebaseUser firebaseUser = await firebaseAuth.currentUser();
    final snapShot = await Firestore.instance.collection("users").document(
        firebaseUser.uid).get();
    if (firebaseUser != null) {
      if (snapShot.exists) {
        Navigator.pushReplacement(
            context,
            MaterialPageRoute(
                builder: (context) => HomePage(
                  firebaseUser: firebaseUser,
                )));
      }else{
      }
    }
  }
}

Answer 1

Just check out this example I have created for you:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isLoading = false; // This is initially false where no loading state
  List<Timings> timingsList = List();



  @override
  void initState() {
    super.initState();
    dataLoadFunction(); // this function gets called
  }

  dataLoadFunction() async {
    setState(() {
      _isLoading = true; // your loader has started to load
    });
    // fetch you data over here
    setState(() {
      _isLoading = false; // your loder will stop to finish after the data fetch
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _isLoading
            ? CircularProgressIndicator() // this will show when loading is true
            : Text('You widget tree after loading ...') // this will show when loading is false
      ),
    );
  }
}

Let me know if it works