What is Flutter Navigation? Moreover, what is Flutter Navigator? Are they same? Or, they are different? Above all, the answer lies in a widget.
Although Route is a widget, still it actually represents a new screen. Or, a new page.
For example, we navigate to the second route with the help of Navigator.
However, we need to understand the context.
What is the context?
Moreover, why we need it?
Most apps use different screens. And, for that we need router widget.
What is a navigator and routes in Flutter?
To begin with, we’ll see how a navigator and routes work in Flutter.
Firstly, we want a simple example. So the beginners can understand. Moreover, a better flutter developer must understand how routes work.
Secondly, to keep it simple, we navigate from first screen to the second.
Further, we’ll learn how we can handle multiple routes. Above all, how we can pass data while navigating to a second page.
As we have said, route is a widget. Navigator is also another widget.
How do you deal with navigation in Flutter?
To deal with navigation we need a first page. Right?
As a result, we can move to the second page. And come back. Navigation deals with that.
Let us see our first chunk of code first:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => const HomePage(),
},
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: const Color(0xFF3EBACE),
backgroundColor: const Color(0xFFF3F5F7),
primarySwatch: Colors.indigo,
),
);
}
}
As we can see, the route widget takes us to the Home Page. However, it also carries the context.
Next, we need to go to the second page.
How Does Flutter Navigator work?
Therefore, our first page must have that mechanism.
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
),
body: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondPage()),
);
},
child: Container(
margin: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(10.0),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
bottomLeft: Radius.circular(15.0),
bottomRight: Radius.circular(15.0),
),
child: Image.network(
'https://sanjibsinha.com/wp-content/uploads/2021/07/Can-you-code-in-WordPress-How-do-I-learn-WordPress-coding-.jpg'),
),
),
),
);
}
}
The on tap method in the above code shows an exemplary behavior.
Why?
Because, it uses the Navigator widget push method. And after that, it passes the same context.
How Does Flutter Navigator push work?
If we run the app and take a look at the first page, we can use the Gesture Detector, we can now tap the image. And that takes us to the second page.
Although we’ve not used Navigator pop method in the second page, yet we can come back to the first page using the back button in the App Bar.
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: Center(
child: Container(
margin: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(10.0),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
bottomLeft: Radius.circular(15.0),
bottomRight: Radius.circular(15.0),
),
child: Image.network(
'https://sanjibsinha.com/wp-content/uploads/2021/06/What-is-toList-flutter-What-is-map-in-Dart-.jpg'),
),
),
),
);
}
}
Leave a Reply