Flutter Navigator and Routing in separate files
1. Create an Organized File Structure
Before we do any coding, we need to first structure our Navigation Route files and folders in the project. We are going to use a ‘VC’ model (V-views, C-controller) to manage our app flow.
Let’s start with creating folders and files in our flutter project. Inside our lib folder, we will create two files: route and views.
In the route folder, create a route.dart file. This file will be our controller for managing routes.
In the views folder, create all page views names that you need to use. In our case, it will be a login.dart, home.dart, and settings.dart files.
Inside these files, you can design your pages however you want.
Note: Of course, we could just create one dart file, create all pages there, and load them at once. But I’m not really a fan of that. I prefer to have all pages as a separate file so we could quickly and easily access them.
This is how our result should looks like:
2. Create Named Route Controller
The first thing we will do is create a route controller inside our route.dart file.
- import material design, and our previously created views. Then, create Route controller