Flutter路由管理插件sunny_fluro的使用

sunny_fluro 是一个基于 Fluro 的 Flutter 路由管理插件，它提供了更简洁的 API 和更强大的功能来管理 Flutter 应用中的路由。Fluro 本身是一个流行的 Flutter 路由库，而 sunny_fluro 在此基础上进行了封装和优化，使得路由管理更加方便。

1. 安装 sunny_fluro

首先，你需要在 pubspec.yaml 文件中添加 sunny_fluro 依赖：

dependencies:
  flutter:
    sdk: flutter
  sunny_fluro: ^1.0.0  # 请使用最新版本

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

2. 初始化 sunny_fluro

在你的 Flutter 应用中，首先需要初始化 sunny_fluro。通常，你可以在 main.dart 文件中进行初始化。

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

void main() {
  // 初始化 SunnyFluro
  SunnyFluro.initialize();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fluro Example',
      // 使用 SunnyFluro 的路由生成器
      onGenerateRoute: SunnyFluro.router.generator,
      initialRoute: '/',
    );
  }
}

3. 定义路由

接下来，你需要定义应用中的路由。你可以使用 SunnyFluro.define 方法来定义路由。

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

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到详情页
            SunnyFluro.navigateTo(context, '/detail', transition: TransitionType.fadeIn);
          },
          child: Text('Go to Detail'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 返回上一页
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

void defineRoutes() {
  SunnyFluro.define(
    '/',
    handler: Handler(
      handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
        return HomePage();
      },
    ),
  );

  SunnyFluro.define(
    '/detail',
    handler: Handler(
      handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
        return DetailPage();
      },
    ),
  );
}

void main() {
  SunnyFluro.initialize();
  defineRoutes();  // 定义路由

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fluro Example',
      onGenerateRoute: SunnyFluro.router.generator,
      initialRoute: '/',
    );
  }
}

4. 导航到其他页面

你可以使用 SunnyFluro.navigateTo 方法来导航到其他页面。这个方法支持传递参数和自定义转场动画。

SunnyFluro.navigateTo(
  context,
  '/detail',
  transition: TransitionType.fadeIn,  // 自定义转场动画
  routeSettings: RouteSettings(arguments: {'id': 123}),  // 传递参数
);

5. 处理路由参数

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

class DetailPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final Map<String, dynamic> args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    final int id = args['id'];

    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page - $id'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}