Flutter自动化路由生成插件flutter_navigation_generator的使用

Flutter自动化路由生成插件flutter_navigation_generator的使用

FlutterNavigationGenerator 是一个生成器，通过简单的注解为您的页面生成导航器。

功能特性

• 生成带有所有路由（@flutterRoute, @flutterDialog 或 @flutterBottomSheet）的导航器类。
• 类型安全的导航方法。
• 使用 GlobalKey 进行导航，因此您可以创建多个嵌套导航器而不需要上下文。
• 使用原生 Flutter 导航（无第三方依赖）。
• 支持 Web，具有自动编码和解码路由参数的功能。

入门指南

首先添加依赖项：

dependencies:
  flutter_navigation_generator_annotations: current_version
  flutter_navigation_generator_animations: current_version # 可选，用于路由动画

dev_dependencies:
  flutter_navigation_generator: current_version

创建一个导航器文件，并在其中用 @flutterNavigator 注解类：

@flutterNavigator
class MainNavigator with BaseNavigator {}

然后用 [@flutterRoute](/user/flutterRoute) 注解您的页面：

[@flutterRoute](/user/flutterRoute)
class FirstPage extends StatefulWidget {
  const FirstPage({super.key});
  ...
}

运行 build runner 并可以开始使用导航器：

// 在您的依赖注入中：
final myNavigator = MainNavigator();

...

MaterialApp(
  key: myNavigator.navigatorKey,
  onGenerateRoute: myNavigator.onGenerateRoute,
  initialRoute: RouteNames.myHomePage,
),

...

myNavigator.goToSecondPage();

自定义

FlutterNavigator

• navigatorClassName: 导航器类的名称。默认值：BaseNavigator
• pageType: 生成页面的类型，必须扩展 [PageRoute]。默认值：MaterialPageRoute
• removeSuffixes: 要从路由名称中移除的后缀列表。默认值：['Page', 'Screen', 'View', 'Widget']
• unknownRoute: 当找不到路由时使用的屏幕，类似于 Web 上的 404 页面
• defaultGuards: 将这些守卫添加到所有未指定守卫的路由。可用于添加登录守卫等

FlutterRoute

• routeName: 路由名称。可选地使用 :name 声明路由中的参数以供 Web 使用
• methodName: 方法的名称。默认值：goTo[ClassName]
• returnType: 路由的返回类型。默认值：void
• navigationType: 导航类型。默认值：NavigationType.push
• generateMethod: 是否为该路由生成方法。默认值：true
• generatePage: 是否为该路由生成页面。默认值：true
• isFullscreenDialog: 路由是否应全屏显示。默认值：false

示例代码：

[@FlutterRoute](/user/FlutterRoute)(
  routeName: 'custom-name',
  returnType: bool,
  navigationType: NavigationType.popAndPush,
)
class FirstPage extends StatelessWidget {
    final int someValue;
    final int someOtherValue;

    const FirstPage({required this.someValue, this.someOtherValue = 1, super.key});

    @flutterRouteConstructor
    static FirstPage doubleValue(int someValue, {Key? key, int someOtherValue = 2}) => FirstPage(someValue: someValue * 2, key: key, someOtherValue: someOtherValue);
}

完整示例 Demo

以下是一个完整的示例 Demo：

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

Future<void> main() async {
  runApp(const MyApp());
}

final mainNavigator = MainNavigator();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      onGenerateRoute: mainNavigator.onGenerateRoute,
      navigatorKey: mainNavigator.navigatorKey,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

[@FlutterRoute](/user/FlutterRoute)(routeName: '/')
class MyHomePage extends StatefulWidget {
  const MyHomePage({this.title, super.key});

  final String? title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: widget.title == null ? null : AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title!),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => mainNavigator.goToSecondPage(),
          child: const Text("Go to Second Page"),
        ),
      ),
    );
  }
}

[@FlutterRoute](/user/FlutterRoute)(returnType: bool)
class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('second page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => mainNavigator.goBackWithResult(result: true),
          child: const Text("Return True"),
        ),
      ),
    );
  }
}