Flutter教程go_router路由管理

在使用go_router进行Flutter路由管理时遇到几个问题：

  1. 如何配置嵌套导航(Nested Navigation)？官方文档示例较少，尝试实现时总出现页面堆栈混乱
  2. go_router的redirect逻辑应该怎么写？比如根据用户登录状态自动跳转到登录页或主页
  3. 带参数的路由传值，在目标页面接收时经常报"Null检查错误"，有没有安全的类型转换方法？
  4. 如何优雅地处理深链接(Deep Link)？测试时Android和iOS的表现不一致
  5. 路由过渡动画能自定义吗？想实现类似Hero动画的效果但找不到对应配置
3 回复

go_router 是一个轻量级、易用的 Flutter 路由管理库，适合构建复杂导航逻辑的应用。以下为简单教程：

  1. 安装：在 pubspec.yaml 添加依赖：

    dependencies:
  go_router: ^5.0.0

  2. 初始化：在 main.dart 中配置：

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

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

class MyApp extends StatelessWidget {
  final GoRouter _router = GoRouter(routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/details',
      builder: (context, state) => DetailsPage(),
    ),
  ]);

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

  3. 导航：使用 _router.go() 进行页面跳转：

    ElevatedButton(
  onPressed: () {
    context.go('/details');
  },
  child: Text('Go to Details'),
)

  4. 带参数传递：

    • 跳转时传递参数：
      context.go('/details', extra: {'id': 1, 'name': 'John'});
    • 获取参数：
      final args = context.extra as Map<String, dynamic>;
String name = args['name'];
int id = args['id'];

go_router 简化了 Flutter 的路由管理，适合新手和复杂应用开发。

更多关于Flutter教程go_router路由管理的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


go_router 是 Flutter 社区中一个轻量级、易用的路由管理库，适合构建复杂的多页面应用。

安装

首先，在 pubspec.yaml 中添加依赖：

dependencies:
  go_router: ^5.0.1

然后运行 flutter pub get。

基本使用

  1. 初始化 Router 在 main.dart 中配置 GoRouter：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: GoRouter(routes: [
        GoRoute(path: '/', builder: (context, state) => HomePage()),
        GoRoute(path: '/details', builder: (context, state) => DetailsPage()),
      ]),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: ElevatedButton(
        onPressed: () => context.go('/details'),
        child: Text('Go to Details'),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(child: Text('This is the details page.')),
    );
  }
}

  2. 导航与参数传递

    • 导航：使用 context.go('/routeName') 或 context.push('/routeName')。
    • 参数传递：通过 extra 属性或 URL 查询参数。
    context.go('/details?productId=123');

  3. 嵌套路由

    GoRoute(
  path: '/parent',
  routes: [
    GoRoute(path: 'child', builder: (context, state) => ChildPage()),
  ],
)

go_router 简化了路由管理，推荐用于大多数 Flutter 应用。

Flutter中使用go_router进行路由管理

go_router是Flutter中一个流行的声明式路由管理库，它提供了简单且强大的路由功能，支持深度链接、嵌套路由等特性。

基本使用

首先添加依赖到pubspec.yaml:

dependencies:
  go_router: ^13.0.0

基本配置

import 'package:go_router/go_router.dart';

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      path: '/details/:id',
      builder: (context, state) {
        final id = state.pathParameters['id']!;
        return DetailsScreen(id: id);
      },
    ),
  ],
);

// 在MaterialApp中使用
MaterialApp.router(
  routerConfig: router,
);

导航操作

// 导航到新页面
context.go('/details/123');

// 替换当前路由
context.push('/details/123');

// 返回
context.pop();

// 带参数导航
context.go('/details/123', extra: {'data': 'value'});

嵌套路由

GoRoute(
  path: '/parent',
  builder: (context, state) => ParentScreen(),
  routes: [
    GoRoute(
      path: 'child',
      builder: (context, state) => ChildScreen(),
    ),
  ],
);

错误处理

final router = GoRouter(
  errorBuilder: (context, state) => ErrorScreen(state.error),
  routes: [...],
);

路由守卫

final router = GoRouter(
  redirect: (context, state) {
    final isLoggedIn = AuthService.isLoggedIn();
    if (!isLoggedIn && state.location != '/login') {
      return '/login';
    }
    return null;
  },
  routes: [...],
);

go_router还支持更多高级功能如过渡动画、查询参数、状态恢复等，是Flutter应用中路由管理的优秀选择。

回到顶部