Navigation drawer template with MobX

Navigation drawer template with MobX

The navigation drawer is a common way for applications to provide users with access to various destinations in the application. Following on my post on the bottom navigation bar, I've created two new templates that make use of the provider and MobX packages that structure the application around using the navigation drawer. There are two as one involves using routes to take the user to the selected destination while the other makes swaps out what's displayed in the Scaffold's body akin to Android fragments. The latter is also similar to what was done for the bottom navigation bar. I won't be dwelving how state management was done As the approach to state management is pretty much identical to what was done for the template with a bottom navigation bar. Rather, this post is to let those that follow my blog know that the templates have been added and see what the results look like.

First let's see the navigation drawer that is common to both templates

These are screenshots for the template that swaps out the page content in the Scaffold's body. These are what the user will see after selecting one of the destinations in the navigation drawer

The slideshow page
The gallery page
The home page
The settings page

The other template is similar but will trigger a page transition and a back button takes the user back to the home page if they picked a page other than the home page. Here's an example where the gallery page was picked

After navigating to the gallery page

If these are useful to use, check out the GitHub repository that has all of the templates I've created. The template with the navigation drawer that takes users to each page through routes can be found here. The other template that swaps out the main page content is here. If you find these templates, let others know so that it can assist their development process.