Flutter Route and Navigation Example

Hello Friends,

Here, I will show you how to work the flutter route and navigation example. In this article, we will implement a navigate to a new screen and back in a flutter. We will use how to add a routing with navigation in a flutter. In this article, we will implement navigation with named routes in a flutter.

Flutter has an imperative routing mechanism, the Navigator widget, and a more idiomatic declarative routing mechanism the Router widget. which is similar to build methods used with widgets.

Step 1: Create Flutter Project

Follow along with the setup, you will be creating a Flutter app.

- $flutter create flutter_route_&_navigation_example

Navigate to the project directory:

- $cd flutter_route_&_navigation_example

Step 2: Main File

Create a main.dart file in the lib directory

import 'package:flutter/material.dart';
void main() {
  	runApp(const MaterialApp(
    	home: HomeRoute(),
  	));
}
class HomeRoute extends StatelessWidget {
  	const HomeRoute({Key? key}) : super(key: key);
  	@override
  	Widget build(BuildContext context) {
    	return Scaffold(
      		appBar: AppBar(
        		title: const Text('Route & Navigation'),
        		backgroundColor: Colors.blue,
      		),
      		body: Center(
        		child: ElevatedButton(
            		child: const Text('Click Here!'),
            		onPressed: () {
              			Navigator.push(
                			context,
                			MaterialPageRoute(builder: (context) => const SecondRoute()),
              			);
            		}
            	    ),
      		),
    	    );
  	}
}
class SecondRoute extends StatelessWidget {
  	const SecondRoute({Key? key}) : super(key: key);
  	@override
  	Widget build(BuildContext context) {
	    return Scaffold(
      		appBar: AppBar(
        		title: const Text("Click Here Page"),
        		backgroundColor: Colors.blue,
      		),
      		body: Center(
        		child: ElevatedButton(
          			onPressed: () {
            			Navigator.pop(context);
          			},
          			child: const Text('Go to Home!'),
        		),
      		),
    	    );
  	}
}

Step 3: Run this Debug App