Navigation in Flutter

223

Most of the app contains multiple screen for displaying different kinds of information. In order to move from one screen to another navigation is used . To move from one screen to another push navigation is used whereas to return back pop navigation is used. Navigation is the most significant part in the application.

In this tutorial, we will discuss about how to navigate to another screen and return back to that screen.

How to navigate to a new screen and return back?

Step 1: Creates two routes

Here we will create two screens to perform navigation between multiple screens.

first_screen.dart

import 'package:flutter/material.dart';
import 'package:flutterhopeprojects/Views/second_screen.dart';

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("First Screen"),
        centerTitle: true,
        elevation: 0,
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              "This is the first Screen",
              style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w800),
            ),
            const SizedBox(
              height: 20.0,
            ),
            OutlinedButton(
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (_) => const SecondScreen()));
                },
                child: const Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text("First Screen"),
                )),
          ],
        ),
      ),
    );
  }
}

second_screen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("First Screen"),
        centerTitle: true,
        elevation: 0,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Text(
              "This is the Second Screen",
              style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w800),
            ),
            const SizedBox(height: 20.0),
            OutlinedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text("Second Screen"),
                )),
          ],
        ),
      ),
    );
  }
}

Step 2: Navigate to second route using navigator.push()

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

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

 Navigator.pop(context);

Output:

When we clicked on first screen button then it navigate to the second screen as shown below:

Again, if we clicked second screen button it again navigate(pop) to first screen.

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/Navigation

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Leave A Reply

Your email address will not be published.