Router



Introduction

Routes helps us navigate users around our apps. They provide a simple journey usually from the (/) index page. You can add routes in Nylo with the lib/routers/router.dart file. In this file, you’ll be able to assign the name of the route e.g. “/settings” and also the widget view you want to show.

You may also need to pass data from one view to the other and that’s also possible when navigating from a widget. We’ll dive deeper into how all this works in Nylo.


Adding routes

This is the most basic form of adding a new route to your project in the router.dart file.

buildRouter() => nyCreateRoutes((router) {
  ...
  router.route("/settings-page", (context) => SettingsPage());

});

{info} Inside the router.dart file you'll find the buildRouter function, this is called when initializing the app.


Navigating to pages

To start navigating to other pages, you can use the routeTo method. This will push a new page to the top of the navigation stack.

void _pressedSettings() {
    routeTo("/settings-page");
}

Pass data to the next page.

// HomePage Widget
void _pressedSettings() {
    routeTo("/settings-page", data: "Hello World");
}
...
// SettingsPage Widget
class _SettingsPageState extends NyState<SettingsPage> {
  ...
  @override
  widgetDidLoad() async {
    print(widget.data()); // Hello World
  }

Once you're on the new page, you can also call pop() to go back to the existing Page.

// SettingsPage Widget
class _SettingsPageState extends NyState<SettingsPage> {
  ...
  _back() {
    this.pop();
  }


Passing data to routes

You may sometimes need to pass data from one screen to another. Here’s a simple example of how that might look in Nylo.

class _HomePageState extends State<HomePage> {
  ...
  _showProfile() {
    User user = new User();
    user.firstName = 'Anthony';

    routeTo("/profile-page", data: user);
  }

...

Next on our other page

class _ProfilePageState extends State<ProfilePage> {
  ...
  @override
  widgetDidLoad() {
    User user = widget.data();
    print(user.firstName); // Anthony

  }

Note: For this to work your widget will need to extend the StatefulPageWidget class and have a controller.