Flutter 新闻客户端 - 08 路由管理 auto_route

B站视频

https://www.bilibili.com/video/BV1xf4y1S7Xq

本节目标

• 安装插件
• 路由定义
• 自动生成路由控制类
• 转场动画
• 登录检查中间件
• 带参数传递
• 获取返回值

正文

一些优秀的路由插件

• fluro

  前端的使用体验

  router.navigateTo(context, “/users/1234”, transition: TransitionType.fadeIn);

• flutter_modular

  功能强大的路由管理：中间件、懒加载、状态管理、动态路由、分组路由、动画、返回值、命名路由

• auto_route

  设计精简、低耦合其它功能

  功能：中间件、自动生成路由代码、动态路由、动画、返回值、命名路由

安装插件

• 官网

https://pub.flutter-io.cn/packages/auto_route

• pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # 路由管理
  auto_route: ^0.4.4

dev_dependencies:
  flutter_test:
    sdk: flutter

  # 路由生成
  auto_route_generator: ^0.4.4
  build_runner:

路由定义

• lib/common/router/router.dart

@MaterialAutoRouter()
class $AppRouter {
  @initial
  IndexPage indexPageRoute;

  WelcomePage welcomePageRoute;

  SignInPage signInPageRoute;

  SignUpPage signUpPageRoute;

  ApplicationPage applicationPageRoute;

  DetailsPage detailsPageRoute;
}

注意 $ 符号

自动生成路由控制类

• 执行命令

flutter packages pub run build_runner build

• 自动生成 lib/common/router/router.gr.