In this Tutorial, lest See How to implement Navigation and Routing in flutter app. Mobile Apps need a Navigation Widget for Moving Or Passing Between to two Screens. and It’s One of Important Functionality every Developer Need. Most Apps have Navigation Back Botton on top of their Screen or Page in order to show their history. Navigation can happen transition from one page to another with the help of Moving widget around it.

Routing is a Most Basic thing and your app Must Have a Routing to do handle Multiple screens but Sometimes Navigate Between Pages get too Complex quickly. Routing has Multiple options but cannot Provide facility to Passing Some important Data Between Routes which is really necessary once you get into massive Projects.

what exactly Routes in a flutter?

The route is a Way for Moving from One Page to Another page in Mobile Terminology, In cross-development Platform like flutter Handled By Navigator widget. Most Apps has a Several of Screen for showing different types of Data in it. On the Android side, a route is an Activity. On iOS Side routes are a viewController.

Let’s See How to implement Navigation and Routing in flutter app

#Navigator.push()

If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.

We need to Create a Simple main.dart file to contain our MyHomePage widget

import 'package:flutter/material.dart';

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

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

The MyHomePage the widget will contain  Raised Button with an Onpressed property and OnPressed button will have Navigation Widget that helps us Navigate Between. Navigaor.push() method add a new route like Stack of routes which is Handle By Navigator. you can Even Specify Platform-specific transition Animation for new routes.

//FirstScreen

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Navigate To Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => 
                  SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

Above code is a snippet of Navigator.push() method

#Navigator.pop()

If you want to Close Previous Route and get back to First Place then you will need Navigator.pop() method as a name suggests pop remove Current Stack the most recently added. Let see how to implement Navigator.pop() method

//Second Screen

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Navigate back to FirstScreen'),
        ),
      ),
    );
  }
}

#Navigate Between Routes With Help of Named Routes

Navigation gets Complex with Big Projects and also result in Code Duplication, the Problem can be solved with the help of Naming routes. Previously we implement Navigator.pop() method and in this Naming routes, we are going to Implement Navigator.PushNamed() method.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.deepPurple,
        ),
        home: FirstScreen(),
        routes: <String, WidgetBuilder>{
          '/secondscreen': (BuildContext context) => 
                SecondScreen(),
        });
  }
}

//First Screen
class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigation and Routing Example'),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.deepPurple,
          child: Text(
            'Navigate To Second Screen',
            style: TextStyle(color: Colors.white),
          ),
          onPressed: () {
            Navigator.pushNamed(context, '/secondscreen');
          },
        ),
      ),
    );
  }
}

//Second Screen
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text(
              'Back To HomeScreen',
              style: TextStyle(color: Colors.white),
            ),
            color: Theme.of(context).primaryColor,
            textColor: Colors.white,
            onPressed: () => Navigator.pop(context)),
      ),
    );
  }
}
Navigation and routing

Navigation and routing

You can see the full source code of the project here.

View on github

🤝 Show Some Support

If you liked the app, show some love Here  ⭐️

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything in the video, leave me a comment and I’ll do my best to answer it.