Flutter Named Routing Tutorial

In our flutter tutorial series, I’m going to write a flutter named routing tutorial. In the last article, we have seen how to use simple routing with flutter.

Getting started

Let’s create a new project

flutter create navigate
cd navigate

then, we need to create the required pages called first.dart , second.dart , and third.dart inside pages folder.

lib/pages/first.dart

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("First Page")),
      body: Center(
        child: Column(children: <Widget>[
          Text("First Page"),
          RaisedButton(child: Text("Goto Page 2"), onPressed: () {
              // navigation code here
          })
        ]),
      ),
    );
  }
}

Explanation:

• We have created a single page/screen with Raisedbutton with center alignment

Note: you can create other pages with different class names like SecondPage and ThirdPage

After creating those pages, we need to declare our routes in MaterialApp() on main.dart

MaterialApp(
  routes: {

      '/': (context) => FirstPage(),
      '/second': (context) => SecondPage(),
      '/third': (context) => ThirdPage(),

  }, 
);

How to navigate using named routes?

You can use Navigator.pushNamed() for moving from one page to another

Navigator.pushNamed(context, 'routeName');
Navigator.pushNamed(context, '/second');

now, we can use this syntax to update our first.dart , second.dart and third.dart

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("First Page")),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("First Page"),
              RaisedButton(
                  child: Text("Goto Page 2"),
                  onPressed: () => Navigator.pushNamed(context, '/second'))
            ]),
      ),
    );
  }
}

Flutter Named Routing Tutorial: Passing data between pages

We all know, moving from one page to another page is not enough without passing data. This example, we’re going build a product catalog project for learning pass data between two pages. To do that, first, we need to create a new modal class for our product information.

class Product{
  final String name; 
  final double price; 
  final String img; 

  Product({this.name, this.price, this.img}); 
}

Then We have to create our Product List on our first page ( first.dart ) for displaying a product list.

  List<Product> _products = [
      Product(name: "iPhone X", price: 60000, img: "https://rukminim1.flixcart.com/image/416/416/j9d3bm80/mobile/k/x/a/apple-iphone-x-mqa82hn-a-original-imaeyysgmypxmazk.jpeg?q=70"),
      Product(name: "Samsung Galaxy A10", price: 19000, img: "https://rukminim1.flixcart.com/image/416/416/jt8yxe80/mobile/g/v/x/samsung-galaxy-a10-sm-a105fzbgins-original-imafenbrg4zt5xye.jpeg?q=70"),
      Product(name: "Honor 8C ", price: 13000, img: "https://rukminim1.flixcart.com/image/416/416/jq5iky80/mobile/h/z/n/honor-8c-bkk-al10-original-imafc7hyyxjpv6ew.jpeg?q=70"),
  ];

Image Credit: flipkart.com

Using this list of data, we can create a list with ListView.builder()

ListView.builder(
  itemCount: _products.length, 
  itemBuilder: (context, index){

    return ListTile(
      title: Text(_products[index].name),
      onTap: (){
        // code here
      },
    );

  }, 
)

when a single product clicked, we need to pass our data to the next page using Navigator.pushNamed() , where it takes the 3rd parameter for arguments. Here we have passed Product with every tap

Navigator.pushNamed(
  context,
  '/product-info',
  arguments: Product(name: _products[index].name, price: _products[index].price, img: _products[index].img),
);

Let’s create new page called product-detail.dart & receive data using ModalRoute.of(context).settings.arguments & Store into _productInfo

final Product _productInfo = ModalRoute.of(context).settings.arguments;

Download