🦋Flutter - Next Level Navigation - Basics
Tags: flutter, dart, productivity, programming
Published: 2021-04-04 17:25:34

> When it comes to navigation between multiple pages, you can't get around the Flutter Navigator. However, repetitive code when calling the same pages over and over can be very annoying. Why not move page routing to a separate class and make routing even easier:

Check out the **whole series on medium** (and support my work):
{% medium https://betterprogramming.pub/how-to-handle-page-routing-in-flutter-using-the-routegenerator-ccce288e751c?source=friends_link&sk=5cecbd11192393faa3389b9e568bfe5e %}

## content
<ul>
    <li><a href="#the-basics">The Basics</a></li>
    <li><a href="#the-routegenerator">The RouteGenerator</a></li>
    <ul>
      <li><a href="#1-create-a-class-routegenerator">1. create a class RouteGenerator</a></li>
      <li><a href="#2-assign-the-routegenerator-in-the-main-class">2. assign the RouteGenerator in the main class</a></li>
      <li><a href="#3-perform-the-navigation">3. perform the navigation</a></li>
    </ul>
</ul>

## The Basics
In order to jump to another page for example by clicking on a button we use the Flutter navigator:

``` dart
TextButton(
  onPressed: () {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => Page2()
      )
    );
  },
  child: Text('Navigate to Page 2'),
),

```
`Navigator.of(context)` uses the Navigator instance with the current `BuildContext`. Then a new page is placed on top of the current one using the `push` function. In this, a new `MaterialPageRoute` is created, which references the new page in its build function.

Alternative functions on `Navigator.of(context)` are...
- `.pop()` to return to the previous page
- `.popUntil((route) => condition)` -> to navigate back to the previous page until the desired site appears
- `.pushReplacement(newRoute)` -> to replace a page with the current one
- `.popAndPushNamed(routeName)` -> similar to the previous one, but before that the navigation to the page is made uniquely identifiable with a string
- `.pushNamed(routeName)` -> similar to the previous one, but without replacing the current page with it

Now imagine you want to call not only a new page, but also pass values to it or transfer to an error page (404) in case of wrong navigation? The code becomes confusing and hard to read very quickly!

To solve this problem generate a class to handle dynamic routes.

## The RouteGenerator
To realize the routing via a separate class, 3 things have to be done:
### 1. create a class RouteGenerator

``` dart
class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    
    switch (settings.name) {
      case '/page1':
        return MaterialPageRoute(builder: (_) => Page1());
      case '/page2':
        return MaterialPageRoute(builder: (_) => Page2());
    }
  }
```
This class contains a static function which gets passed a `RouteSettings` object and returns a dynamic route. The `name` attribute of the passed object is used to locate the page to navigate and return the corresponding object.

### 2. assign the RouteGenerator in the main class
For this, the two attributes `onGenerateRoute` and `initialRoute` must be set.

``` dart
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {

    return MaterialApp(
      onGenerateRoute: RouteGenerator.generateRoute,
      initialRoute: '/page1',
    );
  }
}

```

### 3. perform the navigation
Now a new page can be called using a simplified call similar to the one at the beginning. In this case, only a string identifier for the new page has to be passed:

``` dart
TextButton(
  onPressed: () {
    Navigator.of(context).pushNamed('/page2');
  },
  child: Text('Navigate to Page 2'),
),
```

And that's all to start with!

[Follow me](https://dev.to/lucianojung) to not miss the following posts of this series 

-----
#### You may also like:

{% link https://dev.to/lucianojung/flutter-next-level-navigation-passing-information-1o1f %}

{% link https://dev.to/theotherdevs/starting-with-flutter-screen-navigation-3o4m %}

{% link https://dev.to/lucianojung/global-variable-access-in-flutter-3ijm %}