flutter-named-routes-tutorial

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

Flutter Named Routing Tutorial
Flutter Named Routing Tutorial

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-simple-routing

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;
flutter-named-routing-example
flutter-named-routing-example