1. AutoRoute Là Gì ?

  • Là một package hỗ trợ navigation.
  • Setup nó đơn giản với sự hỗ trợ của tool generate code.
  • Có hỗ trợ deep-linking

2. Cài Đặt

  • Bước 1: Khai báo package tại file pubspec.yaml như dưới đây :

    dependencies:                    
 auto_route: [latest-version]                    

dev_dependencies:                    
 auto_route_generator: [latest-version]                    
 build_runner: [latest-version]

  • Bước 2 : Tạo class AppRouter, class này là nơi khai báo các Route có trong App của bạn.

    • Thực hiện kế thừa class _$AppRouter. Lúc này bạn sẽ không tìm thấy class này, vì nó chưa được tạo, nó sẽ được tạo bởi lệnh, mình sẽ trình bày dưới đây.

      class AppRouter extends _$AppRouter

    • Gắn annotate @AutoRouterConfig cho class AppRouter. Bước này quan trọng, nếu bạn không gắn thì tool sẽ không biết để tạo code

      @AutoRouterConfig()
class AppRouter extends _$AppRouter {
...
}

    • Chỉ định nơi file code được tạo tự động

      part 'app_router.gr.dart';

@AutoRouterConfig()
class AppRouter extends _$AppRouter {
...
}

    • Thực hiện generate code, trong VSCode mở terminal vào paste lệnh sau :

      flutter packages pub run build_runner build

    • Lúc này bạn sẽ thấy một file mới có tên là app_router.gr.dart được tạo cùng folder với của file app_router.dart class _$AppRouter cũng đã được tạo. Tại class AppRouter nó bắt chúng ta override lại getter routes. Đây chính là nơi khai báo các Route trong App của bạn.

      @AutoRouterConfig()
class AppRouter extends _$AppRouter {
  @override
  List<AutoRoute> get routes => [];
}

  • Bước 3 : Tạo Route

    • Tạo một Widget như dưới đây, chúng ta chỉ định nó là một Page. Mình sẽ đặt tên nó là PageA

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

@RoutePage()
class PageA extends StatelessWidget {
  const PageA({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page A'),
      ),
      body: Container(
        color: Colors.blueGrey,
        child: const Center(
          child: Text(
            'This is Page A',
            style: TextStyle(
              fontSize: 24,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

    • Ở đoạn code trên, PageA được gắn annotate @RoutePage(). Đây là cách chỉ định rằng Widget PageA này một Page trong Auto_Route package.

    • Thực hiện lệnh generate code :

      flutter packages pub run build_runner build

    • Quay trở lại class AppRouter, chúng ta cần khai báo một AutoRoute như dưới đây. AutoRoute có nhiều thuộc tính, ở phần này chúng ta chỉ cần quan tâm đến các thuộc tính cơ bản dưới đây (initial, path, page)

      @AutoRouterConfig()
class AppRouter extends _$AppRouter {

  // Define the routes name
  static const String pageA = '/pageA';

  // Using factory contructor to desgin a singleton pattern for AppRouter
  static AppRouter? _instance;
  AppRouter._internal();
  factory AppRouter() {
    _instance ??= AppRouter._internal();
    return _instance!;
  }

  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          // Chỉ định này để xác định Page nào sẽ được 
          // cạy đầu tiên. Nếu không chỉ định sẽ bị lỗi
          initial: true,
          // Path : Chuỗi đại diện cho Route
          // Lúc push, có thể dùng chuỗi này. 
          path: PageA,
          // page : RouteA.page đối tượng này 
          // tool hỗ trợ generate cho chúng ta
          // nó nằm ở class _$AppRouter
          page: RouteA.page,
        ),
      ];

  • Bước 4 : Cấu hình Router cho App

    class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      // Pass the routerConfig from AppRouter
      routerConfig: AppRouter().config(),
    );
  }
}
DEMO

Bài viết dựa trên quá trình tự học tập, nếu có điều gì sát sót, mọi đóng góp là một điều tuyệt với với mình.