Flutter路由生成插件sunny_fluro_generator的使用

Flutter路由生成插件sunny_fluro_generator的使用

sunny_fluro_generator 是一个用于与 fluro 路由工具配合使用的代码生成工具。通过它，您可以更方便地管理 Flutter 应用中的路由。

安装和配置

首先，确保您的项目已经集成了 fluro 和 sunny_fluro_generator。以下是基本步骤：

1. 在 pubspec.yaml 文件中添加依赖项：

   dependencies:
     fluro: ^2.0.0
     sunny_fluro_generator: ^1.0.0
   
   dev_dependencies:
     build_runner: ^2.1.0

2. 运行以下命令以安装依赖：

   flutter pub get

3. 创建一个 routes.dart 文件来定义路由路径。例如：

   // routes.dart
   import 'package:fluro/fluro.dart';
   
   abstract class Routes {
     static String home = "/home";
     static String details = "/details";
   }

4. 使用 sunny_fluro_generator 自动生成路由代码。在项目根目录下运行以下命令：

   cd ../sunny_fluro_generator
   make setup
   make build-runner

使用示例

接下来，我们通过一个完整的示例展示如何使用 sunny_fluro_generator 来生成路由代码并实现页面跳转。

1. 定义页面组件

创建两个简单的页面组件 HomePage 和 DetailsPage：

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home Page")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, Routes.details);
          },
          child: Text("Go to Details"),
        ),
      ),
    );
  }
}

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

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Details Page")),
      body: Center(
        child: Text("This is the details page."),
      ),
    );
  }
}

2. 配置路由

在 main.dart 中配置路由，并使用 sunny_fluro_generator 自动生成路由表：

// main.dart
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:sunny_fluro_generator/sunny_fluro_generator.dart';
import 'routes.dart';
import 'home_page.dart';
import 'details_page.dart';

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

class MyApp extends StatelessWidget {
  final router = Router();

  MyApp() {
    Routes.configureRoutes(router);
    SunnyFluroGenerator.generateRoutes(router);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Sunny Fluro Example",
      onGenerateRoute: router.generator,
    );
  }
}

3. 配置路由路径

在 routes.dart 中定义路由路径，并使用 [@Route](/user/Route) 注解来标记每个页面：

// routes.dart
import 'package:fluro/fluro.dart';
import 'package:sunny_fluro_generator/sunny_fluro_generator.dart';
import 'home_page.dart';
import 'details_page.dart';

abstract class Routes {
  static String home = "/home";
  static String details = "/details";
}

[@Route](/user/Route)(Routes.home, page: HomePage)
[@Route](/user/Route)(Routes.details, page: DetailsPage)
void configureRoutes(Router router) {
  router.define(Routes.home, handler: Handler(handlerFunc: (_, __) => HomePage()));
  router.define(Routes.details, handler: Handler(handlerFunc: (_, __) => DetailsPage()));
}