07-Sep-2022
.
Admin
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