Flutter路由管理插件flutter_approuter的使用

Flutter路由管理插件flutter_approuter的使用

简介

flutter_approuter 是一个用于简化Flutter应用中导航操作的插件，它允许你在不依赖 BuildContext 的情况下进行页面跳转。通过这个插件，你可以轻松地在纯Dart代码中实现导航功能。

安装

1. 在 pubspec.yaml 文件中添加 flutter_approuter 依赖，并运行 dart pub get：

   dependencies:
     flutter_approuter:
   

2. 在你的Flutter应用中导入该插件：

   import 'package:flutter_approuter/flutter_approuter.dart';
   

3. 在 MaterialApp 中添加 navigatorKey，以便可以在没有 BuildContext 的情况下进行路由操作：

   MaterialApp(
     navigatorKey: navigatorKey,
     // 其他配置...
   )
   

支持的设备

• Android
• iOS
• Linux
• Windows
• macOS

功能特性

• 自定义 AppRouter（无需 BuildContext）

  • push(Widget page)：推送新页面
  • pushOffAll(Widget page)：清除所有页面并推送新页面
  • pushNamed(String route)：根据命名路由推送页面
  • pop()：返回上一页

• 获取上下文

  • getContext()：在页面构建之前获取 BuildContext

示例代码

以下是一个完整的示例，展示了如何使用 flutter_approuter 进行页面导航：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      /// [navigatorKey] 必须添加，否则 appRouter 将无法工作
      navigatorKey: navigatorKey,
      title: 'Flutter Approuter demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Approuter Demo"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton.icon(
              onPressed: () {
                /// [appRouter.push(Widget page)] - 不需要上下文的页面推送
                appRouter.push(const SecondPage());
              },
              icon: const Icon(Icons.forward),
              label: const Text("跳转到第二页"),
            ),
            const SizedBox(height: 20),
            ElevatedButton.icon(
              onPressed: () {
                /// [appRouter.getContext()] - 在页面构建之前获取上下文
                BuildContext? context = appRouter.getContext();
                if (context != null) {
                  print(context.size);
                }
              },
              icon: const Icon(Icons.gamepad),
              label: const Text("获取上下文"),
            ),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        leading: IconButton(
          onPressed: () {
            /// [appRouter.pop()] - 不需要上下文的返回操作
            appRouter.pop();
          },
          icon: const Icon(Icons.keyboard_backspace_rounded),
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            /// [appRouter.pushAndRemoveUntil(Widget page)] - 推送新页面并移除之前的页面
            appRouter.pushAndRemoveUntil(const HomePage());
          },
          child: const Icon(Icons.keyboard_backspace_rounded),
        ),
      ),
    );
  }
}