Greetings from Cambodia on this beautiful day of the Water Festival holiday! As a developer and team leader, I always have my laptop with me. Today, I'm excited to share some knowledge with the Flutter community once again.

In this post, I'll demonstrate how to implement a simple, type-safe navigation system in your Flutter applications. Let's dive in.

Introduction to auto_route

auto_route is a powerful navigation library that simplifies routing and ensures type safety. Unlike go_router, it offers a more straightforward setup for navigation and authentication. While auto_route has many features to explore, this guide will focus on getting you up and running with the basics.

Setting Up Dependencies

To use auto_route, you need to add two dependencies to your project:

• auto_route: The core library.
• auto_route_generator: A code generator that requires build_runner to function.

Add the following to your pubspec.yaml file:

yaml
dependencies:
  auto_route: ^latest-version

dev_dependencies:
  auto_route_generator: ^latest-version
  build_runner: ^latest-version

After adding the dependencies, run flutter pub get to install them.

Implementation

With the dependencies set up, it's time to configure the router.

First, create a file named app_router.dart in your lib directory. This file will house all your navigation paths.

dart
/// lib/app_router.dart

import 'package:auto_route/auto_route.dart';

@AutoRouterConfig()
class AppRouter extends RootStackRouter {
  @override
  List get routes => [];
}

Next, integrate the router into your main application file.

dart
/// lib/main.dart

import 'package:flutter/material.dart';
import './app_router.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _appRouter.config(),
    );
  }
}

Now, let's create the initial screen for our application. Annotate it with @RoutePage, which auto_route uses to generate the necessary navigation code.

dart
/// lib/home_page.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

@RoutePage()
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
    );
  }
}

After creating the home screen, run flutter pub run build_runner build to generate the routing code. Then, update lib/app_router.dart to include the new route.

dart
/// lib/app_router.dart

import 'package:auto_route/auto_route.dart';
import './app_router.gr.dart';

@AutoRouterConfig()
class AppRouter extends RootStackRouter {
  @override
  List get routes => [
    AutoRoute(
      page: HomeRoute.page,
      initial: true,
    ),
  ];
}

Now, when you run the app, the HomePage will be displayed as the initial screen.

To demonstrate type-safe navigation, let's create a second screen.

dart
/// lib/detail_page.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

@RoutePage()
class DetailPage extends StatelessWidget {
  final String name;

  DetailPage({required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Detail Page"),
      ),
      body: Center(
        child: Text("Hello, $name!"),
      ),
    );
  }
}

The DetailPage is also annotated with @RoutePage and includes a name parameter.

Run the generator command again and update app_router.dart with the new route.

dart
/// lib/app_router.dart

import 'package:auto_route/auto_route.dart';
import './app_router.gr.dart';

@AutoRouterConfig()
class AppRouter extends RootStackRouter {
  @override
  List get routes => [
    AutoRoute(
      page: HomeRoute.page,
      initial: true,
    ),
    AutoRoute(
      page: DetailRoute.page,
    ),
  ];
}

Finally, add a button to the HomePage to navigate to the DetailPage.

dart
/// lib/home_page.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import './app_router.gr.dart';

@RoutePage()
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.router.push(DetailRoute(name: "Sophoun"));
          },
          child: Text("Go to Detail Page"),
        ),
      ),
    );
  }
}

As you can see, auto_route provides a strongly-typed route that requires a name parameter to navigate to the DetailPage. You can use any data type as a parameter.

Conclusion

auto_route offers a rich set of features that can handle complex navigation scenarios with ease. To learn more, I encourage you to explore the official documentation.

Thank you for reading. I'll see you next time!