Data doesn't load until refreshed or reloaded in Flutter


In my app, I have a profile page that loads data from Firebase. However, when I click on it, the data does not load immediately and only shows up after I reload.

class _UserProfileState extends State<UserProfile> {
  User? user = FirebaseAuth.instance.currentUser;
  UserModel loggedInUser = UserModel();

  @override
  void initState() {
    super.initState();
    FirebaseFirestore.instance
        .collection("users")
        .doc(user!.uid)
        .get()
        .then((value) {
      this.loggedInUser = UserModel.fromMap(value.data());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          alignment: Alignment.center,
          children: [
            Column(
              children: [
                FadeAnimation(
                    1,
                    Container(
                      child: Column(
                        children: [
                          Row(
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(left: 10),
                                child: Text("Name : ",
                                    style: TextStyle(
                                        fontSize: 18,
                                        color: Colors.black54,
                                        fontWeight: FontWeight.w500)),
                              ),
                              Padding(
                                padding: const EdgeInsets.fromLTRB(60, 0, 0, 0),
                                child: Text('${loggedInUser.fullName}',
                                    style: TextStyle(
                                        fontSize: 18,
                                        color: Colors.black54,
                                        fontWeight: FontWeight.w500)),
                              )
                            ],
                          ),
                          Row(
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(left: 10),
                                child: Text("Email : ",
                                    style: TextStyle(
                                        fontSize: 18,
                                        color: Colors.black54,
                                        fontWeight: FontWeight.w500)),
                              ),
                              Padding(
                                padding: const EdgeInsets.fromLTRB(65, 0, 0, 0),
                                child: Text('${loggedInUser.email}',
                                    style: TextStyle(
                                        fontSize: 18,
                                        color: Colors.black54,
                                        fontWeight: FontWeight.w500)),
                              )
                            ],
                          ),
                          Row(
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(left: 10),
                                child: Text("Password : ",
                                    style: TextStyle(
                                        fontSize: 18,
                                        color: Colors.black54,
                                        fontWeight: FontWeight.w500)),
                              ),
                              Padding(
                                padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
                                child: Text('${loggedInUser.password}',
                                    style: TextStyle(
                                        fontSize: 18,
                                        color: Colors.black54,
                                        fontWeight: FontWeight.w500)),
                              )
                            ],
                          ),
                        ],
                      ),
                    ))
              ],
            ),
          ],
        ),
  }
}

I tried adding setState() after login authentication is successful but it made no difference. It should be noted that this profile page is part of a bottom navigation bar so I'm wondering if that is the problem causing an issue?

---------------Answer---------------

use FutureBuilder

[https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html][1]

hope it will solve your problem.


Previous : How to Drop Duplicates if the rows is present more than twice?
Next : How to arrange list item in spinner in descending order