Flutter-Fire FirebaseInitApp() rebuilds the entire App on Hot reload

Hi everyone,

So I have updated my app to the latest release of FlutterFire(https://firebase.flutter.dev/) in which they have made some mayor changes in favor of having consistency over all the platforms implementation.

One of the changes is forcing you to Firebase.initializeApp()at the start of the app with a Future. The code they suggest to use is this:

FutureBuilder(
  // Initialize FlutterFire
  future: Firebase.initializeApp(),
  builder: (context, snapshot) {
    // Check for errors
    if (snapshot.hasError) {
      // return SomethingWentWrong();
      print('Something went wrong in Flutter Fire');
    }

    // Once complete, show your application
    if (snapshot.connectionState == ConnectionState.done) {
      return MyApp();
    }

    // Otherwise, show something whilst waiting for initialization to complete
    return Container();
  },
);

But since If made the change, every time I do a Hot Reload the whole tree is rebuild and the Hot Reload functionality is lost, as well as causing some strange errors like FocusNodes getting dispose and recall.

Has anyone made the change and find a solution or a better way to implemented? Thanks

1 Like

In case anyone encounter this problem, I leave here the solution. The reason why this happens is due to the Future of the FutureBuilder getting recall every time the build method of the Widget is triggered.

This quote from the FutureBuild docs explains it perfectly.

The future must have been obtained earlier, e.g. during State.initState, State.didUpdateConfig, 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.

It is good to understand this, as it could have a big impact in performance and Firebase cost when calling the db.

The code that works with hotReload and avoids initializing Firebase multiple times is:

class FlutterFireInit extends StatefulWidget {
  final Widget child;
  const FlutterFireInit({Key key, @required this.child}) : super(key: key);

  @override
  _FlutterFireInitState createState() => _FlutterFireInitState();
}

class _FlutterFireInitState extends State<FlutterFireInit> {
  Future<FirebaseApp> _initialization;

  @override
  void initState() {
    _initialization = Firebase.initializeApp();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Initialize FlutterFire
      future: _initialization,
      builder: (context, snapshot) {
        // Check for errors
        if (snapshot.hasError) {
          // return SomethingWentWrong();
          print('Something went wrong in Flutter Fire');
        }

        //TODO: See what to do with this
        // Once complete, show your application
        if (snapshot.connectionState == ConnectionState.done) {
          return widget.child;
        }

        // Otherwise, show something whilst waiting for initialization to complete
        //TODO: Change for splash just in case
        return Container();
      },
    );
  }
}

Solved the problem thanks to the help of @Ehesp in the FlutterFire Github repo.

6 Likes

I have spent so much time trying to figure out why this was happening, and it happened around the same time I reworked all my top level code. Thank you for posting this!

2 Likes

Hi Dustin, you may encounter another “error” that is a black screen in between the loading widget(when firebase has not init) and the first screen the user sees. This only happens if you init right at the star of the app, for example if you need to check if there user is auth before showing him anything.

I’m going to try and find the best solution for this.

I’ll post my solutions when I have them and tag you :wink:

If you ar not experiencing this please let me know, it would be good to know.

2 Likes

Hey @Dustin_Silk I’ve just crated a new Topic for the issue I’ve commented above, If you are having the same problem or know how to solve it please comment :wink:

Hey @Dustin_Silk just solved the las problem with some help. It simplifies everything a lot so check it out. The solution is in this Issue

Hope it helps :wink:

1 Like

Ah thats great! I didn’t realise delaying runApp would keep the Splash screen up, thanks for following through with this!

1 Like