trigger rebuild using MaterialApp builder?

Question

I have a MaterialApp with a home or initialRoute (tried it both ways) as well as a builder:

MaterialApp(
 key: appKey,
 debugShowCheckedModeBanner: false,
 theme: CustomTheme.lightTheme,
 darkTheme: CustomTheme.lightTheme,
 navigatorKey: navigatorKey,
 navigatorObservers: <NavigatorObserver>[components.routes],
 //initialRoute: '/splash',
 home: Splash(),
 routes: pages.routes,
 builder: (BuildContext context, Widget? child) {
 if (flag) {
 return child!; // splash screen
 }
 print('this never prints'); // root of problem: unable to rebuild this.
 return MultiBlocProvider( // rest of the app
 providers: providers,
 child: HomePage(child: child),
 );
 }
);

So see how in the builder it has a flag - on the first run it returns the splash screen.

class Splash extends StatefulWidget {
 const Splash({Key? key}) : super(key: key ?? defaultKey);
 static const defaultKey = ValueKey('Splash');
 @override
 _SplashState createState() => _SplashState();
}
class _SplashState extends State<Splash> with TickerProviderStateMixin {
 /* animation args etc. */
 @override
 void initState() {
 super.initState();
 /* open database and stuff during splash screen animation */
 streams.app.splash.add(false); // the actual flag
 // PROBLEM: attempt to navigate to home page, doesn't work well:
 Navigator.of(navigatorKey.currentContext!)
 .pushReplacementNamed('/home');
 }
 @override
 Widget build(BuildContext context) => /* ... animated splash screen ... */;
}

See when the splash is finished I turn the flag from true to false. Unfortunately that seems to have no effect because I then use the navigatorKey to attempt to go to a new route, but it doesn't work right.

It seems to be using the splashscreen context or something, so it never reloads or never triggers a rebuild of the builder function on the MaterialApp. So it never gets into the "false" condition where I have the cubit providers and a bunch of other stuff.

Do you know how I should solve this? maybe I shouldn't even use the builder function?

Answer 1

I believe all that you want to do is the following flow :

1. The App shows a Splash Screen.
2. After a few seconds it shows the rest of the app.

The easiest way to achieve this is :

MaterialApp(
 ...
 home: MultiBlocProvider(
 providers: providers,
 child: Splash(),
 ),
 ...
);

class Splash extends StatefulWidget {...}
class _SplashState extends State<Splash> with TickerProviderStateMixin {
 ...
 @override
 void initState() {
 super.initState();
 Navigator.of(context).pushReplacement(
 MaterialPageRoute(builder: (c) => HomePage())
 );
 }
 @override
 Widget build(BuildContext context) => /* ... animated splash screen ... */;
}