Flutter 入门第十课：路由与导航进阶（命名路由 + 拦截 + 传参 + 转场）

这节课是 Flutter 实现页面跳转与权限控制的核心也是从「基础页面跳转」到「企业级路由管理」的关键。基础的Navigator.push/pop存在代码耦合、传参繁琐、无权限控制、转场单一等问题本节课会系统学习 Flutter企业级路由方案命名路由统一路由表管理实现页面无耦合跳转灵活传参基础类型、实体类、回调函数传参全覆盖路由拦截实现登录拦截、权限拦截未登录跳转登录页自定义转场页面跳转 / 返回的动画定制提升交互体验路由管理返回上一页、返根、关闭所有页面等通用操作结合前一节课的登录状态持久化实现「路由拦截 登录状态」的权限控制闭环贴合企业真实开发的路由管理需求学完可直接用于实际项目。课前回顾本地存储SharedPreferences 实现登录状态持久化APP 启动自动加载登录状态全局状态InheritedWidget 实现用户信息全局共享跨组件获取登录状态前置基础Navigator基础跳转、BuildContext上下文、异步操作async/await核心痛点基础路由跳转需手动传页面实例代码耦合严重无法统一控制权限。一、路由核心认知基础路由 vs 命名路由Flutter 的路由导航分为基础路由和命名路由两者的核心差异在于页面是否被统一管理企业开发中禁止使用基础路由必须使用命名路由以下是两者的对比表格特性基础路由Navigator.push/pop命名路由Navigator.pushNamed页面管理分散在各页面手动传页面实例统一在路由表注册通过路由名称跳转代码耦合跳转页需导入目标页耦合严重无需导入目标页通过名称跳转完全解耦传参方式构造函数传参仅支持基础类型 / 实体类路由参数传参支持基础类型 / 实体类 / 回调权限拦截无统一拦截入口需在每个跳转处判断有全局拦截入口一次配置全项目生效转场动画仅默认动画修改需手动封装可全局配置默认动画也可单独定制页面动画项目维护页面增多后跳转关系混乱难以维护路由表统一管理页面关系清晰易维护企业开发适配性完全不适配小型 demo 可用完全适配企业开发标准方案核心原则企业开发必须使用命名路由这是 Flutter 路由管理的行业标准解决基础路由的所有痛点路由表唯一整个项目的路由表只保留一份放在项目根目录统一管理路由名称规范使用/开头的层级命名如/login登录页、/home首页、/home/detail首页详情页便于识别页面归属路由拦截必加统一实现登录拦截、权限拦截避免在每个页面重复判断登录状态。二、命名路由基础路由表配置 基础跳转命名路由的核心是先注册后使用先在MaterialApp中通过routes配置路由表路由名称→页面实例的映射然后通过Navigator.pushNamed(context, 路由名称)实现页面跳转核心是通过名称解耦页面依赖。步骤 1创建页面定义路由名称常量为了避免路由名称硬编码导致的拼写错误企业开发中会将所有路由名称定义为常量放在单独的文件中统一管理便于维护和修改。1.1 创建核心页面基础演示用dart// lib/pages/login_page.dart 登录页 class LoginPage extends StatelessWidget { const LoginPage({super.key}); override Widget build(BuildContext context) Scaffold(appBar: AppBar(title: const Text(登录页)), body: const Center(child: Text(登录页))); } // lib/pages/home_page.dart 首页 class HomePage extends StatelessWidget { const HomePage({super.key}); override Widget build(BuildContext context) Scaffold(appBar: AppBar(title: const Text(首页)), body: const Center(child: Text(首页))); } // lib/pages/detail_page.dart 详情页 class DetailPage extends StatelessWidget { const DetailPage({super.key}); override Widget build(BuildContext context) Scaffold(appBar: AppBar(title: const Text(详情页)), body: const Center(child: Text(详情页))); }1.2 定义路由名称常量创建lib/routes/route_names.dart统一管理所有路由名称dart/// 路由名称常量企业级规范层级命名避免硬编码 class RouteNames { // 根路由 static const String initial /; // 登录页 static const String login /login; // 首页 static const String home /home; // 首页-详情页层级命名标识归属 static const String homeDetail /home/detail; }步骤 2配置全局路由表修改项目根目录的main.dart在MaterialApp中通过routes配置路由表并通过initialRoute指定初始路由APP 启动后默认显示的页面dartimport package:flutter/material.dart; import routes/route_names.dart; import pages/login_page.dart; import pages/home_page.dart; import pages/detail_page.dart; void main() runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); override Widget build(BuildContext context) { return MaterialApp( title: Flutter路由进阶, theme: ThemeData(primarySwatch: Colors.blue), debugShowCheckedModeBanner: false, // 1. 初始路由APP启动默认显示的页面 initialRoute: RouteNames.initial, // 2. 全局路由表路由名称 → 页面实例映射 routes: { RouteNames.initial: (context) const LoginPage(), // 初始路由指向登录页 RouteNames.login: (context) const LoginPage(), RouteNames.home: (context) const HomePage(), RouteNames.homeDetail: (context) const DetailPage(), }, ); } }步骤 3命名路由基础跳转与返回配置完路由表后即可通过路由名称实现页面跳转核心使用Navigator的命名路由相关方法替代基础的push/pop常用方法如下dart// 1. 跳转到指定页面保留当前页面可返回 Navigator.pushNamed(context, RouteNames.home); // 2. 跳转到指定页面替换当前页面不可返回如登录后跳首页 Navigator.pushReplacementNamed(context, RouteNames.home); // 3. 返回上一页与基础路由pop一致无参数 Navigator.pop(context); // 4. 跳转到指定页面并关闭之前所有页面如退出登录跳登录页 Navigator.pushNamedAndRemoveUntil( context, RouteNames.login, (route) false, // false表示关闭所有之前的页面 );实战登录页跳首页替换当前页面不可返回在LoginPage中添加按钮实现登录成功后跳转到首页替换当前登录页避免用户返回登录页dartclass LoginPage extends StatelessWidget { const LoginPage({super.key}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(登录页)), body: Center( child: ElevatedButton( onPressed: () { // 模拟登录成功跳首页并替换当前页面 Navigator.pushReplacementNamed(context, RouteNames.home); }, child: const Text(登录成功跳首页), ), ), ); } }实战首页跳详情页 详情页返回首页dart// 首页跳详情页 class HomePage extends StatelessWidget { const HomePage({super.key}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(首页)), body: Center( child: ElevatedButton( onPressed: () Navigator.pushNamed(context, RouteNames.homeDetail), child: const Text(跳详情页), ), ), ); } } // 详情页返回首页 class DetailPage extends StatelessWidget { const DetailPage({super.key}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(详情页)), body: Center( child: ElevatedButton( onPressed: () Navigator.pop(context), child: const Text(返回首页), ), ), ); } }三、命名路由传参基础类型 实体类 回调函数命名路由的传参通过Navigator.pushNamed的arguments参数实现支持任意类型数据基础类型、实体类、回调函数目标页通过ModalRoute.of(context)!.settings.arguments获取参数解决了基础路由构造函数传参的耦合问题。传参核心方法dart// 跳转时传参通过arguments传递任意类型数据 Navigator.pushNamed( context, 路由名称, arguments: 传递的参数int/string/实体类/Map/回调, ); // 目标页获取参数通过ModalRoute获取需做非空判断和类型转换 var args ModalRoute.of(context)!.settings.arguments; // 类型转换如转为String/int/自定义实体类 String strArgs args as String; UserBean userArgs args as UserBean;实战 1基础类型传参String/int/Map最常用的传参方式适用于简单的参数传递如详情页的 ID、名称。首页跳详情页传递商品 IDint和商品名称Mapdart// 首页传参 ElevatedButton( onPressed: () { // 方式1传单个基础类型商品ID Navigator.pushNamed(context, RouteNames.homeDetail, arguments: 1001); // 方式2传多个参数封装为Map // Navigator.pushNamed(context, RouteNames.homeDetail, arguments: { // id: 1001, // name: Flutter实战商品, // price: 99.0 // }); }, child: const Text(跳详情页传商品ID), ) // 详情页获取参数 class DetailPage extends StatelessWidget { const DetailPage({super.key}); override Widget build(BuildContext context) { // 获取参数并类型转换 int goodsId ModalRoute.of(context)!.settings.arguments as int; // Map传参的获取方式 // MapString, dynamic goodsInfo ModalRoute.of(context)!.settings.arguments as MapString, dynamic; // int goodsId goodsInfo[id]; // String goodsName goodsInfo[name]; return Scaffold( appBar: AppBar(title: const Text(详情页)), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(接收的商品ID$goodsId), ElevatedButton(onPressed: () Navigator.pop(context), child: const Text(返回首页)), ], ), ), ); } }实战 2实体类传参企业级常用适用于复杂参数传递如用户信息、商品信息结合之前的JSON 实体类传参更规范、类型更安全是企业开发的标准传参方式。1. 定义商品实体类已实现 JSON 序列化dart// lib/model/goods_bean.dart import package:json_annotation/json_annotation.dart; part goods_bean.g.dart; JsonSerializable() class GoodsBean { final int id; final String name; final double price; final String desc; GoodsBean({required this.id, required this.name, required this.price, required this.desc}); factory GoodsBean.fromJson(MapString, dynamic json) _$GoodsBeanFromJson(json); MapString, dynamic toJson() _$GoodsBeanToJson(this); }2. 首页传商品实体类详情页获取并展示dart// 首页传实体类 ElevatedButton( onPressed: () { // 构建商品实体类 GoodsBean goods GoodsBean( id: 1001, name: Flutter实战商品, price: 99.0, desc: 这是一个用于路由传参的商品实体类, ); // 传递实体类 Navigator.pushNamed(context, RouteNames.homeDetail, arguments: goods); }, child: const Text(跳详情页传实体类), ) // 详情页获取实体类 class DetailPage extends StatelessWidget { const DetailPage({super.key}); override Widget build(BuildContext context) { // 获取实体类参数并类型转换 GoodsBean goods ModalRoute.of(context)!.settings.arguments as GoodsBean; return Scaffold( appBar: AppBar(title: const Text(商品详情页)), body: Padding( padding: const EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(商品ID${goods.id}), Text(商品名称${goods.name}), Text(商品价格${goods.price}), Text(商品描述${goods.desc}), const SizedBox(height: 20), ElevatedButton(onPressed: () Navigator.pop(context), child: const Text(返回首页)), ], ), ), ); } }实战 3回调函数传参反向传参适用于反向传参如详情页修改数据后将数据回传给上一页解决了 Flutter 路由无返回值的痛点替代基础路由的async/awaitpop传参。详情页传参给首页实现反向数据传递dart// 首页定义回调函数接收详情页的参数 class HomePage extends StatelessWidget { const HomePage({super.key}); override Widget build(BuildContext context) { // 定义回调函数接收详情页传递的字符串 void _onReceiveData(String data) { ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text(接收详情页回传数据$data)), ); } return Scaffold( appBar: AppBar(title: const Text(首页)), body: Center( child: ElevatedButton( onPressed: () { // 传递回调函数给详情页 Navigator.pushNamed( context, RouteNames.homeDetail, arguments: _onReceiveData, // 回调函数作为参数 ); }, child: const Text(跳详情页带回调传参), ), ), ); } } // 详情页获取回调函数调用并传参 class DetailPage extends StatelessWidget { const DetailPage({super.key}); override Widget build(BuildContext context) { // 获取回调函数并类型转换Function(String)表示接收String参数的函数 Function(String) callback ModalRoute.of(context)!.settings.arguments as Function(String); return Scaffold( appBar: AppBar(title: const Text(详情页)), body: Center( child: ElevatedButton( onPressed: () { // 调用回调函数回传数据给首页 callback(我是详情页的回传数据); // 返回上一页 Navigator.pop(context); }, child: const Text(回传数据并返回首页), ), ), ); } }传参核心注意事项类型转换必须做arguments是Object?类型获取后必须进行显式类型转换否则会报类型错误非空判断使用ModalRoute.of(context)时需加!或null判断避免上下文为空导致崩溃实体类传参优先复杂参数优先封装为实体类避免使用 Map 传参导致的类型不安全、字段混乱问题回调函数传参用于反向数据传递替代基础路由的async/await更符合命名路由的解耦思想。四、路由拦截实现登录拦截 / 权限拦截企业级核心路由拦截是命名路由的核心功能也是企业开发中必须实现的功能通过MaterialApp的onGenerateRoute实现全局路由拦截在页面跳转前统一判断登录状态、权限等级实现「未登录跳转登录页、无权限跳转无权限页」的效果结合之前的SP 登录状态持久化实现权限控制闭环。核心原理替换 routes 为 onGenerateRouteonGenerateRoute是路由的全局生成器所有命名路由的跳转都会经过该方法替代原来的routes配置实现拦截路由表与拦截分离将路由表抽离为单独的方法在onGenerateRoute中先判断权限再根据路由名称生成页面实例获取全局登录状态通过InheritedWidget或SPUtils获取全局登录状态在拦截时进行判断重定向路由若未登录 / 无权限通过MaterialPageRoute重定向到登录页 / 无权限页否则跳转到目标页。步骤 1抽离路由表为单独方法创建lib/routes/route_generator.dart将路由表抽离为getPage方法根据路由名称返回对应的页面实例便于在拦截器中调用dart// 路由生成器抽离路由表实现路由拦截 import package:flutter/material.dart; import route_names.dart; import package:xxx/pages/login_page.dart; import package:xxx/pages/home_page.dart; import package:xxx/pages/detail_page.dart; import package:xxx/pages/no_permission_page.dart; // 无权限页 /// 根据路由名称获取页面实例 Widget? getPage(String routeName) { switch (routeName) { case RouteNames.login: return const LoginPage(); case RouteNames.home: return const HomePage(); case RouteNames.homeDetail: return const DetailPage(); case RouteNames.noPermission: return const NoPermissionPage(); default: return null; // 未知路由返回null } }步骤 2实现全局路由拦截器在route_generator.dart中添加routeGenerator方法实现登录拦截 权限拦截核心逻辑获取目标路由名称和参数判断是否为免登录路由如登录页、注册页免登录路由直接放行非免登录路由获取全局登录状态未登录→重定向到登录页已登录→判断权限等级无权限→重定向到无权限页有权限→跳转到目标页未知路由→跳转到 404 页可选。dartimport package:xxx/utils/sp_utils.dart; import package:xxx/model/user_bean.dart; import package:xxx/inherited/user_inherited_widget.dart; /// 全局路由拦截器 Routedynamic routeGenerator(RouteSettings settings) { // 1. 获取目标路由名称和参数 String routeName settings.name ?? RouteNames.login; Object? args settings.arguments; // 2. 定义免登录路由列表这些路由无需登录即可访问 ListString freeLoginRoutes [ RouteNames.login, RouteNames.register, // 注册页 RouteNames.forgetPwd, // 忘记密码页 ]; // 3. 获取全局登录状态方式1从SP获取方式2从InheritedWidget全局状态获取推荐方式2 // 方式1SP获取 // UserBean? user SPUtils.getObjectUserBean(user_info, UserBean.fromJson); // bool isLogin user?.isLogin ?? false; // 方式2InheritedWidget全局状态获取实时更新推荐 bool isLogin UserInheritedWidget.of(navKey.currentContext!).user.isLogin; int userLevel UserInheritedWidget.of(navKey.currentContext!).user.level; // 用户权限等级1-普通用户2-管理员 // 4. 路由拦截逻辑 if (freeLoginRoutes.contains(routeName)) { // 免登录路由直接放行 return _buildRoute(routeName, args); } else { if (!isLogin) { // 未登录重定向到登录页并关闭之前所有页面 return MaterialPageRoute( builder: (context) const LoginPage(), ); } else { // 已登录判断权限示例详情页需要管理员权限level2 if (routeName RouteNames.homeDetail userLevel 2) { // 无权限重定向到无权限页 return MaterialPageRoute( builder: (context) const NoPermissionPage(), ); } else { // 有权限放行到目标页 return _buildRoute(routeName, args); } } } } /// 构建路由页面传递参数 MaterialPageRoute _buildRoute(String routeName, Object? args) { Widget? page getPage(routeName); // 未知路由跳转到404页可选 if (page null) { page const Scaffold(body: Center(child: Text(404页面不存在))); } // 构建路由将参数传递给页面 return MaterialPageRoute( builder: (context) page, settings: RouteSettings(name: routeName, arguments: args), ); } /// 全局导航Key用于在无上下文时获取登录状态/跳转路由 final GlobalKeyNavigatorState navKey GlobalKeyNavigatorState();步骤 3配置全局导航 Key 和拦截器修改main.dart替换routes为onGenerateRoute配置全局导航 Key让拦截器可以在无上下文时获取全局状态dartimport package:flutter/material.dart; import routes/route_names.dart; import routes/route_generator.dart; import package:xxx/app_root.dart; void main() async { WidgetsFlutterBinding.ensureInitialized(); // 初始化SP/Dio/DB之前的初始化代码 await SPUtils.init(); await initDio(); await DBUtils.init(); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); override Widget build(BuildContext context) { return MaterialApp( title: Flutter路由进阶, theme: ThemeData(primarySwatch: Colors.blue), debugShowCheckedModeBanner: false, // 1. 全局导航Key用于无上下文跳转/获取状态 navigatorKey: navKey, // 2. 初始路由 initialRoute: RouteNames.initial, // 3. 全局路由拦截器替代原来的routes onGenerateRoute: routeGenerator, ); } }步骤 4全局导航 Key 的额外用法 —— 无上下文跳转路由在非 Widget 类如工具类、网络请求拦截器中没有BuildContext无法直接使用Navigator通过全局导航 Key可以实现无上下文的路由跳转这是企业开发中的常用技巧dart// 无上下文跳转到首页 navKey.currentState?.pushReplacementNamed(RouteNames.home); // 无上下文跳转到登录页并关闭所有页面 navKey.currentState?.pushNamedAndRemoveUntil(RouteNames.login, (route) false); // 无上下文返回上一页 navKey.currentState?.pop();路由拦截核心总结必须使用 onGenerateRoute替代routes实现路由拦截所有页面跳转都会经过该方法免登录路由列表将登录、注册、忘记密码等页面加入免登录列表避免死循环全局导航 Key 是必备用于在无上下文时获取登录状态、实现路由跳转登录状态从全局状态获取优先使用InheritedWidget/Provider等全局状态管理而非直接从 SP 获取保证状态实时更新权限拦截可扩展可根据用户等级、角色、功能权限等实现更复杂的权限控制只需在拦截器中添加判断逻辑。五、自定义转场动画路由跳转 / 返回的动画定制基础的路由转场动画安卓左右滑、iOS 上下滑比较单一企业开发中会根据 APP 的设计风格自定义路由转场动画通过PageRouteBuilder替代MaterialPageRoute实现淡入淡出、缩放、平移、旋转等自定义动画支持全局默认动画和单个页面单独动画。核心原理PageRouteBuilderFlutter 提供的路由构建器支持自定义页面构建和转场动画animation路由进入的动画跳转时secondaryAnimation路由退出的动画返回时transitionDuration动画时长默认 300ms全局默认动画在route_generator.dart的_buildRoute方法中将MaterialPageRoute替换为自定义的PageRouteBuilder实现所有页面的默认动画单个页面单独动画在跳转时直接使用PageRouteBuilder覆盖全局默认动画。实战 1全局默认转场 —— 淡入淡出动画修改route_generator.dart的_buildRoute方法将MaterialPageRoute替换为淡入淡出的PageRouteBuilder实现所有页面跳转的默认动画dart/// 构建自定义转场动画的路由全局默认淡入淡出 PageRouteBuilder _buildRoute(String routeName, Object? args) { Widget? page getPage(routeName); if (page null) { page const Scaffold(body: Center(child: Text(404页面不存在))); } return PageRouteBuilder( // 动画时长 transitionDuration: const Duration(milliseconds: 300), // 页面构建 pageBuilder: (context, animation, secondaryAnimation) page, // 转场动画淡入淡出 transitionsBuilder: (context, animation, secondaryAnimation, child) { // 动画曲线先慢后快再慢更自然 CurvedAnimation curve CurvedAnimation(parent: animation, curve: Curves.easeInOut); // 淡入淡出动画opacity从0→1 return FadeTransition( opacity: Tweendouble(begin: 0, end: 1).animate(curve), child: child, ); }, settings: RouteSettings(name: routeName, arguments: args), ); }实战 2单个页面单独转场 —— 从右到左平移 缩放在首页跳详情页时使用自定义的 PageRouteBuilder实现从右到左平移 缩放的转场动画覆盖全局默认的淡入淡出动画dart// 首页跳详情页使用单独的转场动画 ElevatedButton( onPressed: () { Navigator.push( context, PageRouteBuilder( transitionDuration: const Duration(milliseconds: 300), pageBuilder: (context, animation, secondaryAnimation) const DetailPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) { CurvedAnimation curve CurvedAnimation(parent: animation, curve: Curves.easeInOut); // 平移动画从右到左dx从1→0 AnimationOffset translateAnim TweenOffset(begin: const Offset(1, 0), end: Offset.zero).animate(curve); // 缩放动画从0.8→1 Animationdouble scaleAnim Tweendouble(begin: 0.8, end: 1).animate(curve); // 组合动画平移缩放 return Transform( transform: Matrix4.translationValues(translateAnim.value.dx * MediaQuery.of(context).size.width, 0, 0) ..scale(scaleAnim.value), child: child, ); }, ), ); }, child: const Text(跳详情页自定义转场), )常用自定义转场动画Flutter 提供了丰富的动画组件可组合实现各种转场效果常用的有淡入淡出FadeTransitionopacity 从 0→1从右到左平移SlideTransitionOffset 从 (1,0)→(0,0)缩放ScaleTransitionscale 从 0.8→1旋转 缩放RotationTransitionScaleTransition组合渐入渐出 平移FadeTransitionSlideTransition组合。六、路由管理通用操作企业级常用结合命名路由和全局导航 Key整理企业开发中最常用的路由导航操作封装为通用方法放在route_generator.dart中实现全项目统一调用避免重复代码dart/// 路由管理通用方法 class RouteManager { // 1. 跳转到指定页面保留当前页面 static void push(String routeName, {Object? arguments}) { navKey.currentState?.pushNamed(routeName, arguments: arguments); } // 2. 跳转到指定页面替换当前页面不可返回 static void pushReplacement(String routeName, {Object? arguments}) { navKey.currentState?.pushReplacementNamed(routeName, arguments: arguments); } // 3. 跳转到指定页面并关闭之前所有页面 static void pushAndRemoveUntil(String routeName, {Object? arguments}) { navKey.currentState?.pushNamedAndRemoveUntil( routeName, (route) false, arguments: arguments, ); } // 4. 返回上一页 static void pop() { if (navKey.currentState?.canPop() ?? false) { navKey.currentState?.pop(); } } // 5. 返回到根页面 static void popToRoot() { navKey.currentState?.popUntil((route) route.isFirst); } // 6. 跳转到指定页面关闭到指定路由如返回到首页后再跳详情页 static void pushUntil(String targetRoute, String untilRoute, {Object? arguments}) { navKey.currentState?.pushNamedAndRemoveUntil( targetRoute, (route) route.settings.name untilRoute, arguments: arguments, ); } }通用方法用法全项目任意位置可调用dart// 跳转到首页保留当前页面 RouteManager.push(RouteNames.home); // 登录成功跳首页替换当前页面 RouteManager.pushReplacement(RouteNames.home); // 退出登录跳登录页关闭所有页面 RouteManager.pushAndRemoveUntil(RouteNames.login); // 返回上一页 RouteManager.pop(); // 返回到根页面 RouteManager.popToRoot();七、本节课核心总结必背路由管理全考点1. 命名路由核心企业开发必须使用统一路由表管理实现页面无耦合跳转解决基础路由的所有痛点路由名称规范/开头的层级命名定义为常量避免硬编码全局导航 Key必备用于无上下文跳转、拦截器中获取全局状态。2. 路由传参核心核心参数arguments传递任意类型数据目标页通过ModalRoute.of(context)!.settings.arguments获取类型安全复杂参数优先封装为实体类避免 Map 传参反向传参通过回调函数实现替代基础路由的async/await。3. 路由拦截核心企业级必实现核心方法onGenerateRoute实现全局拦截替代原来的routes拦截逻辑免登录路由放行→未登录重定向登录页→已登录判断权限→无权限重定向无权限页→有权限放行登录状态从全局状态InheritedWidget/Provider获取保证实时更新。4. 自定义转场核心核心组件PageRouteBuilder替代MaterialPageRoute实现自定义动画常用动画淡入淡出、平移、缩放可组合实现复杂效果全局 单独全局配置默认动画单个页面可单独覆盖。5. 企业开发最佳实践路由相关代码统一管理路由名称、路由生成器、通用方法放在routes/目录下封装通用路由方法将 push/pop/pushReplacement 等封装为通用方法全项目统一调用无上下文跳转通过全局导航 Key 实现适用于工具类、网络拦截器等非 Widget 类避免路由嵌套过深页面嵌套过深会导致返回逻辑混乱建议使用pushReplacement/pushAndRemoveUntil404 页面处理在路由生成器中对未知路由做 404 处理提升用户体验。八、课后练习路由管理必备贴合企业场景基础练习基于本节课的代码实现登录页→首页→详情页的命名路由跳转分别实现基础类型、实体类、回调函数三种传参方式进阶练习实现复杂权限拦截—— 新增「我的页面」/home/mine要求VIP 用户才能访问普通用户跳转 VIP 开通页实战练习结合之前的登录状态持久化和本节课的路由拦截实现完整的权限控制闭环——APP 启动自动加载登录状态未登录时访问任何页面都跳转到登录页登录后正常访问退出登录后跳回登录页并关闭所有页面。下一节课预告我们会进入 Flutter状态管理进阶的学习解决InheritedWidget状态更新繁琐、仅支持轻量状态的痛点学习 Flutter 生态中最主流的状态管理库 ProviderProvider 核心概念ChangeNotifier、ChangeNotifierProvider、Consumer状态共享实现跨组件、跨页面的状态全局共享状态更新通过notifyListeners实现状态实时更新组件自动刷新结合实战将用户登录状态、列表数据、主题模式等状态交给 Provider 管理替代 InheritedWidget企业级用法MultiProvider 实现多状态管理、Provider.of 获取状态、Selector 实现局部刷新状态管理是 Flutter 开发的核心难点也是企业开发中必须掌握的技能Provider 是入门级且最实用的状态管理库学完可解决 90% 的状态管理需求我可以帮你把本节课的路由名称、路由生成器、拦截器、通用路由方法整合为一个可直接复用的 Flutter 路由管理库包含登录拦截、自定义转场、无上下文跳转的完整代码需要吗