**Course Title:** Flutter Development: Build Beautiful Mobile Apps **Section Title:** Navigation and Routing **Topic:** Using Flutter's Navigator 2.0 for declarative routing **Introduction** In the previous topics, we covered the basics of Flutter navigation using the `Navigator` class. However, with the introduction of Flutter's Navigator 2.0, we can now use a declarative approach to define our routes, making our code more concise and easier to maintain. In this topic, we will explore how to use Flutter's Navigator 2.0 for declarative routing. **What is Declarative Routing?** Declarative routing is a programming paradigm that focuses on defining what the application should look like, rather than how it should look like. In Flutter, we can use the `Navigator` class to define our routes in a declarative way, using the `MaterialPageRoute` and `MaterialPageRouteBuilder` classes. **Defining Routes with Navigator 2.0** To use Flutter's Navigator 2.0 for declarative routing, we need to define our routes using the `MaterialPageRoute` and `MaterialPageRouteBuilder` classes. We can do this by creating a `MaterialPageRoute` object and passing it to the `Navigator` class. Here is an example of how to define a route using the `MaterialPageRoute` class: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Page'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => MySecondPage()), ); }, child: Text('Go to Second Page'), ), ), ); } } class MySecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Second Page'), ), body: Center( child: Text('This is the second page'), ), ); } } ``` In this example, we define two routes: `MyHomePage` and `MySecondPage`. We use the `MaterialPageRoute` class to define the route from `MyHomePage` to `MySecondPage`. **Using MaterialPageRouteBuilder** We can also use the `MaterialPageRouteBuilder` class to define our routes in a declarative way. The `MaterialPageRouteBuilder` class takes a function that returns a `Widget` and uses it to build the route. Here is an example of how to use `MaterialPageRouteBuilder` to define a route: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Page'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRouteBuilder( builder: (context) => MySecondPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition(opacity: animation, child: child); }, ), ); }, child: Text('Go to Second Page'), ), ), ); } } class MySecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Second Page'), ), body: Center( child: Text('This is the second page'), ), ); } } ``` In this example, we use the `MaterialPageRouteBuilder` class to define the route from `MyHomePage` to `MySecondPage`. We also use the `transitionsBuilder` function to define the transition effect for the route. **Key Concepts** * Declarative routing is a programming paradigm that focuses on defining what the application should look like, rather than how it should look like. * Flutter's Navigator 2.0 provides a declarative way to define routes using the `MaterialPageRoute` and `MaterialPageRouteBuilder` classes. * We can use the `MaterialPageRoute` class to define a route from one screen to another. * We can use the `MaterialPageRouteBuilder` class to define a route in a declarative way, using a function that returns a `Widget`. **Practical Takeaways** * Use Flutter's Navigator 2.0 for declarative routing to make your code more concise and easier to maintain. * Use the `MaterialPageRoute` class to define a route from one screen to another. * Use the `MaterialPageRouteBuilder` class to define a route in a declarative way, using a function that returns a `Widget`. * Use the `transitionsBuilder` function to define the transition effect for a route. **Exercise** * Create a new Flutter project and define two routes: `Home Page` and `About Page`. * Use the `MaterialPageRoute` class to define the route from `Home Page` to `About Page`. * Use the `MaterialPageRouteBuilder` class to define the route from `Home Page` to `About Page` in a declarative way. **Comment or Ask for Help** Please leave a comment or ask for help if you have any questions or need further clarification on any of the concepts covered in this topic.