Flutter路由构建插件routable_builder的使用

Flutter路由构建插件routable_builder的使用

Routable是一个Dart/Flutter包，它为Flutter应用程序提供了路由代码生成功能。它通过注解来定义路由，并生成必要的代码以处理导航。

该包使用了go_router包，并旨在简化Flutter应用程序中定义路由的过程。

特性

  • 使用注解定义路由
  • 自动生成路由配置
  • 支持嵌套路由
  • 支持路由参数
  • 可自定义的路由过渡
  • 保护路由的守卫

安装

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

dependencies:
  go_router:
  routable_annotations:
dev_dependencies:
  build_runner:
  routable_builder:

使用

1. 使用[@Routable](/user/Routable)注解定义路由

import 'package:routable_annotations/routable_annotations.dart';

[@Routable](/user/Routable)(path: '/home')
class HomePage extends StatelessWidget {
  // ...
}

[@Routable](/user/Routable)(path: '/login')
class LoginPage extends StatelessWidget {
  // ...
}

2. 运行build_runner生成路由配置

在终端运行以下命令：

flutter pub run build_runner build

3. 在main.dart中使用生成的路由

import 'package:go_router/go_router.dart';
import 'generated_routes.dart';

void main() {
  final router = GoRouter(
    routes: $buildRoutes(),
  );

  runApp(MyApp(router: router));
}

4. 导航时使用生成的路由

Routes.home.push(context);

Routes枚举类会生成一些附加的方法用于导航：

Routes.home.push(context);
Routes.home.push(context, extra);
Routes.home.replace(context);
Routes.home.replace(context, extra);

//Routes.product  `/product/:id` // 带有参数的路由
Routes.product.params({"id": "item_id"}).push(context); // 这将导航到 `/product/item_id`

5. 路由可以嵌套并受保护

[@Routable](/user/Routable)(path: '/home', isProtected: true) // 如果未认证，受保护的路由将默认重定向到/login
class HomePage extends StatelessWidget {
  // ...
}

[@Routable](/user/Routable)(path: '/profile' on: HomePage) // 嵌套在HomePage下的路由将是/home/profile
class ProfilePage extends StatelessWidget {
  // ...
}

6. 提供守卫函数以添加受保护的路由

import 'package:go_router/go_router.dart';
import 'generated_routes.dart';

Future<bool> authenticationGuard() async {
  // 检查用户是否已认证
  return true;
}

void main() {
  final router = GoRouter(
    routes: $buildRoutes(authenticationGuard),
  );

  runApp(MyApp(router: router));
}

目前，该包仅支持一个单一的守卫函数用于所有受保护的路由。

其他选项

可以在[@Routable](/user/Routable)注解中提供更多选项：

// 自定义过渡效果
[@Routable](/user/Routable)(path: '/home', transition: NoTransitionPage)
class HomePage extends StatelessWidget {
  // ...
}

// 从嵌套路由读取URL参数

[@Routable](/user/Routable)(path: '/product/:id')
class ProductPage extends StatelessWidget {
  // ...
}
// 添加useParams到嵌套路由将从父路由读取URL参数，以便在嵌套路由中使用
[@Routable](/user/Routable)(path: '/edit', on: ProductPage, useParams: true)
class EditProductPage extends StatelessWidget {
  final String? id;
  // ...
}

// 传递额外数据
[@Routable](/user/Routable)(path: '/product/:id', extra: Product)
class ProductPage extends StatelessWidget {
  final Product? params;
  // ...
}
// 使用extra参数传递额外数据
Routes.product.push(context, Product(id: 'item_id'));

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

1 回复

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


在Flutter中，routable_builder 是一个强大的插件，它可以帮助你更轻松地管理和构建路由。下面是一个简单的示例，展示如何使用 routable_builder 来设置和导航不同的路由。

首先，确保你已经在 pubspec.yaml 文件中添加了 routable 依赖：

dependencies:
  flutter:
    sdk: flutter
  routable: ^x.y.z  # 请替换为最新版本号

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

接下来，我们将设置一个基本的 Flutter 应用，使用 routable_builder 来管理路由。

1. 创建路由配置

首先，创建一个 Dart 文件来定义你的路由配置，例如 routes.dart：

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

// 定义路由配置
class MyRoutes {
  static final navigatorKey = GlobalKey<NavigatorState>();

  static void configureRoutes(Routable routable) {
    routable.define(
      '/',
      (context, args, _, __) => HomeScreen(),
    );

    routable.define(
      '/details',
      (context, args, _, __) => DetailsScreen(
        id: args.requiredParam<int>('id'),
      ),
    );
  }
}

2. 设置 MaterialApp 使用 Routable

在你的 main.dart 文件中，设置 MaterialApp 使用 Routable：

import 'package:flutter/material.dart';
import 'package:routable/routable.dart';
import 'routes.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Routable(
      routes: MyRoutes.configureRoutes,
      navigatorKey: MyRoutes.navigatorKey,
      builder: (context, child) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: RoutableWidget<void>(
          path: '/',
        ),
      ),
    );
  }
}

3. 创建 HomeScreen 和 DetailsScreen

接下来，创建你的 HomeScreen 和 DetailsScreen。

HomeScreen.dart

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到详情页面，传递参数
            context.routable.navigateToNamed('/details', params: {'id': 1});
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

DetailsScreen.dart

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

class DetailsScreen extends StatelessWidget {
  final int id;

  DetailsScreen({required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Screen'),
      ),
      body: Center(
        child: Text('Details for ID: $id'),
      ),
    );
  }
}

4. 运行应用

现在，你可以运行你的 Flutter 应用。点击 Home Screen 上的按钮，应该会导航到 Details Screen 并显示传递的参数。

这个示例展示了如何使用 routable_builder（通过 routable 包）来定义和管理 Flutter 应用中的路由。通过这种方式，你可以更灵活地处理复杂的路由需求，同时保持代码的整洁和可维护性。

回到顶部