Flutter navigate to new screen

In our previous tutorials from flutter category, we covered topics like installation, start a project in fullter and  button implementation. Here we will learn how to navigate to new screens in flutter if you have applications with multiple screens. We will implement an example project with two screens.

Steps

  1. Learn code for screen navigation in flutter
  2. Implement Screen 1
  3. Implement Screen 2

Learn code for screen navigation in flutter.

If you want to open a new screen from the existing, you can use the following code. The code can be placed in any action like button click. Considering ScreenOne is class name of first screen and ScreenTwo is the class name of second screen in the following code.

Navigator.push(
context,
MaterialPageRoute(builder: (context) => ScreenTwo()),
);

Simlarly if you want to go back to previous screen on a button click or any action you can use the below code.

Navigator.pop(context);

Implement Screen 1

Following is the full code of ScreenOne class. It will contain a button which can navigate to ScreenTwo on click.

class ScreenOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen One'),
),
body: Center(
child: RaisedButton(
child: Text('Open Screen Two'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ScreenTwo()),
);
},
color: Colors.green,
textColor: Colors.white,
),
),
);
}
}

Implement Screen 2

Following is the full code of ScreenTwo class. It will contain a button which can navigate back to ScreenOne on click.

class ScreenTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Two"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back to screen 1'),
color: Colors.red,
textColor: Colors.white,
),
),
);
}
}

The complete code of the dart file is given below which is used in main.dart file.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigate Screen',
    home: ScreenOne(),
    theme: ThemeData(
      primarySwatch: Colors.green,
    ),
  ));
}

class ScreenOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen One'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open Screen Two'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ScreenTwo()),
            );
          },
          color: Colors.green,
          textColor: Colors.white,
        ),
      ),
    );
  }
}

class ScreenTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Two"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back to screen 1'),
          color: Colors.red,
          textColor: Colors.white,
        ),
      ),
    );
  }
}

Now simply run the file you will get the above displayed output.

 

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *