Before getting started ๐
This post was written for Flutter 3.24.
It assumes Flutter is already installed.
Let's look at the initial setup I commonly use for navigating between pages in Flutter.
Before implementation, we will define the goals and requirements and install the necessary packages.
Goals and requirements ๐ ๐จโ๐ป
Before development, I want to add the following requirements to Flutter's basic page-navigation capabilities.
Create a login page and allow access to other pages only after login, using FlutterSecureStorage
.
โก๏ธ Link: Login-page branching with FlutterSecureStorage
Show no navigation bar on the login page, but display it on every page
after login.
โก๏ธ Link: Setting up a bottom navigation bar
Each navigation tab can contain additional pages. Even when nested several levels deep, selecting a tab should move to that tab
. If the current tab is selected again, navigate to its top-level page
.
โก๏ธ Link: Configuring navigation-bar tab events
On every page except login, allow navigation to another tab through a separate button
, without using the bottom navigation bar.
โก๏ธ Link: Using navigation-bar tab events from widgets
Creating and running a Flutter project ๐ Create a Flutter project.
flutter create navigationbar_example Run the generated project.
cd navigationbar_example flutter run The project is running successfully.
Installing FlutterSecureStorage and Get ๐ flutter pub add flutter_secure_storage get Check that the packages have been added to pubspec.yaml.
dependencies : flutter_secure_storage : ^9.2.4 get : ^4.6.6 In the next post, we will use FlutterSecureStorage to build a login page according to these requirements, then add a navigation bar.
Flutter Navigation: Goals, Requirements, and Initial Setup