How to animate a scaffold?

Question

I want to show a "welcome" page for a few seconds before showing the home screen. This is the working code showing just the home page (no transitions):

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: sharedBottomBar(),
      body: SafeArea(child: widget.child),
    );
  }

I am using go router, I have a bottom app bar , widget.child is a widget I pass from the main page shell route which contains the home page.

This is the main.dart _routerConfig's shell route:

ShellRoute(
  navigatorKey: _shellNavigatorKey,
  builder: (_, __, child) => BaseActivity(child: child),
  routes: [...],
)

This is the sharedBottomBar:

  Widget sharedBottomBar() {
    return BottomNavigationBar(
      currentIndex: _currentIndex,
      items: tabs(_currentIndex),
      selectedFontSize: sizeH6,
      selectedItemColor: Colors.black,
      onTap: (index) {
        if (index != _currentIndex) {
          // 0 is an arbitrary value which returns the tabs but the 0th element's 
          // icon is different color. Since this snippet doesn't use the Widgets but 
          // only the list, it doesn't do anything and has no impact.
          context.go(tabs(0)[index].initialLocation);
        }
      },
    );
  }

I have tried by adding AnimatedSwitcher like this:

  @override
  Widget build(BuildContext context) {
    if (firstLoad) {
      sceneSwitcher();
      firstLoad = false;
    }
    // I tried wrapping this with Scaffold but it didn't work.
    return AnimatedSwitcher(
      duration: const Duration(seconds: 1),
      child: show,
    );
  }

where show starts with a scaffold that mimics a Splash Screen. This doesn't look like a great solution but it's what I thought of.

  Widget show = Scaffold(
    backgroundColor: Colors.white,
    body: Center(
      child: Image.asset('assets/logo/logo_306x172.jpg'),
    ),
  );

And this is the function that switches the screens:

  void sceneSwitcher() {
    Future.delayed(const Duration(seconds: 1)).whenComplete(
      () => setState(
         // WelcomeView has it's own scaffold
        () => show = const WelcomeView(), 
      ),
    );
    Future.delayed(const Duration(seconds: 2)).whenComplete(
      () {
        setState(
          () => show = Scaffold(
            bottomNavigationBar: sharedBottomBar(),
            resizeToAvoidBottomInset: false,
            backgroundColor: Colors.white,
            body: SafeArea(child: widget.child),
          ),
        );
      },
    );
  }

The below code switches the screens, it shows the "Welcome" page, BUT for some reason the bottom app bar doesn't work. I added prints to see if we are going inside the onTap, and we are, the index != _currentIndex is also true which means we should switch with context.go(), but it doesn't switch. There are no error messages.

How to animate a scaffold?

0 Answers0