Flutter路由管理插件flow_router的使用

在Flutter应用开发中，路由管理是一个非常重要的部分。flow_router 是一个功能强大的路由管理插件，可以帮助开发者轻松实现复杂的路由逻辑。本文将详细介绍如何使用 flow_router 来管理Flutter应用的路由。

安装依赖

首先，在你的 pubspec.yaml 文件中添加 flow_router 依赖：

dependencies:
  flow_router: ^1.0.0

然后运行以下命令安装依赖：

flutter pub get

配置路由

接下来，我们需要配置路由。flow_router 提供了 FlowRouter 类来管理路由。

创建路由表

创建一个文件 routes.dart，用于定义所有的路由路径和对应的页面。

import 'package:flow_router/flow_router.dart';

// 定义路由表
final List<Page> routes = [
  Page(
    key: "home",
    path: "/",
    builder: (context) => HomePage(),
  ),
  Page(
    key: "about",
    path: "/about",
    builder: (context) => AboutPage(),
  ),
  Page(
    key: "details",
    path: "/details/:id",
    builder: (context) => DetailsPage(),
  ),
];

初始化路由

在 main.dart 中初始化 FlowRouter 并设置初始路由。

import 'package:flutter/material.dart';
import 'package:flow_router/flow_router.dart';
import 'routes.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: FlowRouterDelegate(
        routes: routes,
      ),
      routeInformationParser: FlowRouteInformationParser(),
    );
  }
}

使用路由

导航到指定页面

使用 FlowRouter 的 go 方法可以导航到指定页面。

void navigateToAboutPage(BuildContext context) {
  FlowRouter.navigate("/about");
}

动态参数传递

flow_router 支持动态参数传递。例如，传递 id 参数到 DetailsPage。

void navigateToDetailsPage(BuildContext context, String id) {
  FlowRouter.navigate("/details/$id");
}

获取当前路由参数

在目标页面中可以通过 FlowContext 获取动态参数。

class DetailsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final params = FlowRouter.current.pathParameters;
    final id = params["id"];
    return Scaffold(
      appBar: AppBar(title: Text("Details")),
      body: Center(
        child: Text("ID: $id"),
      ),
    );
  }
}

完整示例

以下是一个完整的示例代码，展示了如何使用 flow_router 管理路由。

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

// 定义路由表
final List<Page> routes = [
  Page(
    key: "home",
    path: "/",
    builder: (context) => HomePage(),
  ),
  Page(
    key: "about",
    path: "/about",
    builder: (context) => AboutPage(),
  ),
  Page(
    key: "details",
    path: "/details/:id",
    builder: (context) => DetailsPage(),
  ),
];

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: FlowRouterDelegate(
        routes: routes,
      ),
      routeInformationParser: FlowRouteInformationParser(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            FlowRouter.navigate("/about");
          },
          child: Text("Go to About Page"),
        ),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("About")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            FlowRouter.navigate("/details/123");
          },
          child: Text("Go to Details Page"),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final params = FlowRouter.current.pathParameters;
    final id = params["id"];
    return Scaffold(
      appBar: AppBar(title: Text("Details")),
      body: Center(
        child: Text("ID: $id"),
      ),
    );
  }
}