Black Screen Flash on Firebase.initializeApp();

Hi, the problem I’m having is that every time the app starts, a black screen is shown for a split second between the splashScreen and the first page of the app.

This happens when firebase changes to the ConnectionState.done state, and switches between one widget to another.

class FlutterFireInit extends StatelessWidget {
  final Future<FirebaseApp> _initialization = Firebase.initializeApp();
  final Widget child;
  FlutterFireInit({Key key, @required this.child}) : super(key: key);

  @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');
        }

        // Once complete, show your application
        if (snapshot.connectionState == ConnectionState.done) {
          print('firebase INIT');
          return child;
        }

        // Otherwise, show something whilst waiting for initialization to complete
        print('firebase not Init');
        return Container(
          height: double.infinity,
          width: double.infinity,
          color: Color.fromRGBO(34, 36, 49, 1),
          alignment: Alignment.bottomCenter,
        );
      },
    );
  }
}

I have also open an issue in the Github repo of FlutterFire

I only see it in debug mode. Did you try it in release mode?

I solve the problem thanks to TahaTesser in the issue that I had added to Github. Firebase should be initialize before the app and without a widget like this:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

With this, the splash screen waits until Firebase has init.

Thanks anyone for the time :wink:

2 Likes