Flutter动画效果插件fading_widget_animation的使用

Flutter动画效果插件fading_widget_animation的使用

一个为Flutter开发人员提供的插件，可以在屏幕加载时对任意组件添加平滑淡入动画！

特性

此插件包含易于使用的参数，使得实现起来非常简单，并且可以让您的应用程序看起来更加出色！

FadingWidgetAnimator 参数

开始使用

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  fading_widget_animation: <VERSION>

或者在终端运行以下命令：

flutter pub add fading_widget_animation

使用方法

要让组件执行动画，可以按以下步骤操作：

1. 在需要显示动画的屏幕文件中导入该包：

import 'package:fading_widget_animation/fading_widget_animation.dart';

1. 调用FadingWidgetAnimator来显示淡入动画。duration参数是可选的，默认为2秒。child参数是必需的，如果不传递将导致构建失败。

FadingWidgetAnimator(
  // 可选参数，持续时间为4秒
  duration: const Duration(seconds: 4),
  // 子组件，必须传递
  child: const Text(
    'ta-daaaa!',
    style: TextStyle(
      fontSize: 32,
      fontWeight: FontWeight.bold,
    ),
  ),
  // 其他参数也是可选的
  // curve: Curves.linear,
  // startAfter: const Duration(seconds: 0),
)

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用fading_widget_animation插件。

import 'package:flutter/material.dart';
// 导入需要使用的包
import 'package:fading_widget_animation/fading_widget_animation.dart';

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PackageUse(),
    );
  }
}

class PackageUse extends StatelessWidget {
  const PackageUse({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 调用FadingWidgetAnimator来显示动画
            FadingWidgetAnimator(
              // 持续时间为4秒
              duration: const Duration(seconds: 4),
              // 子组件，必须传递
              child: const Text(
                'ta-daaaa!',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            const SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 构建多个带有不同延迟时间的圆点
                buildDots(
                  duration: const Duration(seconds: 3),
                  startAfter: const Duration(seconds: 1), // 延迟1秒
                  color: Colors.purple,
                ),
                const SizedBox(width: 5),
                buildDots(
                  duration: const Duration(seconds: 3),
                  startAfter: const Duration(seconds: 2), // 延迟2秒
                  color: Colors.indigo,
                ),
                const SizedBox(width: 5),
                buildDots(
                  duration: const Duration(seconds: 3),
                  startAfter: const Duration(seconds: 3), // 延迟3秒
                  color: Colors.green,
                ),
                const SizedBox(width: 5),
                buildDots(
                  duration: const Duration(seconds: 3),
                  startAfter: const Duration(seconds: 4), // 延迟4秒
                  color: Colors.yellow,
                ),
                const SizedBox(width: 5),
                buildDots(
                  duration: const Duration(seconds: 3),
                  startAfter: const Duration(seconds: 5), // 延迟5秒
                  color: Colors.orange,
                ),
                const SizedBox(width: 5),
                buildDots(
                  duration: const Duration(seconds: 3),
                  startAfter: const Duration(seconds: 6), // 延迟6秒
                  color: Colors.red,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  // 构建具有动画的圆点
  FadingWidgetAnimator buildDots({
    required Duration duration,
    required Duration startAfter,
    required Color color,
  }) {
    return FadingWidgetAnimator(
      duration: duration,
      startAfter: startAfter,
      child: CircleAvatar(
        radius: 15,
        backgroundColor: color,
      ),
    );
  }
}