
In our flutter tutorial series, I’m going to write about a flutter navigation tutorial with an example.
Navigation (Routing) is used for moving between one page to another.we can also pass data between pages. In flutter, we have multiple ways to navigate between pages such as,
- Simple Routing
- Named Routes
Getting Started
Let’s create a new project to learn about flutter routing
flutter create navigate
cd navigate
Now, we need to create pages for navigation. I’m going to create three pages/ files called first.dart
, second.dart
, and third.dart
lib/pages/first.dart
import 'package:flutter/material.dart';
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("First Page")),
body: Center(
child: Column(children: [
Text("First Page"),
RaisedButton(child: Text("Goto Page 2"), onPressed: () {
// navigation code here
})
]),
),
);
}
}
Now, our main.dart
looks like this
import 'package:flutter/material.dart';
import 'package:navigate/pages/first.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: FirstPage(),
);
}
}
Flutter Simple Routing Example:
flutter simple routing doesn’t need any type of configuration. We simply need to use the following lines
Navigator.push(context, MaterialPageRoute(builder: (context)=> PageName()));
Now, we have to implement with onpress
lib/pages/first.dart
import 'package:flutter/material.dart';
import 'package:navigate/pages/second.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: () {
Navigator.push(context, MaterialPageRoute(builder: (context)=> SecondPage()));
})
]),
),
);
}
}
Explanation:
- When user press RaisedButton, we’re navigating to page 2
Working with Page 2
Lets’ create another page called second.dart as like as first.dart
lib/pages/second.dart
import 'package:flutter/material.dart';
import 'package:navigate/pages/third.dart';
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Second Page")),
body: Center(
child: Column(children: <Widget>[
Text("Second Page"),
RaisedButton(child: Text("Goto Page 3"), onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context)=> ThirdPage()));
})
]),
),
);
}
}
Working with Page 3:
/lib/pages/third.dart
import 'package:flutter/material.dart';
import 'package:navigate/pages/first.dart';
class ThirdPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Third Page")),
body: Center(
child: Column(children: <Widget>[
Text("Third Page"),
RaisedButton(child: Text("Goto Page 2"), onPressed: () {
Navigator.pop(context);
})
]),
),
);
}
}
Explanation:
- In our third.dart, we have created a RaisedButton, when the user pressed that, we’re using Navigator.pop() for moving backward

Passing data between pages
we learned how to move between page 1 to page 2 but it doesn’t much help without data passing. Let’s learn that.
Now, we’re going to pass data from first.dart to second.dart.to do that, first we need to work with second.dart.
class SecondPage extends StatelessWidget {
String _name = '';
String _message = '';
SecondPage(name, message){
this._message = message;
this._name = name;
}
@override
Widget build(BuildContext context) {
// some code
}
}
Explanation:
- We Created variables for _name and _message & also created a constructor to assign received data to _name and _message
Inside our first.dart Raised button, we can pass this data
RaisedButton(
child: Text("Goto Page 2"),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondPage("codesundar.com", "How are you")));
}
)
Explanation:
- when the user pressed the button, we’re passing data to secondpage