Add a Navigator to a Flutter App
Tags: flutter, mobiledev, navigator, react
Published: 2020-05-14 17:14:26

---
title: Add a Navigator to a Flutter App
published: true
description: Implementing routing on a Flutter application
tags: flutter, mobileDev, navigator, react
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/985clyyufedjuyb8jp2n.png
series: Wrapping my head around Flutter
---

Navigators have always been a pain while making a React Native app. With many third party options and not a clear way to go. They probably got better lately, but adding one in my Flutter app has been a breeze.

As always, there's an existing, specific widget to handle that and it's called [Navigator](https://api.flutter.dev/flutter/widgets/Navigator-class.html).

It took me just a couple of hours to have my home page up and running. One single button with an image coming from the assets that let you navigate to the Story. Very nice!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/77j5ccdfln00to7261qc.png)

All you need to do is to create a list of routes, in my case a list of one for now 😂, and make a `Map` out of them.

```dart
class Page {
  final String route;
  final WidgetBuilder builder;

  const Page({this.route, this.builder});
}

final routing = [
  Page(route: '/story', builder: (context) => Story()),
];

final Map<String, WidgetBuilder> routes =
    Map.fromEntries(routing.map((d) => MapEntry(d.route, d.builder)));
```

The `MaterialApp`, the root of the application, accepts a `Map` of routes as parameter:
```dart
MaterialApp(
   title: 'Hector the little dinosaur',
   routes: routes,
   home: HomePage(),
);
```

And basically that's it!

After this setup you'll be able to interact with Navigator API. In this case a `FlatButton` that invokes `Navigator.pushNamed('context', '/story')` API with current `context` and the name of the route I want to load: `/story`.

Inside the Story class I have a button that perform the pop action: `Navigator.pop(context);`

I looked at this [example](https://github.com/flutter/samples/blob/master/animations/lib/main.dart) from the official documentation in order to get some inspiration but I had some issues with the spread operator with the SDK version I installed so I just simplified it to the bare minimum.

## The Story Widget
To control the story flow, I found a very useful Widget called [PageController](https://api.flutter.dev/flutter/widgets/PageController-class.html) that gives me exactly what I needed: a slide to next / prev page in a very efficient way. So I didn't have to reinvent the wheel.

Important thing to notice is that since this Widget doesn't add new views on top of each other, as the Navigator does, I'm able to get back to the home page from any slide.

The implementation is very simple, I just have a list of slides defined in a static mapping and in this way I can build them programmatically.

This is my mapping:
```
List<List<String>> pages = [
  ['assets/images/Cover.png', 'Hector the little dinosaur', ''],
  [
    'assets/images/page1.png',
    """Hector is a little dinosaur who lives in the forest.
He spends all his days eating flowers and having a rest.""",
    'assets/audios/page1.mp3',
  ],
  ...
]
```

Well done **Flutter** having this implemented is a big step forward towards the goal of publishing my children's book[^credits] app![^peter]



[^credits]: [Hector the little dinosaur](https://hector.aureliemercier.com) written and illustrated by [Aurelie Mercier](https://www.instagram.com/aurelie_mercier/). Cover image is also part of the book.
[^peter]: As usual thanks to [Peter](https://petervaro.com) for the few english corrections here and there, apparently I'm even getting better with my english 💪.