How to navigate to a new screen in flutter?

• Flutter
• Flutter Widget Guide

The navigation system is one of the most important in any mobile app development framework. In this, users can migrate from one screen to another. So, in this article, we will see how to navigate to a new screen in a flutter.

How to navigate to a new screen in flutter?

Let’s consider shopping application. It contains a number of images of the products you searched for. When you click on the product image it takes you to a new screen displaying product information. That is an example of screen navigation. Routes refer to the screen and pages in Flutter. The route is similar to Activity in Android and it is similar to ViewController in iOS. And as we mentioned earlier a route is just a widget in Flutter.

The Navigator is used to navigate from one screen to another in Flutter. Moreover, we will discuss how to navigate between two routes using the below steps:

1. Create two routes.
2. Navigate to the second route using Navigator.push().
3. Return to the first route using Navigator.pop().

Create two routes:

You need to create two routes to be used. Assign one button to each route. You can also add multiple buttons, it totally depends on the user how many buttons they want to add. On tapping, the button on the first route will navigate you to the second route. And tapping on the second route button will navigate you to the second one.

Navigate to the second route/screen using Navigator.push();

Now let’s say you want to switch to a new route. You will need to use the Navigator.push() method. The push() method will add a Route to the stack of routes managed by the Navigator. Also, you can create your own route, or you can use a MaterialPageRoute. 

Return to the first route using Navigator.pop():

However, after performing the above two steps the question is how to close the second route to return to the first. You can use Navigator.pop() method. This method removes the current Route from the stack of routes managed by the Navigator.

Below is the full code in which route push/pop is implemented:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Routes',
routes: {
'/login': (BuildContext context) => Login(),
// add another route here
// '/register': (BuildContext context) => Register(),
},
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Routes'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
// This gives the back button:
Navigator.of(context).pushNamed('/login');

// This doesn't give the back button (it replaces)
//Navigator.pushReplacementNamed(context, '/login');
},
child: Text('Login'),
),
],
),
),
);
}
}

class Login extends StatefulWidget {
@override
_LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Page'),
),
body: Center(
child: RaisedButton(
onPressed: () {
// This will only work for pushNamed
Navigator.of(context).pop();
},
child: Text('Go back'),
),
));
}
}

Conclusion:

So, in this article, We have been through how to navigate to a new screen in a flutter.

So, Keep Learning! Keep Fluttering! Still, need Support for Flutter Development? Do let us know your requirements and we will assist you. We have team of expert Flutter developers who will make sure that your project is perfectly delivered.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.