Streamline Navigation in Your Flutter App with fluro and auto_route

Implementing advanced navigation in a Flutter app can be achieved by using packages like fluro and auto_route. These packages provide additional functionality for navigating between pages in a Flutter app, such as routing with dynamic parameters and transitions between pages.

fluro-

fluro is a routing library for Flutter that allows you to define dynamic routes with parameters and handle them easily. With fluro, you can define routes in a separate file, making it easy to manage and maintain your routes. It also provides an easy way to navigate to a new page and pass data to it, and to handle the return data when the user navigates back.

To use fluro in your app, you first need to add the package to your pubspec.yaml file:

 dependencies:
 fluro: ^1.6.3

Then you can define your routes in a separate file, for example, router.dart:

import 'package:fluro/fluro.dart';
import 'package:my_app/screens/home_screen.dart';
import 'package:my_app/screens/profile_screen.dart';

final router = Router();

void defineRoutes(Router router) {
  router.define('/', handler: Handler(
 handlerFunc: (BuildContext context, Map<String, dynamic> params){
       return HomeScreen();
      }
  ));

  router.define('/profile/:username', handler: Handler(
 handlerFunc: (BuildContext context, Map<String, dynamic> params){
        final String username = params['username'][0];
        return ProfileScreen(username: username);
      }
    ));
  }

In this example, we define two routes, one for the home screen and one for the profile screen. The profile screen route has a dynamic parameter :username, which we can use to navigate to the profile screen and pass the username to it.

To navigate to a new page, you can use the navigateTo function:

 router.navigateTo(context, '/profile/flutter');

auto_route:

auto_route is another navigation library for Flutter that provides a simple, easy-to-use and type-safe way of managing navigation. It allows you to define the navigation stack in one place, and it will generate the necessary code for you to navigate to a new page. It also provides an easy way to navigate to a new page and pass data to it, and to handle the return data when the user navigates back.

To use auto_route in your app, you first need to add the package to your pubspec.yaml file:

dependencies:
auto_route: ^2.1.0

Then you can define your routes in a separate file, for example, router.dart:

 import 'package:auto_route/auto_route.dart';
 import 'package:my_app/screens/home_screen.dart';
 import 'package:my_app/screens/profile_screen.dart';

 class Router {
  static const homeScreen = '/';
  static const profileScreen = '/profile';
 }

 extension on String {
  Route<dynamic> get asAutoRoute {
    switch (this) {
      case Router.homeScreen:
        return MaterialPageRoute<dynamic>(builder: (_) =>
            HomeScreen());
      case Router.profileScreen:
 return MaterialPageRoute<dynamic>(builder: () => ProfileScreen());
  default:
  return MaterialPageRoute<dynamic>(builder: () => HomeScreen());
    }
  }
 }

In this example, we define two routes, one for the home screen and one for the profile screen. The profile screen route doesn't have a dynamic parameter here, but you can easily add it by creating a class that holds the required data, and then using this class in the Route settings.

To navigate to a new page, you can use the ExtendedNavigator.of method:

  
  ExtendedNavigator.of(context).push(Router.profileScreen);

Both fluro and auto_route provide a simple and easy-to-use way of managing navigation in a Flutter app. They both allow you to define routes in a separate file, making it easy to manage and maintain your routes, they also provide an easy way to navigate to a new page and pass data to it, and handle the return data when the user navigates back.

Which one to choose depends on your personal preference and the needs of your project, but both are good options.