Add a Navigator to a Flutter App

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.

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!

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.

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:

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 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 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¹ app!²

1. Hector the little dinosaur written and illustrated by Aurelie Mercier. Cover image is also part of the book. ↩

2. As usual thanks to Peter for the few english corrections here and there, apparently I'm even getting better with my english 💪. ↩