How to avoid re-fetching user info from Firebase with Flutter

Question

As soon as the user logs in my app redirects user to homepage and the homepage has a bottomNavigationBar and a AppBar

In this AppBar I display the user's avatar and the appname. To show this I use:

Stack(
            children: [
              FutureBuilder(
                future: getAvatar(),
                builder: (context, snapshot) {
                  if (snapshot.hasError) {
                    return ClipRRect(
                      borderRadius: BorderRadius.circular(25.0),
                      child: Image.asset(
                        'assets/default_avatar.png',
                        fit: BoxFit.cover,
                      ),
                    );
                  }

                  if (snapshot.connectionState == ConnectionState.done) {
                    return Center(
                      child: SizedBox(
                        height: 45.0,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(25.0),
                          child: FadeInImage.assetNetwork(
                            placeholder: 'assets/default_avatar.png',
                            image: snapshot.data['avatar'],
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    );
                  }

                  return Scaffold(
                    body: Center(
                      child: CircularProgressIndicator(),
                    ),
                  );
                },
              ),
            ],

It works great, but I do not find it is good practice... and every time I change page from the bottom navigation bar the avatar "reloads" (you see the CircularProgressIndicator). doesn't help that it is a stateful class

So my solution to stop this from happening is to save user data somewhere on the phone and just grab that information whenever I need it. BUT HOW

FYI, it is not only the avatar, I will display username and useremail. If anyone has an example that they can redirect me to, that would be great!

Thank you!

Storing data locally using flutter is already posted about: https://stackoverflow.com/a/41448527/8382028 Shared Preferences is probably the way to go — ViaTech, Dec 17 '20 at 22:37

score 1 · Accepted Answer · answered Dec 18 '20 at 16:44

You're incorrectly using FutureBuilder.

The docs state

The future must have been obtained earlier, e.g. during State.initState, State.didUpdateWidget, or State.didChangeDependencies. It must not be created during the State.build or StatelessWidget.build method call when constructing the FutureBuilder. If the future is created at the same time as the FutureBuilder, then every time the FutureBuilder's parent is rebuilt, the asynchronous task will be restarted.

You're clearly not doing that here as you are obtaining the Future during build, making it expected that any time that build is called you're seeing the loading indicator.

Obtain the Future in initState and pass that Future to your FutureBuilder.

However, if you're also using a PageView or equivalent to manage your pages, you'll also need to use the AutomaticKeepAliveClientMixin and call super.build(context).

How to avoid re-fetching user info from Firebase with Flutter

1 Answers1