Flutter自动路由管理插件flueco_auto_route的使用

Flutter自动路由管理插件flueco_auto_route的使用

Flueco AutoRoute 是一个用于管理 Flutter 应用程序路由的工具，它基于 auto_route 包。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flueco_auto_route: {version}

接下来，我们需要配置路由。首先，在项目的根目录下创建一个名为 router.dart 的文件，并编写以下代码：

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

// 导入所有页面
part 'router.gr.dart'; // 自动生成的路由代码

// 定义所有页面的路由
@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true),
    AutoRoute(page: DetailPage),
    // 更多页面可以在这里添加
  ],
)
class $AppRouter {}

// 在 main.dart 中使用生成的路由
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: AutoRouterDelegate(
        $AppRouter(),
      ),
      routeInformationParser: AutoRouteInformationParser(),
    );
  }
}

在这个示例中，我们定义了两个页面 HomePage 和 DetailPage。HomePage 是初始页面（initial: true）。

创建页面

接下来，我们创建两个页面类 HomePage 和 DetailPage：

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到 DetailPage
            ExtendedNavigator.of(context).push(Routes.detailPage);
          },
          child: Text('跳转到详情页'),
        ),
      ),
    );
  }
}

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

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('详情页'),
      ),
      body: Center(
        child: Text('这是详情页'),
      ),
    );
  }
}

路由表生成

为了自动生成路由表，我们需要运行以下命令：

flutter packages pub run build_runner build

这将在 router.gr.dart 文件中生成所需的代码。

使用

现在，你可以在应用中使用这些路由了。例如，在 HomePage 中，我们通过点击按钮导航到 DetailPage。

onPressed: () {
  // 导航到 DetailPage
  ExtendedNavigator.of(context).push(Routes.detailPage);
},

更多关于Flutter自动路由管理插件flueco_auto_route的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自动路由管理插件flueco_auto_route的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flueco_auto_route 是一个用于 Flutter 的自动路由管理插件，它可以帮助开发者更高效地管理应用程序中的路由和导航。通过使用 flueco_auto_route，你可以减少手动编写路由代码的工作量，并确保路由的自动化和一致性。

安装与配置

  1. 添加依赖
    在你的 pubspec.yaml 文件中添加 flueco_auto_route 依赖：

    dependencies:
  flutter:
    sdk: flutter
  flueco_auto_route: ^latest_version

dev_dependencies:
  build_runner: ^latest_version

    然后运行 flutter pub get 来安装依赖。

  2. 创建路由配置类
    在你的项目中创建一个路由配置类，通常命名为 app_router.dart。这个类将会生成路由的配置。

    import 'package:flueco_auto_route/flueco_auto_route.dart';
import 'package:flutter/material.dart';
import 'package:your_app/home_page.dart';
import 'package:your_app/details_page.dart';

[@MaterialAutoRouter](/user/MaterialAutoRouter)(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true),
    AutoRoute(page: DetailsPage),
  ],
)
class $AppRouter {}
    • [@MaterialAutoRouter](/user/MaterialAutoRouter) 注解用于定义路由配置。
    • replaceInRouteName 用于替换生成的类名中的特定字符串（如 Page 替换为 Route）。
    • routes 列表定义了应用程序中的所有路由。

  3. 生成路由代码
    运行以下命令来生成路由代码：

    flutter pub run build_runner build

    这将生成一个名为 app_router.gr.dart 的文件，其中包含了自动生成的路由代码。

使用自动路由

  1. 初始化路由
    在 main.dart 中初始化路由：

    import 'package:flutter/material.dart';
import 'app_router.gr.dart';

void main() {
  final AppRouter appRouter = AppRouter();
  runApp(MyApp(appRouter: appRouter));
}

class MyApp extends StatelessWidget {
  final AppRouter appRouter;

  MyApp({required this.appRouter});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: appRouter.delegate(),
      routeInformationParser: appRouter.defaultRouteParser(),
    );
  }
}

  2. 导航到新页面
    在应用程序的其他部分，你可以使用生成的路由类来导航到新页面：

    import 'app_router.gr.dart';

class HomePage extends StatelessWidget {
  final AppRouter appRouter;

  HomePage({required this.appRouter});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            appRouter.push(DetailsRoute());
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

  3. 处理路径参数
    你可以通过定义带有参数的路由来处理路径参数：

    [@MaterialAutoRouter](/user/MaterialAutoRouter)(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true),
    AutoRoute(page: DetailsPage, path: '/details/:id'),
  ],
)
class $AppRouter {}

    在 DetailsPage 中通过 route.args 获取参数：

    class DetailsPage extends StatelessWidget {
  final DetailsRouteArgs args;

  DetailsPage({required this.args});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Center(
        child: Text('Details ID: ${args.id}'),
      ),
    );
  }
}
回到顶部