8Creating an App's Navigation

WHAT YOU WILL LEARN IN THIS CHAPTER

  • How to use the Navigator widget to navigate between pages
  • How hero animation allows a widget transition to fly into place from one page to another
  • How to display a horizontal list of BottomNavigationBarItems containing an icon and a title at the bottom of the page
  • How to enhance the look of a bottom navigation bar with the BottomAppBar widget, which allows enabling a notch
  • How to display a horizontal row of tabs with TabBar
  • How to use TabBarView in conjunction with TabBar to display the page of the selected tab
  • How Drawer allows the user to slide a panel from left or right
  • How to use the ListView constructor to build a short list of items quickly
  • How to use the ListView constructor with the Drawer widget to show a menu list

In this chapter, you'll learn that navigation is a major component in a mobile application. Good navigation creates a great user experience (UX) by making it easy to access information. For example, imagine making a journal entry, and when trying to select a tag, it's not available, so you need to create a new one. Do you close the entry and go to Settings ➪ Tags to add a new one? That would be clunky. Instead, the user needs the ability to add a new tag on the fly and appropriately navigate to select or add a tag from their current position. When designing an app, always keep in mind how the user would navigate to different parts of the app with the least number of taps.

Animation while ...

Get Beginning Flutter now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial