Flutter导航管理插件fluent_navigation的使用

Flutter导航管理插件fluent_navigation的使用

fluent_navigation

fluent_navigation 是一个提供简单方式在应用内进行导航的包。

开始使用

添加依赖

在 pubspec.yaml 文件中添加 fluent_navigation 包的依赖：

dependencies:
  flutter:
    sdk: flutter
  fluent_navigation: ^1.1.0

创建页面

创建两个页面 PageOne 和 PageTwo。PageOne 是初始页面，包含两个按钮：一个用于推送至第二个页面，另一个用于导航到第二个页面。PageTwo 包含一个返回按钮，用于返回到前一个页面。

// Page one (初始页面)
class PageOne extends StatelessWidget {
  const PageOne({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page one")),
      body: Center(
        child: Column(
          children: [
            // 按钮用于推送至第二个页面
            ElevatedButton(
              onPressed: () async {
                // 推送到注册的路由 "two"
                final result = await Fluent.get<NavigationApi>().pushTo("two");
                if (result != null) {
                  debugPrint("Result: $result");
                }
              },
              child: const Text("推送到第二页"),
            ),
            const SizedBox(height: 16),
            // 按钮用于导航到第二个页面
            ElevatedButton(
              onPressed: () {
                // 导航到页面 "two"
                Fluent.get<NavigationApi>().navigateTo("two");
              },
              child: const Text("导航到第二页"),
            ),
          ],
        ),
      ),
    );
  }
}

// Page two
class PageTwo extends StatelessWidget {
  const PageTwo({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page two")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 返回到前一个页面
            Fluent.get<NavigationApi>().pop(true);
          },
          child: const Text("返回到上一页"),
        ),
      ),
    );
  }
}

创建模块并注册路由

创建一个模块 ExampleModule 并注册两个路由：PageOne 和 PageTwo。

class ExampleModule extends FluentModule {
  [@override](/user/override)
  Future<void> build(Registry registry) async {
    registry
        // 初始路由
        ..registerRoute(GoRoute(
          name: "one",
          path: "/one",
          builder: (context, state) => const PageOne(),
        ))
        // 第二个路由
        ..registerRoute(GoRoute(
          name: "two",
          path: "/two",
          builder: (context, state) => const PageTwo(),
        ));
  }
}

构建模块

在 main.dart 中构建模块，并启动应用。

void main() async {
  await Fluent.build([
    NavigationModule(initialLocation: "/one"),
    ExampleModule(),
  ]);

  runApp(const MainApp());
}

使用它

在 MainApp 类中，获取路由配置并将其设置为 MaterialApp.router 的 routerConfig。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取路由配置
    final router = Fluent.get<NavigationApi>().router;

    return MaterialApp.router(
      title: "Fluent Navigation Demo",
      routerConfig: router,
    );
  }
}

示例

完整示例代码

import 'package:fluent_navigation_example/example_module.dart';
import 'package:flutter/material.dart';
import 'package:fluent_navigation/fluent_navigation.dart';

void main() async {
  await Fluent.build([
    NavigationModule(initialLocation: "/one"),
    ExampleModule(),
  ]);

  runApp(const MainApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取路由配置
    final router = Fluent.get<NavigationApi>().router;

    return MaterialApp.router(
      title: "Fluent Navigation Demo",
      routerConfig: router,
    );
  }
}