Navigation (Navigator 1.0)
What is Navigation ??
Navigation is is a process that is used to move from one screen to another
The screen or page in flutter is also known as the routes and in android it is also known as the Activity
There are the different method to navigate from one screen to another
Let’s start’s from the easiest and the simple most for deep dive into the navigation
The navigator 1.0 is managed inside the stack .
The first screen will be displayed last when we move in reverse order or go back from one to another
Navigator :
The navigator is a class that is used for navigation process
According to the official documentation
A widget that manages a set of child widgets with a stack discipline.
The navigator class is placed at the top of the widget tree and it is accessed with the help of the inherited widget using the .of (context) method .
There are the following some of the functions or the method’s that are used for the navigation purpose
i ) Push :
Push is used to move or jump from one screen or route to another or from the current screen to the given screen
@optionalTypeArgs
Future<T?> push<T extends Object?>(
BuildContext context,
Route<T> route
)According to the official documentation
Push the given route onto the navigator that most tightly encloses the given context.
ii ) Pop :
Pop is used to move from the current page to the previous one from which it is pushed
@optionalTypeArgs
void pop<T extends Object?>(
BuildContext context,
[T? result]
)According to the official documentation
Pop the top-most route off the navigator that most tightly encloses the given context.
The above are two basic that are used for simple navigation
Let’s deep dive into them
Material Page Route :
Material page route is used to change the current screen with the given screen
(new) MaterialPageRoute<dynamic> MaterialPageRoute({
required Widget Function(BuildContext) builder,
RouteSettings? settings,
bool maintainState = true,
bool fullscreenDialog = false,
bool allowSnapshotting = true,
})According to the official documentation
A modal route that replaces the entire screen with a platform-adaptive transition.
For Android, the entrance transition for the page zooms in and fades in while the exiting page zooms out and fades out. The exit transition is similar, but in reverse.
For iOS, the page slides in from the right and exits in reverse. The page also shifts to the left in parallax when another page enters to cover it. (These directions are flipped in environments with a right-to-left reading direction.)
The second screen name is given inside the builder function to jump from the current
All of the other properties will be discussed later
Navigator.of(context). push(MaterialPageRoute(
builder: (context) => SecondPageDesign(),
));The above code is the complete code to navigate from one scree to the given one .
import 'package:flutter/material.dart';
import 'package:flutter_navigator_1_0_practice/simple_material_page_route/second_page.dart';
class FirstPageDesign extends StatefulWidget {
const FirstPageDesign({super.key});
@override
State<FirstPageDesign> createState() => _FirstPageDesignState();
}
class _FirstPageDesignState extends State<FirstPageDesign> {
@override
Widget build(BuildContext context) {
void navigateToNextPage() {
Navigator.of(context). push(MaterialPageRoute(
builder: (context) => SecondPageDesign(),
));
}
return Scaffold(
appBar: AppBar(
title: Text("First Page Design"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"First Page",
style: TextStyle(color: Colors.deepOrange, fontSize: 40),
)
],
),
),
floatingActionButton: FloatingActionButton(onPressed: navigateToNextPage),
);
}
}In the above code on the click event of the floating action button . i will simply navigate from the current screen to the next one
After navigating from the current to the next one using push then i will come back using the pop method by the click event of the floating action button
import 'package:flutter/material.dart';
class SecondPageDesign extends StatefulWidget {
const SecondPageDesign({super.key});
@override
State<SecondPageDesign> createState() => _SecondPageDesignState();
}
class _SecondPageDesignState extends State<SecondPageDesign> {
@override
Widget build(BuildContext context) {
void goBack() {
Navigator.of(context).pop();
}
return Scaffold(
appBar: AppBar(
title: Text("Second page Design "),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Second Page",
style: TextStyle(color: Colors.purple, fontSize: 50),
)
],
),
),
floatingActionButton: FloatingActionButton(onPressed: goBack),
);
}
}The above code is for simple navigation from one screen to another .
If you want’s some kind of animation while navigating from one screen to another then use the page route builder instead of the material page route
Page Route Builder :
Page route builder is used to navigate from the current screen to another by animating them
(new) PageRouteBuilder<dynamic> PageRouteBuilder({
RouteSettings? settings,
required Widget Function(BuildContext, Animation<double>, Animation<double>) pageBuilder,
Widget Function(BuildContext, Animation<double>, Animation<double>, Widget) transitionsBuilder = _defaultTransitionsBuilder,
Duration transitionDuration = const Duration(milliseconds: 300),
Duration reverseTransitionDuration = const Duration(milliseconds: 300),
bool opaque = true,
bool barrierDismissible = false,
Color? barrierColor,
String? barrierLabel,
bool maintainState = true,
bool fullscreenDialog = false,
bool allowSnapshotting = true,
})Now let’s deep dive into the properties of the page route builder
Page Builder :
Page builder is same as the builder of the material page route in which you simply add the name of the next screen where you want’s to navigate
Transition Duration :
Transition duration is used to set the time or the duration of the given of the transition animation
By default it is set to 300 milliseconds
Reverse Transition Duration :
Reverse transition duration is used to set the time or the duration of the given of the transition animation while moving back using pop or the back icon of the app bar of the second page or the screen
By default it is set to 300 milliseconds
Barrier :
Barrier is the color that is displayed while navigation is performed like when the dialog will be pop the area below the dialog will become grey color .
Barrier Dismissible :
Whether the barrier will be dismissed or not . By default the barrier is visible
Barrier color :
Barrier color is used to set the color of the barrier .
Barrier Label :
According to the official documentation
The semantic label used for a dismissible barrier.
If the barrier is dismissible, this label will be read out if accessibility tools (like VoiceOver on iOS) focus on the barrier.
Full Screen Dialog :
According to the official documentation
Whether this page route is a full-screen dialog.
In Material and Cupertino, being fullscreen has the effects of making the app bars have a close button instead of a back button. On iOS, dialogs transitions animate differently and are also not closeable with the back swipe gesture.
Transition Builder :
Transition builder is used to perform the animation or add the transition animation while navigating
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return ScaleTransition(scale: animation, child: child);
},The value of the animation is given which ranges from 0 to 1 . use these values to perform the animation
There are different types of the transition like fade transition , scale transition , rotate transition , slide transition , size transition etc .
If you want’s more knowledge about the transition animation then kindly read it from the official documentation or you may also get some of the knowledge from my article on transition animation
void navigateToNextPage() {
Navigator.of(context).push(PageRouteBuilder(
transitionDuration: const Duration(seconds: 3),
barrierColor: Colors.brown,
reverseTransitionDuration: const Duration(seconds: 3),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return ScaleTransition(scale: animation, child: child);
},
pageBuilder: (context, animation, secondaryAnimation) {
return MySecondPageDesign();
},
));
}The above code is used to navigate from one screen to another using the page route builder
If you want’s to use different kind of animation like slide transition etc . whose value does not given from 0 to 1 then use the animation . drive method and then pass the tween inside it in which you have to set you own values for the tween you want’s
SlideTransition(
position: animation.drive(
Tween<Offset>(
begin: Offset(0, 1),
end: Offset(0, 0),
),
),Now let’s talk about the push named or the routes technique which is used for the navigation purpose
Push Named :
Push name is the easier technique then the simple push because here you do not need to remember the name of the class where you will be pushed . You can use the unique page name or the id to navigate to that screen
According to the official documentation
@optionalTypeArgs
Future<T?> pushNamed<T extends Object?>(
BuildContext context,
String routeName,
{Object? arguments}
)Push a named route onto the navigator that most tightly encloses the given context.
void _didPushButton() {
Navigator.pushNamed(context, '/settings');
}The route name will be passed to the Navigator . on Generate Route callback. The returned route will be pushed into the navigator.
To make the name of the screen you should a static constant value and the value of the unique id or the page name must be in the string and start’s with the forward Slash ( / )
static const SECOND_PAGE = "/secondPage";The below code is used to simply navigate from one screen to another using the push name
Navigator.of(context).pushNamed(
SecondPagePushName.SECOND_PAGE,
)The above code is used to navigate from the current screen to the given screen
When the name of the page is static then it is accessed by the class name or the name of the state of the state full or the stateless widget .
import 'package:flutter/material.dart';
import 'package:flutter_navigator_1_0_practice/send_and_receive_data/send_receive_data_using_push_name/second_screen_using_push_name.dart';
class FirstScreenPushName extends StatefulWidget {
const FirstScreenPushName({super.key});
static const FIRST_PAGE = "/firstPage";
@override
State<FirstScreenPushName> createState() => _FirstScreenPushNameState();
}
late TextEditingController _textEditingController;
class _FirstScreenPushNameState extends State<FirstScreenPushName> {
@override
void initState() {
super.initState();
_textEditingController = TextEditingController();
}
@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}
void sendData() async {
Navigator.of(context).pushNamed(
SecondPagePushName.SECOND_PAGE,
);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(result)));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Screen Using Push Name"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("First Screen" ),
],
),
),
floatingActionButton: FloatingActionButton(onPressed: sendData),
);
}
}In the above code , On the click event of the floating action button i will simply navigate from the the first screen to the second screen using the push name method of the navigator
Now before moving forward or toward’s the next technique . Keep one thing in mind that the push name will only work’s in the situation if these below thing’s are added in the material app of the main page ( from where you app start’s running ) .
initialRoute: FirstScreenPushName.FIRST_PAGE,
routes: {
FirstScreenPushName.FIRST_PAGE: (context) => FirstScreenPushName(),
SecondPagePushName.SECOND_PAGE: (context) => SecondPagePushName()
},Now talk about the above code
i ) Routes :
Route are also known as the screen or the page’s . In android it is also known as the activities
The route property of the material app is used to initialized the all routes that are used in the app
The syntax of the declaration of the routes is simple
Page.pageName : (context) => Page();ii ) Initial Route :
The initial route property is used to set the page that would be displayed first or as the home page . Now the initial page is set so there is no need for the home property of the material app .
Now come toward’s the most advanced or the best recommended technique of the Navigator 1.0
On Generate Route :
The On generate route technique also use the push name technique but the only and the main difference between them is that instead of using or defining the routes in the material app it use the on generate route method of the material app
According to the official documentation
{Route<dynamic>? Function(RouteSettings)? onGenerateRoute}The route generator callback used when the app is navigated to a named route.
The on generate method or the property requires or input a function whose return data type is the Route of dynamic ( Route <dynamic> ) and it can take the route setting’s as a parameter’s .
Now let’s talks about on generate route in detail
Route <dynamic> :
The Route <dynamic> return data type mean’s that this function will return the route of any type like Material Page Route , Page Route builder etc. that are discussed above .
Route Settings :
The Route settings is a class that is used for the data that might be useful in constructing a Route.
Like you want’s to send data from one page to another .
Here you can set all of the routes and their animation if you want’s .
Route<dynamic> onGenerateRoute(RouteSettings settings) {
if (settings.name == OnGenerateRouteFirstPage.onGenerateRouteFirstPage) {
return MaterialPageRoute(
builder: (context) => OnGenerateRouteFirstPage(),
);
} else if (settings.name ==
OnGenerateRouteSecondPage.onGenerateRouteSecondPage) {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) =>
OnGenerateRouteSecondPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) =>
SlideTransition(
position: Tween<Offset>(begin: Offset(1, 0), end: Offset.zero)
.animate(animation),
child: child,
),
);
} else {
return MaterialPageRoute(
builder: (context) => OnGenerateRouteErrorPage(),
);
}
}The above code is the sample code for how to build the on generate route method of the material app .
Now here in the above code i have only 2 screen ( In the same way you can add multiple screen’s ) .
As you know before that the route setting’s contain’s the data that might be helpful in building the route .
The on generate method will be placed at the top of the widget the widget tree and it can be accessed using the inherited widget of by using the
Navigator.of(context)The settings. name will be matched by the page name’s of that specific page (static const unique page names) .
If none of the page will be matched in case of some exception’s then the error page will be displayed instead of the app crash or run time error .
The total code of the all screen’s is given below
The code of the main page
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
onGenerateRoute: onGenerateRoute,
initialRoute: OnGenerateRouteFirstPage.onGenerateRouteFirstPage,
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return MyFirstPageDesign();
}
}The code of the first Page
import 'package:flutter/material.dart';
import 'package:flutter_navigator_1_0_practice/send_and_receive_data/send_data_by_on_generate_route/second_on_generate_route_screen.dart';
class OnGenerateRouteFirstPage extends StatefulWidget {
const OnGenerateRouteFirstPage({super.key});
static const onGenerateRouteFirstPage = "/ongenerateroutefirstpage";
@override
State<OnGenerateRouteFirstPage> createState() =>
_OnGenerateRouteFirstPageState();
}
class _OnGenerateRouteFirstPageState extends State<OnGenerateRouteFirstPage> {
void goToSecondPage() {
Navigator.of(context)
.pushNamed(OnGenerateRouteSecondPage.onGenerateRouteSecondPage);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("On Generate Route First page"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text("First Page")],
),
),
floatingActionButton: FloatingActionButton(onPressed: goToSecondPage),
);
}
}The code of the second page
import 'package:flutter/material.dart';
class OnGenerateRouteSecondPage extends StatefulWidget {
const OnGenerateRouteSecondPage({super.key});
static const onGenerateRouteSecondPage = "/ongenerateroutesecondpage";
@override
State<OnGenerateRouteSecondPage> createState() =>
_OnGenerateRouteSecondPageState();
}
class _OnGenerateRouteSecondPageState extends State<OnGenerateRouteSecondPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.purple,
appBar: AppBar(
title: Text("On Generate Route Second page"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
"Second Page",
style: TextStyle(color: Colors.orange, fontSize: 40),
)
],
),
),
);
}
}The code of the error page
import 'package:flutter/material.dart';
class OnGenerateRouteErrorPage extends StatefulWidget {
const OnGenerateRouteErrorPage({super.key});
static const onGenerateRouteErrorPage = "ongeneraterouteerroepage";
@override
State<OnGenerateRouteErrorPage> createState() =>
_OnGenerateRouteErrorPageState();
}
class _OnGenerateRouteErrorPageState extends State<OnGenerateRouteErrorPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("On Generate Route Error Page"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text("Oops 404 !! No page Found")],
),
),
);
}
}The code for the on generate route
Route<dynamic> onGenerateRoute(RouteSettings settings) {
if (settings.name == OnGenerateRouteFirstPage.onGenerateRouteFirstPage) {
return MaterialPageRoute(
settings: settings,
builder: (context) => OnGenerateRouteFirstPage(),
);
} else if (settings.name ==
OnGenerateRouteSecondPage.onGenerateRouteSecondPage) {
return PageRouteBuilder(
settings: settings,
pageBuilder: (context, animation, secondaryAnimation) =>
OnGenerateRouteSecondPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) =>
SlideTransition(
position: Tween<Offset>(begin: Offset(1, 0), end: Offset.zero)
.animate(animation),
child: child,
),
);
} else {
return MaterialPageRoute(
settings: settings,
builder: (context) => OnGenerateRouteErrorPage(),
);
}
}
That’s all for the technique of now to navigate from one screen to another
Now let’s move toward’s how to send data from one screen to another while navigation
Send Data :
There are a lot of way’s to send data from one screen to another
The most basic way to send data from one screen to another is given below
i ) Required In Constructor :
class SecondScreen extends StatefulWidget {
final String data;
const SecondScreen({super.key, required this.data});
@override
State<SecondScreen> createState() => _SecondScreenState();
}In the above code if i want’s the data that would come from the previous screen and used in the current screen or the given screen then i will required in constructor or make it it compulsory for the programmer to add the data when the user call’s the constructor of that class or state less or state full widget
Now you will be able to use this data anywhere you want’s in that specific class or stateless / state full widget .
ii ) Argument’s :
Another way to send data from one screen to another is to send it by argument when using the push name method
arguments: "Send data Successfully"The argument is used to send data of any type , The argument is the object or the dynamic type that keep all type of data you want . If you want’ to send more then one type of data or multiple data then you should make a model class and pass a model class in it .
Navigator.of(context).pushNamed(
SecondPagePushName.SECOND_PAGE,
arguments: "Send Send Successfully")In this way you are able to send data while navigating
iii ) Settings :
You can also send data using the route settings from one page to another
settings: RouteSettings(arguments: "Data Send using route settings")The setting’s of the route settings is the property of the material page route and page route builder
In this way you can also send data
Navigator.of(context).push(
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) =>
SecondScreenData(),
transitionsBuilder: (context, animation, secondaryAnimation, child) =>
ScaleTransition(
scale: animation,
child: child,
),
settings: RouteSettings(arguments: "Data Send using route settings")));Now that’s all for how to send data from one screen to another now let’s move toward’s .
Receive Data :
There are a lot of way’s to fetch the data or to use the fetched data
i ) Required in Stateless / State full widget :
When you send the data from one screen to another using the required parameter’s in the constructor’s
a ) Stateless Widget :
If the data is fetched by required parameter’s of the stateless widget then you would simply use it any where you want
class SecondScreen extends StatelessWidget {
final String data;
const SecondScreen({super.key, required this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen Data"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [Text(data.toString())],
),
),
);
}
}This is the very simple way’s to use the data that comes from the required parameter’s of the
b ) State full Widget :
If the data is fetched by required parameter’s of the state full widget then you would use it any where you want by using the ( widget . parameter name )
import 'package:flutter/material.dart';
class SecondScreen extends StatefulWidget {
final String data;
const SecondScreen({super.key, required this.data});
@override
State<SecondScreen> createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen Data"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [Text(widget.data.toString())],
),
),
);
}
}The above way is used to use the data that that comes from the required parameter’s of the state full widget
ii ) Argument’s :
Now move toward’’s that case when the data is send from the argument’s using the push name
String fetchedData = ModalRoute.of(context)!.settings.arguments as String;Now to fetch this type of data you have to use the modal route class and access it’s setting and then argument’s where your data is placed then must type cast the data to it’s data type in which it is send .
Like in the above code i send the data in string here i can fetched it as a string and use it any where i want’s
Text(fetchedData)Now let’s talk about modal route in detail
According to the official documentation
A route that blocks interaction with previous routes.
ModalRoutes cover the entire Navigator. They are not necessarily opaque, however; for example, a pop-up menu uses a ModalRoute but only shows the menu in a small box overlapping the previous route.
The T type argument is the return value of the route. If there is no return value, consider using void as the return value.
The modal route is placed at the top of the widget tree and can be accessed with the help of the inherited widget
iii ) Settings :
If the data is send by the setting’s property of the page route builder or material page route then it can also be accessed in the above same way as the data accessed by modal route which is send by the argument’s .
String fetchedData = ModalRoute.of(context)!.settings.arguments as String;Now that’s all for how to send and receive the data now we should move toward’s how to send the data back
Data Send Back :
If you want’s to send the data back then pass it simply in the pop method of the navigator when you move backward’s or move to the previous page or route on the stack of routes .
Navigator.of(context).pop("Data Send Back Successfully");That’s all for how to send the data back now move toward’s how to receive that data.
Receive Back Data :
The data which is send back toward’s the previous screen can be fetched with the help of the asynchronous function by using the await
await keyword is sued in asynchronous programming where you want’s to wait for the result that would be completed in the future
For more information kindly visit the official documentation
void sendDataAndThenReceiveDataBack() async {
String result = await Navigator.of(context).pushNamed(
SecondPagePushName.SECOND_PAGE,
arguments: "Send Send Successfully") as String;
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(result)));
}When the user send the data back from second page to the previous page then it will be received here because the await is waiting for that data . When the data is received it will be used like i use in the snack bar
In the above code i send the data from first screen and display it on second and send data back from second screen and display it on the first scree using push name
Here below is the complete code of all of the pages
Main Page Code :
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
FirstScreenPushName.FIRST_PAGE: (context) => FirstScreenPushName(),
SecondPagePushName.SECOND_PAGE: (context) => SecondPagePushName()
},
initialRoute: FirstScreenPushName.FIRST_PAGE,
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
);
}
}First page Code :
import 'package:flutter/material.dart';
import 'package:flutter_navigator_1_0_practice/send_and_receive_data/send_receive_data_using_push_name/second_screen_using_push_name.dart';
class FirstScreenPushName extends StatefulWidget {
const FirstScreenPushName({super.key});
static const FIRST_PAGE = "/firstPage";
@override
State<FirstScreenPushName> createState() => _FirstScreenPushNameState();
}
late TextEditingController _textEditingController;
class _FirstScreenPushNameState extends State<FirstScreenPushName> {
@override
void initState() {
super.initState();
_textEditingController = TextEditingController();
}
@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}
String result = "";
void sendDataAndThenReceiveDataBack() async {
result = await Navigator.of(context).pushNamed(
SecondPagePushName.SECOND_PAGE,
arguments: _textEditingController.text) as String;
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(result)));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.teal,
appBar: AppBar(
title: Text("First Screen Using Push Name"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 500,
child: TextField(
controller: _textEditingController,
decoration: InputDecoration(
hintText: "Enter the data", border: OutlineInputBorder()),
),
),
Text(result)
],
),
),
floatingActionButton:
FloatingActionButton(onPressed: sendDataAndThenReceiveDataBack),
);
}
}Second Page Code :
import 'package:flutter/material.dart';
class SecondPagePushName extends StatefulWidget {
const SecondPagePushName({super.key});
static const SECOND_PAGE = "/secondPage";
@override
State<SecondPagePushName> createState() => _SecondPagePushNameState();
}
late TextEditingController _textEditingController;
class _SecondPagePushNameState extends State<SecondPagePushName> {
@override
void initState() {
super.initState();
_textEditingController = TextEditingController();
}
@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}
void sendDataBack() {
Navigator.of(context).pop(_textEditingController.text);
}
@override
Widget build(BuildContext context) {
String fetchedData = ModalRoute.of(context)!.settings.arguments as String;
return Scaffold(
backgroundColor: Colors.brown,
appBar: AppBar(
title: Text("Second Page Using Push Name"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 500,
child: TextField(
controller: _textEditingController,
decoration: InputDecoration(
hintText: "Enter the data", border: OutlineInputBorder()),
),
),
SizedBox(
height: 40,
),
Text(fetchedData)
],
),
),
floatingActionButton: FloatingActionButton(onPressed: sendDataBack),
);
}
}That’s all for the flutter navigator 1.0
The complete code of navigator 1.0 is placed at my github link in given below
I hope you learned a lot of new thing’s
Thanks for reading 😊
