Press "Enter" to skip to content

Create and Move to a New Screen in Flutter

Majority of apps contain multiple screens for managing different activities. There should be a landing home screen and different many other screen for variety of purposes.
In this tutorial let’s learn how to create a new screen and how to move from a screen to another.

Creating a New Screen

Creating a screen is simple and every stateful or stateless widgets can be considered as a new screen or page.
Here two stateless widgets are created as two screens and both contain a button to navigate pages each other.

First Screen:

class FirstScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("First Screen"),
       ),
       body: RaisedButton(
         child: Text("Go to second page"),
         onPressed:() { 
                     // Screen navigation codes here
         },
       ),
     );
   }
}

Second Screen:

class SecondScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("Second Screen"),
       ),
       body: RaisedButton(
         child: Text("Go to First page"),
         onPressed:() {
             //Screen navigation or back screen codes here
         },
       ),
     );
   }
 }

How to navigate from a screen to another:

On first screen, button’s onPressed event navigates app control to second screen.

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

Where SecondScreen is the name of the second screen widget (may changes according your widgets names).

How to back to previous screen:

 Navigator.pop(context);

Here no need to specify previous screen name and above code is enough. As default there is a back button which navigates control to previous screen without any additional codes. If you want to jump to another screen, then use the page navigation code.

Create navigate move to another screen flutter

Let us include all these codes on our application program:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
 void main() => runApp(MyApp());
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {  
     return MaterialApp(
       home: FirstScreen(),
     );
   }
 }
 class FirstScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("First Screen"),
       ),
       body: RaisedButton(
         child: Text("Go to second page"),
         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: RaisedButton(
         child: Text("Go to First page"),
         onPressed:() {
           Navigator.pop(context);
         },
       ),
     );
   }
 }

In above code, additionally a stateless widget named ‘MyApp’ is added as a home MaterialApp widget, and it’s home sections calls ‘FirstScreen’ widget.

One Comment

  1. erjilopterin erjilopterin 21st May 2020

    You are a very bright individual!

Leave a Reply

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