[question] Bottom navigation with stacked

[RodolfoSilva]

Hi @FilledStacks, do you have any examples of how to use stacked with TabController or DefaultTabController?

Right now I'm implementing this way, but I don't know if this is the better way to do that:

home_view.dart

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

import 'package:my_app/ui/views/calendar/calendar_view.dart';
import 'package:my_app/ui/views/customer/customer_view.dart';
import 'package:my_app/ui/views/more/more_view.dart';
import 'package:my_app/ui/views/overview/overview_view.dart';
import 'package:my_app/ui/views/home/home_viewmodel.dart';

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

  @override
  Widget build(BuildContext context) {
    final tabs = [
      OverviewTabView(),
      CustomerTabView(),
      CalendarTabView(),
      MoreView(),
    ];
    final initialIndex = 0;
    return DefaultTabController(
      length: tabs.length,
      initialIndex: initialIndex,
      child: ViewModelBuilder<HomeViewModel>.reactive(
        viewModelBuilder: () => HomeViewModel(),
        onModelReady: (model) => model.setCurrentIndex(initialIndex),
        builder: (context, model, child) => Scaffold(
          body: TabBarView(
            children: tabs,
            physics: NeverScrollableScrollPhysics(),
          ),
          bottomNavigationBar: new Theme(
            data: Theme.of(context).copyWith(
              canvasColor: Colors.deepPurple,
              primaryColor: Colors.white,
              textTheme: Theme.of(context).textTheme.copyWith(
                    caption: new TextStyle(
                      color: Colors.white38,
                    ),
                  ),
            ),
            child: BottomNavigationBar(
              showUnselectedLabels: true,
              unselectedFontSize: 12.0,
              unselectedItemColor: Colors.white.withOpacity(0.5),
              onTap: (index) {
                DefaultTabController.of(context).animateTo(index);
                model.setCurrentIndex(index);
              },
              currentIndex: model.currentIndex,
              items: [
                BottomNavigationBarItem(
                  title: Text('Overview'),
                  icon: Icon(Icons.home),
                ),
                BottomNavigationBarItem(
                  title: Text('Customers'),
                  icon: Icon(Icons.group),
                ),
                BottomNavigationBarItem(
                  title: Text('Scheduler'),
                  icon: Icon(Icons.event),
                ),
                BottomNavigationBarItem(
                  title: Text('Settings'),
                  icon: Icon(Icons.more_horiz),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

home_viewmodule.dart

import 'package:stacked/stacked.dart';

class HomeViewModel extends BaseViewModel {
  int _currentIndex = 0;

  int get currentIndex => _currentIndex;

  void setCurrentIndex(int index) {
    _currentIndex = index;
    notifyListeners();
  }
}

Do you have any suggestion?

[FilledStacks]

hey @RodolfoSilva that looks like how I would do it. As I'm adding to the library I will be making stacked specific widgets that will make implementations of these kinds of things more readable and more intuitive to implement.

The way you're doing it now is how I would do it but I think there's a better way. I'll just need a few hours to find what's making it feel non elegant and then I'll be able to provide a better solution. On the way to v2 I will be planning and building these things.

[ParthaGudivada]

@RodolfoSilva @FilledStacks I was using Stacked to create a demo app.

You can look at this.

[essboyer]

I've been looking for a way to use a bottom navigation with my current, very large project which has already implemented Stacked for MVVM, services management, and navigation. The two above solution is close, but I need to be able to do things like populate the title depending on the page, add a search bar to appbar, etc.

This is proving to be difficult, and it seems like I'm having to scatter my code much more than I'm comfortable with, because a lot of the existing functionality resides in a custom Scaffold, which is used for the 5 pages which will feature the BottomNavigationBar, and those that will not. If possible, I'd really rather not dismantle and/or rewrite all the 30 or so existing pages.

Maybe someone has some ideas?

My Scaffold:

import 'package:flutter/material.dart';

class FSScaffold extends StatefulWidget {
  final GlobalKey scaffoldKey;
  final Widget body;
  final Widget title;
  final Widget bottomNavBar;
  final PreferredSizeWidget appBarBottom;
  final Widget fab;
  final int pageIndex;

  const FSScaffold({
    Key key,
    this.body,
    this.title,
    this.bottomNavBar,
    this.scaffoldKey,
    this.appBarBottom,
    this.fab,
    this.pageIndex,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<FSScaffold> {
  int pageIndex;
  final List<String> routes = [
    HomeRoute,
    SearchPageRoute,
    SchedulesRoute,
    UserNotificationsRoute,
    UserProfileRoute
  ];

  @override
  void initState() {
    super.initState();
    pageIndex = widget.pageIndex;
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          floatingActionButton: widget.fab,
          key: widget.scaffoldKey,
          bottomNavigationBar: widget.pageIndex == null ? null : BottomNavigationBar(
              onTap: (newIndex) {
                setState(() {
                  pageIndex = newIndex;
                });
                locator<NavigationService>().navigateTo(routes[newIndex]);
              },
              type: BottomNavigationBarType.fixed,
              showUnselectedLabels: true,
              showSelectedLabels: true,
              currentIndex: pageIndex,
              items: [
                BottomNavigationBarItem(
                    icon: Icon(Icons.home), title: Text('Home')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.search), title: Text('Search')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.query_builder), title: Text('Schedule')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.message), title: Text('Notifications')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.person_pin), title: Text('Profile')),
              ]),
          appBar: widget.title == null ? null : DefaultAppBar(
            title: widget.title,
            bottom: widget.appBarBottom,
          ),
          drawer: FSDrawer(),
          body: widget.body),
    );
  }
}

Example Implementation:

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final GlobalKey<ScaffoldState> _scaffKey = GlobalKey<ScaffoldState>();
  final TextEditingController _searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<SearchPageVM>.reactive(
      viewModelBuilder: () => SearchPageVM(),
      builder: (context, model, child) => FSScaffold(
        title: TextFormField(
            controller: _searchController,
            onChanged: (val) => model.searchQuery = val,
            decoration: InputDecoration(
              hintText: "Search for something...",
              filled: true,
              // prefixIcon: Icon(
              //   Icons.account_box,
              //   size: 28.0,
              // ),
              suffixIcon: IconButton(
                icon: Icon(Icons.clear),
                onPressed: () async {
                  _searchController.clear();
                  model.searchQuery = "";
                  model.searchResults = null;
                },
              ),
            )),
        key: _scaffKey,
        pageIndex: 1,
        body: Column(),
      ),
    );
  }
}

Note that I am using Navigation here instead of a TabView or something as a cheat. It "works", but the appearance of the BottomNavBar doesn't remain static, and changes with the navigation animation. This is not especially a viable solution for anyone looking for one.

[FilledStacks]

I do the exact same thing with my AppBar. If the appbar state change is what's causing your problems it needs to be separated. I have an AppBar with a customViewModel. This manages its own state, then you can create an app bar service that's injected into your AppBarViewModel that subscribes to a stream that emmits AppBarState classes. In that class you can set properties that you want.

class AppBarState {
  final String title;
  final bool showSearch;
  ...
}

This will allow you to set the state for your app bar as you land on certain views, or before you navigate. Even change it through the press of a button.

[ComplexCarbos]

I have a follow-up question using Stacked, NavigationService, Services, and a bottom navigation bar that is causing me angst.

In my setup, each page shown through the the bottom navigation bar has secondary navigation, which is 1 or 2 screens deep. I implemented the secondary navigation by tweaking the NavigationService example to use multiple Global Keys. I'm maintaining state across all the screens by putting everything in an IndexedStack. This most works ...

... except in two cases where I DON'T want the state maintained. For example, one screen displays a banner ad. If a user navigates away from this screen using the bottomNav, the App doesn't call the ViewModel's onDispose(), and the ad is displayed forever. I have a similar issue with a screen that plays a video, and I want to pause the video when the user navigates away using the bottom nav.

The only way I've been able to "fix" this behavior is through a custom RouteObserver where I fire the dispose(), or pauseVideo() service methods in the callbacks when appropriate. While this solution seems to work, it feels hacky and complicated. Is there a better approach?

[FilledStacks]

It doesn't sound too complilcated. You're going out of the expected behaviour so it's expected that you do some additional work for that. An architecture never provides for cases like these, which are considered to be implementation details. It outlines an organisation of the objects and the limitations in how they interact. The rest is implementation details, which I'm always reluctant to share because they change for me almost on every project while the architecture stays the same.

Your solution sounds fine to me, if I ever need to do that I'll have a more specific set of instructions on how I handle it but at the moment I have no input in the implementation.

[ComplexCarbos]

I really appreciate the feedback. Thank you!

[RodolfoSilva]

Thanks @FilledStacks

If anyone has any doubt, check out this post and the video below:

https://www.filledstacks.com/post/bottom-navigation-with-stacked-architecture/

https://www.youtube.com/watch?v=OBIrqm0LDaA