Flutter实用工具插件april_flutter_utils的使用

April

april_flutter_utils 是一个功能强大的 Flutter 工具包，它提供了多种实用组件和工具类，帮助开发者快速构建复杂的 UI 和实现特定的功能需求。

Getting Started

在开始使用 april_flutter_utils 插件之前，请确保已经将其添加到项目的依赖中。可以在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  april_flutter_utils: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

接下来，我们将通过一个完整的示例演示如何使用 april_flutter_utils 中的部分功能。

示例代码

以下是 april_flutter_utils 的一个完整示例代码，展示了如何使用其中的一些核心组件。

示例代码：main.dart

import 'package:april_flutter_utils/april_flutter_utils.dart'; // 引入插件
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // 配置MaterialApp
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例'), // 设置标题
        ),
        body: const ExampleWidget(), // 加载示例页面
      ),
    );
  }
}

class ExampleWidget extends StatefulWidget {
  const ExampleWidget({Key? key}) : super(key: key);

  @override
  State<ExampleWidget> createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  late VisibilityValueNotifier notifier; // 可见性监听器

  @override
  void initState() {
    super.initState();
    notifier = VisibilityValueNotifier(); // 初始化可见性监听器
    notifier.addListener(onVisibilityChanged); // 添加监听回调
  }

  @override
  void dispose() {
    super.dispose();
    notifier.dispose(); // 释放资源
  }

  void onVisibilityChanged() {
    debugPrint('>>[可见性][${notifier.value}]'); // 打印可见性状态
  }

  @override
  Widget build(BuildContext context) {
    return VisibilityDetectorWidget( // 使用可见性检测器
      detectorKey: ValueKey(runtimeType), // 设置唯一标识符
      visibilityNotifier: notifier, // 绑定监听器
      child: Column( // 布局子组件
        children: [
          PeriodicScaleAnimationWidget( // 周期性缩放动画
            detectorKey: const ValueKey<String>('周期性缩放动画'),
            child: const Icon(Icons.diamond, size: 48), // 显示图标
          ),
          ShakeWidget( // 旋转动画
            detectorKey: const ValueKey<String>('旋转动画'),
            child: const Icon(Icons.title, size: 48), // 显示图标
          ),
        ],
      ),
    );
  }
}

功能详解

1. 可见性检测器 (VisibilityDetectorWidget)

VisibilityDetectorWidget 是一个可以检测当前组件是否在屏幕可视范围内的小部件。结合 VisibilityValueNotifier，可以监听组件的可见性变化。

关键代码片段：

VisibilityDetectorWidget(
  detectorKey: ValueKey(runtimeType),
  visibilityNotifier: notifier,
  child: ...
)

• detectorKey: 唯一标识符，用于标记当前检测器。
• visibilityNotifier: 可见性监听器，用于捕获可见性变化。

监听回调：

void onVisibilityChanged() {
  debugPrint('>>[可见性][${notifier.value}]');
}

当组件进入或离开屏幕时，会触发 onVisibilityChanged 回调，并打印可见性状态。

2. 周期性缩放动画 (PeriodicScaleAnimationWidget)

PeriodicScaleAnimationWidget 提供了一个简单的周期性缩放动画效果，使子组件动态变化大小。

关键代码片段：

PeriodicScaleAnimationWidget(
  detectorKey: const ValueKey<String>('周期性缩放动画'),
  child: const Icon(Icons.diamond, size: 48),
)

• detectorKey: 唯一标识符，用于标记当前动画组件。
• child: 子组件，例如 Icon。

该组件会自动为子组件添加缩放动画效果。

3. 旋转动画 (ShakeWidget)

ShakeWidget 提供了一种简单的旋转动画效果，适合用于突出显示某些重要元素。

关键代码片段：

ShakeWidget(
  detectorKey: const ValueKey<String>('旋转动画'),
  child: const Icon(Icons.title, size: 48),
)