slovnicki / beamer

A routing package built on top of Router and Navigator's pages API, supporting arbitrary nested navigation, guards and more.
MIT License
589 stars 130 forks source link

Update bottom_navigation example #632

Open STRENCH0 opened 1 year ago

STRENCH0 commented 1 year ago

Is your feature request related to a problem? Please describe. I have spent a lot of time trying to implement bottom nav bar like it was in first example. In basic app it works well but in more complex app there are some problems. For example I have an app with theme selector. routerDelegateHome is only needed to open our HomeScreen with BottomNavigationBarWidget.

  final _routerDelegateHome = BeamerDelegate(
      locationBuilder: RoutesLocationBuilder(
        routes: {
          '*': (context, state, data) => HomeScreen(),
        },
      ),
    );

  Widget build(BuildContext context) {
        return MaterialApp.router(
            scrollBehavior: CustomScrollBehavior(),
            debugShowCheckedModeBanner: false,
            routeInformationParser: BeamerParser(),
            routerDelegate: _routerDelegateHome,
            backButtonDispatcher: BeamerBackButtonDispatcher(delegate: _routerDelegateHome),
           // we can use here any state management approach, result will be the same
            themeMode: EasyDynamicTheme.of(context).themeMode,
            theme: ThemeData(
                useMaterial3: true,
                colorScheme: lightScheme,),
            /* dark theme settings */
            darkTheme: ThemeData(
                useMaterial3: true,
                colorScheme: darkScheme,));
  }

HomeScreen:

  final _routerDelegate = BeamerDelegate(
      notFoundRedirect: NotFoundErrorLocation(),
      locationBuilder: BeamerLocationBuilder(
        beamLocations: [
          PurchasesLocation(),
          WalletsLocation(),
          NotFoundErrorLocation(),
          CategoriesLocation(),
          SettingsLocation(),
          ChartsLocations(),
          IntroductionScreenLocation(),
        ],
      ),
      navigatorObservers: [HeroController(), SentryNavigatorObserver()],
    );

  final _beamerKey = GlobalKey<BeamerState>(debugLabel: "beamer_global_key");

  @override
  Widget build(BuildContext context) {
    return WithForegroundTask(
      child: Scaffold(
        body: Beamer(
          key: _beamerKey,
          routerDelegate: _routerDelegate,
        ),
        bottomNavigationBar: BottomNavigationBarWidget(
          beamerKey: _beamerKey,
        ),
      ),
    );
  }
  1. Beaming to the first screen with not null data then beaming to the second (now we have main screen, first screen, second screen in out stack) and finally beaming back (to the first screen) causes npe exception in out location. The reason is that
    BeamBackButtonDispatcher with _routerDelegateHome is used and it hasn't data copied in his state.
  2. We can fix it by adding to HomeScreen Beamer dispatcher: backButtonDispatcher: BeamerBackButtonDispatcher(delegate: _routerDelegate, alwaysBeamBack: false)
  3. But there is still a problem with our beamers. In my case it was related to changing theme. We lose current screen state after MaterialApp state change. And after that the behaviour from the 1 paragraph appears again. I solved this by setting updateParent to false inside Beamer.

Describe the solution you'd like In example:

  1. Add backButtonDispatcher for Beamer which is used to navigate throw NavigationBar
  2. ??? Add updateParent:false when ParentBeamer is only used for navigation to HomeScreen.