How to Navigate to New Page and Back in Flutter

In this example, we are going to show you how to open a new screen page and navigate back to the previous screen in Flutter. It is very important for apps to navigate to different pages on mobile apps.

class NewPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(title: Text("Next Page")),
         body: Container(
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(30),
            child: ElevatedButton(
               onPressed: (){
                  Navigator.pop(context);
               },
               child: Text("Go Back"),
            ),
         ),
     );
  }
}

This is the new page screen of the mobile app.

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
  return NewPage();
}));

This is the code to navigate to NewPage() screen class. You can use this code when you want to open a new page.

See this also for contextless navigation: How to Open New Page and Back without Context in Flutter

Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context){
  return NewPage();
}));

Here, we have navigated to the new screen and replaced the history with the current one.

Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (BuildContext context){
  return NewPage();
}), (r){
  return false;
});

Here, we have navigated to a new screen and cleared all the navigation history. This navigation is suitable for splash screens or login screens.

Navigator.pop(context);

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Home Page"),
            backgroundColor: Colors.orangeAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topCenter,
            child: Column(
              children: [

                 ElevatedButton(
                  onPressed: (){
                     Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
                        return NewPage();
                     }));
                  }, 
                  child: Text("Go to Next Page")
                ),

                ElevatedButton(
                  onPressed: (){
                     Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context){
                        return NewPage();
                     }));
                  }, 
                  child: Text("Go to Next Page and Clear Current History")
                ),

                ElevatedButton(
                  onPressed: (){
                     Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (BuildContext context){
                        return NewPage();
                     }), (r){
                       return false;
                     });
                  }, 
                  child: Text("Go to Next Page and Clear All History")
                )
            ],)
          )
       );
  }
}

class NewPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(title: Text("Next Page")),
         body: Container(
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(30),
            child: ElevatedButton(
               onPressed: (){
                  Navigator.pop(context);
               },
               child: Text("Go Back"),
            ),
         ),
     );
  }
}