Flutter – How to navigate a new screen and back

Hi developer in this Flutter Tutorial, I am sharing how to navigate a new screen and back using flutter. In Android, our screen would have a new Activities. In iOS, we have called new ViewControllers. and In Flutter, screens are just Widgets!. So here I am explaining an easy way to in flutter how to navigate a new screen and back.

Screen navigation is the key part of the UI/UX for any Application. due to multiple functionality to navigate to screen A to screen B. and manage all screen to navigation.Flutter Navigation Example Tutorial.

Step: 1 Create a Flutter Project using Android Studio.

Let’s Start on these tutorial first of you can create a flutter project using android studio. If you do not know how to create a brand new flutter project, then please check out. Creating Simple Flutter Application in Android Studio.

Step: 2 Create Two dart files HomeScreen and SecondScreen.

Now, create one folder inside thelibfolder called simple_navigationand create two screens inside that folder.

1. HomeScreen.dart
2. SecondScreen.dart

after complete, this step open you HomeScreen.dart file and add these code.

Step: 3 Add this code in HomeScreen.dart file.

On the home screen create a button on click on button go to the second screen. In Flutter, these elements are called routers, and they’re managed by a Navigator widget. The navigator leads a stack of Route objects and provides methods for controlling the stack, like Navigator.push and Navigator.pop.

import 'package:flutter/material.dart';
import './SecondScreen.dart';

class HomeScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
          child: RaisedButton(
              child: Text('Go to Second Screen'),
              color: Theme.of(context).primaryColor,
              textColor: Colors.white,
              onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) => SecondScreen(),
                  )))),
    );
  }
}

Step:4 SecondScreen.dart file source code.

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('Back To HomeScreen'),
            color: Theme.of(context).primaryColor,
            textColor: Colors.white,
            onPressed: () => Navigator.pop(context)
        ),
      ),
    );
  }
}

Step: 5 Main.dart file source code.

import "package:flutter/material.dart";
import './app_example/home_widget.dart';
import './simple_navigation/HomeScreen.dart';



void main() => runApp(MyApp());

//class App extends StatelessWidget {
//  @override
//  Widget build(BuildContext context) {
//    return MaterialApp(
//      title: 'My Flutter App',
//      home: Home(),
//    );
//  }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.blue), home: HomeScreen());
  }
}

after complete, this step run your application if your application and check you flutter navigation example.