Day 25 | Flutter 路由管理套件 - auto_route

Navigator 1.0

Flutter 有内建一个路由管理 API Navigator ，而Flutter也在今年发表了 Navigator 2.0 但因为工作上是使用 fluro 这个路由管理套件，所以就没特别研究了 Navigator 2.0，只能大概说明一下 Navigator 1.0

用起来算是很简单，我们可以直接用 Navigator.push 里面会就放我们要打开的新页面。

Navigator.push( 
      context,
      MaterialPageRoute(builder: (context) {
        return NewRoute();
      }),
    );

但为了方便管理通常都会使用命名路由的方式，然後将原本的 home: 换成 '/': (context) => const MyHomePage()

 MaterialApp(
      routes: {
        '/': (context) => const MyHomePage(),
        'users_list': (context) => const UsersListPage(),
      },
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );

如果要到另外一个页面就是使用 Navigator.pushNamed

Navigator.pushNamed(context, 'users_list');

但对於一些动态路由或者需要传参数的页面就会有点麻烦，所以大部分都会使用路由管理套件，虽然工作上是使用 fluro但架设起来也是有点庞大，所以就决定试玩一下另外一个套件 auto_route

auto_route

dependencies:
	auto_route: ^2.4.2
dev_dependencies:
	auto_route_generator: ^2.4.1

先建立另外一个档案 router.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter_rest_api_playground/view/users/users_detail_page.dart';
import 'package:flutter_rest_api_playground/view/users/users_list_page.dart';

import '../main.dart';

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: MyHomePage, path: '/', initial: true),
    AutoRoute(page: UsersListPage, path: '/users'),
    AutoRoute(page: UserDetailPage, path: '/user/:id'),
  ],
)
class $AppRouter {}

注册路由就是会用 AutoRoute 里面页面以及路由，首页的话就加上 initial: true ，而如果需要动态路由就可以 : 来标示，整体看起来跟网页很像。

replaceInRouteName 则是将我们的所注册的页面输出成另外一个名字避免混淆，这样让我们 push 时就会是使用 UsersListRoute 而不是 UsersListPage 。

因为auto_run会需要使用 codegen 所以一样要跑 build_runner。

使用时就将 MaterialApp 改为 MaterialApp.router ，然後实例化 AppRouter

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: AutoRouterDelegate(_appRouter),
      routeInformationParser: _appRouter.defaultRouteParser(),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
	}
}

要导转页面时也算蛮简单的：

AutoRouter.of(context).pushNamed('/users');

AutoRouter.of(context).push(UsersListRoute());

可以选择要直接使用注册的 path 或者是 codegen出来的 xxxxxRoute

而需要接收参数的页面的宣告也很直观

class UserDetailPage extends StatefulWidget {
  const UserDetailPage({Key? key, @PathParam('id') required this.userId})
      : super(key: key);
  final String userId;
  @override
  State<UserDetailPage> createState() => _UserDetailPageState();
}

加上 @PathParam 即可， () 放我们在注册时的 : 的命名，所以以这个例子来说就是使用

@PathParam('id') 并把传给 userId

使用上就直接在字串中加入我们的变数或者使用 UserDetailRoute 里面传参数

AutoRouter.of(context).pushNamed('/user/${userInfo.id}');
AutoRouter.of(context).push(UserDetailRoute(userId: userInfo.id.toString()));

写到今天突然发现好像快没有东西可以写了， 明天可能会试着玩玩其他状态管理框架。

今天的程序码：
https://github.com/zxc469469/flutter_rest_api_playground/tree/Day25

参考资料：

1. https://book.flutterchina.club/chapter2/flutter_router.html#_2-4-1-一个简单示例