Flutter Navigation with named routes Example

Flutter Navigate with named routes:

In this example we are navigating between the screens using named routes for navigation. To work with named routes, we can use the Navigator.pushNamed function. This example will replicate the functionality from the original things, below we are demonstrating how to use named routes instead.

Using Named routes for Navigatio in Flutter App:

  • Create two screens
  • Define the routes
  • Navigate to the second screen using Navigator.pushNamed
  • Return to the first screen using Navigator.pop

Create two screens for Navigation:

 

Here we  need two screens to work with. The first screen will contain a button that navigates to the second screen. The second screen will contain a button that navigates back to the first. Below is the sample code to create  two screens

class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: RaisedButton(
child: Text('Launch screen'),
onPressed: () {
// Navigate to second screen when tapped!
},
),
),
);
}
}

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
onPressed: () {
// Navigate back to first screen when tapped!
},
child: Text('Go back!'),
),
),
);
}
}

Define the routes for Naviagtion in Flutter App:

 

Now here we are  defining our routes by providing additional properties to the MaterialApp constructor: the initialRoute and the routes themselves.

The initialRoute property defines which route our app should follow when it start with. The routes property defines the available named routes and the Widgets that should be built when we navigate to those routes.

MaterialApp(
// Start the app with the "/" named route. In our case, the app will start
// on the FirstScreen Widget
initialRoute: '/',
routes: {
// When we navigate to the "/" route, build the FirstScreen Widget
'/': (context) => FirstScreen(),
// When we navigate to the "/second" route, build the SecondScreen Widget
'/second': (context) => SecondScreen(),
},
);

Navigating to the second screen in Flutter App:

we will use the Navigator.pushNamedfunction. This tells Flutter to build the Widget defined in our routes table and launch the screen.

In the build method of our FirstScreen Widget, we will update the onPressed callback method:

// Within the `FirstScreen` Widget
onPressed: () {
// Navigate to the second screen using a named route
Navigator.pushNamed(context, '/second');
}

Return to the first screen from second screen in Flutter App:

To navigate back to the first page from second page screen, we can use the Navigator.pop function.

// Within the SecondScreen Widget
onPressed: () {
// Navigate back to the first screen by popping the current route
// off the stack
Navigator.pop(context);
}

Below is the complete example code for Flutter Navigation with named routes:

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: 'Named Routes Demo',
// Start the app with the "/" named route. In our case, the app will start
// on the FirstScreen Widget
initialRoute: '/',
routes: {
// When we navigate to the "/" route, build the FirstScreen Widget
'/': (context) => FirstScreen(),
// When we navigate to the "/second" route, build the SecondScreen Widget
'/second': (context) => SecondScreen(),
},
));
}

class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: RaisedButton(
child: Text('Launch screen'),
onPressed: () {
// Navigate to the second screen using a named route
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
onPressed: () {
// Navigate back to the first screen by popping the current route
// off the stack
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}

Congratulations You Have Learned Flutter Navigation with named routes…!!!

If It Is Useful Share It With Your Friends….!!!

If  You Have Any Query Please make A Comment….!!!

Leave a Reply

Categories

Myles [CPS] IN
Shein WW