Flutter provides its inbuilt navigator to navigate between pages. In our application it must have multiple screens and we wanted to navigate on all screens so in flutter we use Navigator class to navigate between pages.
In android we use Activity and in iOS we use ViewController to navigate between pages.
In this article i will show you to navigate to another page and also passing parameters to pages. I will take an example of two screens where we will navigate and than come back to the same page.
Step 1 : Create flutter project
Very first step is to create the fluter application using command line tool or in Android studio.
flutter create example_appThis will create a new project with name my_app then go in to the folder.
Step 2 : Create two widgets for navigation
Now, Create two widgets to navigate between the pages. Let’s create one widget name as FirstPageWidget and Second as SecondPageWidget
File : lib/FirstPageWidget.dart
import 'package:flutter/material.dart';
class FirstPageWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// The title text which will be shown on the action bar
title: const Text("Readerstacks.com Demo"),
),
body: Center(
child: Column(children: [
Text(
'Hello, ReaderStack World! My First page',
style: Theme.of(context).textTheme.headline4,
),
ElevatedButton(
child: const Text("Navigate to Second"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondPageWidget('this is params')),
);
})
]))
);
}
}Here we used Navigator.push to navigate to another page which is SecondPageWidget and also used Scaffold for material mobile design.
lib/SecondPageWidget
import 'package:flutter/material.dart';
class SecondPageWidget extends StatelessWidget {
final String title;
const SecondPageWidget(this.title,{Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// The title text which will be shown on the action bar
title: Text(title),
),
body: Center(
child: Column(children: [
Text(
'Hello, ReaderStack World! My Second page',
style: Theme.of(context).textTheme.headline4,
),
ElevatedButton(
child: const Text("Navigate Back"),
onPressed: () {
Navigator.pop(context);
})
]))
);
}
} We used here Navigator.pop to go back to the last page.
Step 3 : Add Page to main file
Add you new pages to main.dart and start navigating.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
// Application name
title: 'Flutter Hello World',
// Application theme data, you can set the colors for the application as
// you want
theme: ThemeData(
primarySwatch: Colors.blue,
),
// A widget which will be started on application startup
home: FirstPageWidget(),
);
}
}
Step 4: Run the project
Simply run the project using command line or in android studio to check the implementation.
flutter run lib/main.dartHow to pass the data between pages using navigator.push?
In the above example we navigate page to another page but not passed any data to other page so to pass the data between one or two page we need to pass extra param to Navigator as below
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPageWidget("this is param")),
);Here we passed a parameter to SecondPageWidget(“this is param”) and in SecondPageWidget change as below
final String title;
const SecondPageWidget(this.title,{Key? key}) : super(key: key);
Run the implementation in dartpad.
