Stacked-Org / stacked

A Flutter application architecture created from real world scenarios
MIT License
962 stars 253 forks source link

BottomNavBar pattern question #410

Closed e-e closed 3 years ago

e-e commented 3 years ago

I have implemented the bottom navbar pattern as outlined in the tutorial, and it is working great. I would like to trigger navigation to one of the navbar items after another action is performed - is there a pattern for this? How do I inform the underlying View class which handles rendering each of the navbar item views to change indexes? Thank you in advance, and sorry if I missed this in the tutorial/documentation.

hurbes commented 3 years ago

Can you please provide more information regarding this like where and how you are trying to trigger the navigation?

e-e commented 3 years ago

Basically I just want to trigger "navigation" via code as opposed to tapping one of the bottom navigation buttons. So, similarly to how the NavigationService is used, but instead change which bottom navigation button is active.

e-e commented 3 years ago

So for example, this is taken from the tutorial:

class HomeView extends StatelessWidget {
  const HomeView({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<HomeViewModel>.reactive(
      builder: (context, model, child) => Scaffold(
        body: getViewForIndex(model.currentIndex),
        bottomNavigationBar: BottomNavigationBar(
          ...
        ),
      ),
      viewModelBuilder: () => HomeViewModel(),
    );
  }

  Widget getViewForIndex(int index) {
    switch (index) {
      case 0:
        return PostsView();
      case 1:
        return TodoView();
      default:
        return PostsView();
    }
  }
}

Let's say the current nav index is 0, so PostsView() is being rendered. So as an example, I want to programmatically change the bottom nav index to 1 (from PostsViewModel) and show the TodoView()

e-e commented 3 years ago

Ok, never mind, I feel dumb now. I could just pass a method to PostsView and TodoView that can be used for changing that index. If there is a better pattern though, I would appreciate feedback. It would be nice to have that method more widely available without having to keep passing it down the chain

hurbes commented 3 years ago

You can call setIndex from anywhere in the ViewModel, and override it to call some functions when the setIndex is triggered. Additionally if you want to navigate or change the index based on some reaction from a service then you can use a stream to listen to it and update the index accordingly.