Flutter路由管理插件fma_go

Flutter路由管理插件fma_go_router的使用

在本文档中，我们将详细介绍如何使用 fma_go_router 插件来管理 Flutter 应用程序的路由。该插件基于 GoRouter，提供了高级且灵活的路由管理功能。

安装依赖

首先，确保在你的 pubspec.yaml 文件中添加了以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_micro_app: ^x.y.z
  fma_go_router: ^x.y.z
  go_router: ^x.y.z

然后运行 flutter pub get 来安装这些依赖项。

配置路由

接下来，我们需要配置路由。以下是一个完整的示例，展示了如何设置不同路径的路由。

// Using Go Router (Advanced and flexible)
import 'package:flutter/widgets.dart';
import 'package:flutter_micro_app/flutter_micro_app.dart';
import 'package:fma_go_router/fma_go_router.dart';
import 'package:go_router/go_router.dart';

// 创建一个 FmaGoRouter 实例
final FmaGoRouter fmaGoRouter = FmaGoRouter(
  name: 'GoRouter Example',
  description: 'This is an example of GoRouter',
  goRouter: GoRouter(
    navigatorKey: NavigatorInstance.navigatorKey,
    routes: [
      // 定义根路由
      FmaGoRoute(
        description: 'This is the boot page',
        path: '/',
        builder: (BuildContext context, GoRouterState state) {
          // 返回启动页面的 Widget
          return Container();
        },
        routes: [
          // 子路由定义
          FmaGoRoute(
            description: 'This page has path parameter',
            path: 'page_with_id/:id', // 路径参数
            builder: (context, state) {
              // 返回带有路径参数的页面
              return Container();
            },
          ),
          FmaGoRoute(
            description: 'This is the first page',
            path: 'page1', // 简单路径
            builder: (context, state) {
              // 返回第一个页面
              return Container();
            },
          ),
        ],
      ),
    ],
  ),
);

使用路由

现在我们已经配置好了路由，接下来就可以在应用程序中使用这些路由了。以下是如何导航到不同页面的示例：

// 导航到首页
Navigator.of(context).pushNamed('/');

// 导航到带参数的页面
Navigator.of(context).pushNamed('/page_with_id/123');

更多关于Flutter路由管理插件fma_go_router的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼

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

fma_go_router 是一个基于 go_router 的 Flutter 路由管理插件，旨在简化路由管理和导航逻辑。它提供了一种声明式的方式来定义路由，并且支持嵌套路由、参数传递、路由守卫等功能。

安装

首先，你需要在 pubspec.yaml 文件中添加 fma_go_router 依赖：

dependencies:
  flutter:
    sdk: flutter
  fma_go_router: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

定义路由

你可以使用 GoRoute 来定义路由。每个路由都有一个 path 和一个 builder，builder 用于构建该路由对应的页面。

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

final GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomePage();
      },
    ),
    GoRoute(
      path: '/details',
      builder: (BuildContext context, GoRouterState state) {
        return const DetailsPage();
      },
    ),
  ],
);

使用 MaterialApp.router

在 MaterialApp 中使用 router 配置来启用 fma_go_router。

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

class MyApp extends StatelessWidget {
  MyApp({super.key});

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

导航

你可以使用 GoRouter.of(context).go(path) 或 GoRouter.of(context).push(path) 来导航到不同的页面。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            GoRouter.of(context).go('/details');
          },
          child: const Text('Go to Details'),
        ),
      ),
    );
  }
}

参数传递

你可以通过路由路径传递参数，并在 builder 中获取这些参数。

GoRoute(
  path: '/details/:id',
  builder: (BuildContext context, GoRouterState state) {
    final String id = state.params['id']!;
    return DetailsPage(id: id);
  },
);

在导航时，你可以这样传递参数：

GoRouter.of(context).go('/details/123');

嵌套路由

fma_go_router 支持嵌套路由，你可以在父路由中定义子路由。

GoRoute(
  path: '/parent',
  builder: (BuildContext context, GoRouterState state) {
    return const ParentPage();
  },
  routes: [
    GoRoute(
      path: 'child',
      builder: (BuildContext context, GoRouterState state) {
        return const ChildPage();
      },
    ),
  ],
);

路由守卫

你可以使用 GoRouter 的 redirect 方法来实现路由守卫，例如检查用户是否登录。

final GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomePage();
      },
    ),
    GoRoute(
      path: '/profile',
      builder: (BuildContext context, GoRouterState state) {
        return const ProfilePage();
      },
    ),
  ],
  redirect: (BuildContext context, GoRouterState state) {
    final bool loggedIn = checkIfUserIsLoggedIn();
    if (!loggedIn && state.location != '/') {
      return '/';
    }
    return null;
  },
);