Flutter页面路由生成插件page_route_generator的使用

Flutter 页面路由生成插件 Page Route Generator 的使用

Page Route Generator 是一个用于 Flutter 的构建时工具，可以帮助你自动生成并管理应用中的路由。通过此插件，你可以使用类型安全的方式轻松获取小部件的路由名称。

特性

  • 自动路由管理：为应用中所有标注了 @page 的页面生成路由名称。
  • 类型安全的路由访问：使用 R<T> 辅助类来通过小部件类型访问路由。
  • 错误处理：当找不到路由时，会提供清晰的错误信息。
  • 集中式路由列表：所有路由都存储在单个文件中，便于管理。

安装

  1. 在 pubspec.yaml 文件中添加依赖：
    dependencies:
  page_route_generator: ^latest
  2. 添加 build_runner 作为开发依赖：
    dev_dependencies:
  build_runner: ^2.4.0
  3. 运行 flutter pub get 来安装依赖。

使用

1. 标注你的小部件

给任何需要路由的小部件添加 @page 注解：

import 'package:page_route_generator/page_annotation.dart';
import 'package:flutter/material.dart';

@page
class Master extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Container();
}
2. 生成路由

运行以下命令来生成路由列表：

flutter pub run build_runner build --delete-conflicting-outputs

这将会在你的 lib 文件夹中创建一个 generated_route.dart 文件。

3. 在 MaterialApp 中使用路由

你可以将生成的路由直接集成到 MaterialApp 中，使用 routes 属性：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: R<Master>.route, // 使用生成的路由名称
      routes: {
        for (final route in generatedRoutes) route.routeName: (context) => route.widget,
      },
    );
  }
}
错误处理

如果你尝试访问不存在的小部件的路由，系统将抛出异常：

print(R<NonExistentWidget>.route);
// Exception: Route not found for widget type: NonExistentWidget

示例生成文件

这是生成的 generated_route.dart 文件的一个示例：

// 自动生成的代码 - 请勿手动修改
// 每次构建时此文件都会被重新生成。

import 'package:example/features/pages/master/master.dart';
import 'package:flutter/widgets.dart';

class RouteType {
  final String routeName;
  final Type type;
  final Widget widget;

  RouteType(this.routeName, this.type, this.widget);
}

final List<RouteType> generatedRoutes = [
  RouteType('master', Master, Master()),
];

class R<T> {
  String get route {
    try {
      return generatedRoutes.firstWhere((element) => element.type == T).routeName;
    } catch (e) {
      throw Exception("Route not found for widget type: \$T");
    }
  }
}

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

1 回复

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


page_route_generator 是一个用于简化 Flutter 页面路由管理的插件。它通过注解和代码生成的方式，帮助你自动生成路由配置，减少手动编写路由代码的工作量。以下是如何使用 page_route_generator 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 page_route_generator 和 build_runner 依赖。

dependencies:
  flutter:
    sdk: flutter
  page_route_generator: ^latest_version

dev_dependencies:
  build_runner: ^latest_version

然后运行 flutter pub get 来获取依赖。

2. 创建页面

假设你有两个页面：HomePage 和 DetailsPage。

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

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Home Page')),
    );
  }
}

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

class DetailsPage extends StatelessWidget {
  final String id;

  DetailsPage({required this.id});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(child: Text('Details Page: $id')),
    );
  }
}

3. 使用 @PageRoute 注解

在页面类上添加 @PageRoute 注解，并指定路由名称。

// home_page.dart
import 'package:flutter/material.dart';
import 'package:page_route_generator/page_route_generator.dart';

@PageRoute('home')
class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Home Page')),
    );
  }
}

// details_page.dart
import 'package:flutter/material.dart';
import 'package:page_route_generator/page_route_generator.dart';

@PageRoute('details')
class DetailsPage extends StatelessWidget {
  final String id;

  DetailsPage({required this.id});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(child: Text('Details Page: $id')),
    );
  }
}

4. 生成路由配置

运行 build_runner 来生成路由代码。

flutter pub run build_runner build

这将会生成一个 app_routes.dart 文件，其中包含了自动生成的路由配置。

5. 使用生成的路由

在 main.dart 中，你可以使用生成的路由来配置 MaterialApp 的 onGenerateRoute。

import 'package:flutter/material.dart';
import 'app_routes.dart'; // 导入生成的路由文件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      onGenerateRoute: AppRoutes.onGenerateRoute,
      initialRoute: AppRoutes.home,
    );
  }
}

6. 导航到页面

你可以使用生成的路由名称来导航到不同的页面。

Navigator.pushNamed(context, AppRoutes.details, arguments: {'id': '123'});

7. 处理参数

在 DetailsPage 中，你可以通过 ModalRoute.of(context)!.settings.arguments 来获取传递的参数。

class DetailsPage extends StatelessWidget {
  final String id;

  DetailsPage({required this.id});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(child: Text('Details Page: $id')),
    );
  }
}
回到顶部