Flutter Named Routing Tutorial - Navigation Tutorial - Part 2
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.
Getting started
Let's create a new project
flutter create navigate
cd navigatethen, 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 {
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 {
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;