Flutter Navigation Example

Flutter Navigation to a new screen and back:

 

In most of the times we opens  several screens for displaying different types of information. For example, we might have a screen that shows products list. Our users could then tap on a single product to get more information about it on a new screen.

In Android we call them as  new Activities. In iOS terms we call it as, new ViewControllers. In Flutter terms we call them, screens are just Widgets!

 

Using Navigation’s in Flutter:

 

  • Create two screens
  • Navigate to the second screen using Navigator.push
  • Return to the first screen using Navigator.pop

 

Create two screens:

This is a simple basic example, we’ll create two screens, each having a single button. Tapping the button on the first screen will navigate to the second screen. Tapping the button on the second screen will return our user back to the first screen!

Below is the sample code to create two simple 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!'),
),
),
);
}
}

Navigate to the second screen using Navigator.push:

 

If we want to Navigate to a new screen, we’ll need to use the Navigator.push method. The push method will add a Route to the stack of routes managed by the Navigator!

The push method requires a Route,  We can create our own, or use the MaterialPageRoute out of the box. The MaterialPageRoute is handy because it transitions to the new screen using a platform-specific animation.

// Within the `FirstScreen` Widget
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
}

Return to the first screen using Navigator.pop:

 

On our second screen, how do we close it out and return to the first? Using the Navigator.popmethod! The pop method will remove the current Route from the stack of routes managed by the navigator.

// Within the SecondScreen Widget
onPressed: () {
Navigator.pop(context);
}

Below is the complete Example of Navigator to Navigate  between Screens:

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: FirstScreen(),
));
}

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: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
),
),
);
}
}

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}

Congratulations You Have  Learned Using Navigation Between In Flutter App…!!!

 

If it is Useful Share It With Your Friends….!!!

 

If You Have Any Query Please Make A Comment on It…!!!

Leave a Reply

Categories

Myles [CPS] IN
Shein WW