Flutter Route and Navigation Example

Sep 07, 2022

.

Admin

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

I hope it can help you...

#Flutter