Router

• Introduction
• Basics
  • Adding routes
  • Navigating to pages
  • Passing data to routes
  • Page transitions
  • Navigation types
  • Multiple routers

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 /lib/routes/router.dart file.

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

  // add more routes
  // router.route('/home', (context) => HomePage());

});

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

Navigating to pages

You can navigate to new pages using the Navigator class as per the below example.

void _pressedSettings() {
    Navigator.pushNamed(context, "/settings-page");
}

You can also navigate using the routeTo() helper if your widget extends NyState.

...
class SettingsPage extends NyStatefulWidget {
  final SettingController controller = SettingController();
  
  SettingsPage({Key key}) : super(key: key);
  
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends NyState<SettingsPage> {

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

Pass data to the next page.

// HomePage Widget
void _pressedSettings() {
    Navigator.pushNamed(context, "/settings-page", arguments: "Hello World");
    // or
    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 NyState<HomePage> {
  ...
  _showProfile() {
    User user = new User();
    user.firstName = 'Anthony';

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

...

Next on our other page

class _ProfilePageState extends NyState<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.

Multiple routes

If your /routes/router.dart file is getting big or you just want to separate your routes, there's a way. You can first define your new routes in a new file like the below example.

Example new routes file: /lib/routes/dashboard_router.dart

NyRouter dashboardRouter() => nyRoutes((router) {
   
   Add your routes here
   router.route("/account", (context) => AccountPage());
   
   router.route("/account/update", (context) => AccountUpdatePage());
});

Then, open /lib/main.dart and add the new router.

Nylo nylo = await Nylo.init(router: buildRouter(), setup: boot);
...

nylo.addRouter(dashboardRouter()); // new routes