Flutter动画效果插件shimmer_alternative的使用

Flutter动画效果插件shimmer_alternative的使用

Shimmer Alternative 是一个用于在应用程序加载状态时添加美观闪烁效果的 Flutter 包。该插件适用于为卡片、容器、文本和文本字段添加视觉上吸引人的动画，从而提升用户的加载体验。

属性

Properties

- `child` (Widget): 在树结构中的子部件。
- `baseColor` (Color): 闪烁效果的基础颜色。
- `highlightColor` (Color): 闪烁效果的高亮颜色。
- `duration` (Duration): 闪烁动画的持续时间。
- `direction` (ShimmerDirection): 闪烁动画的方向。
- `shape` (ShimmerShape): 闪烁效果的形状。
- `customGradient` (Gradient?): 自定义渐变的闪烁效果。
- `isDarkMode` (bool): 是否自动调整颜色以适应暗模式。
- `customShapeBuilder` (CustomShapeBuilder?): 自定义形状构建回调。
- `onAnimationStart` (VoidCallback?): 动画开始时的回调。
- `onAnimationStop` (VoidCallback?): 动画停止时的回调。
- `colorInterpolation` (double): 颜色混合的插值因子。
- `opacity` (double): 闪烁效果的不透明度。
- `loopCount` (int): 动画应循环的次数。
- `easing` (Curve): 动画的缓动曲线。

ShimmerDirection 属性

• ltr: 左到右。
• rtl: 右到左。
• ttb: 上到下。
• btt: 下到上。

ShimmerShape 属性

• rectangle: 矩形形状
• circle: 圆形形状
• custom: 自定义形状

特性

• 自定义闪烁颜色
• 调整闪烁速度
• 支持多种方向（左到右、右到左、上到下、下到上）
• 支持多种形状（矩形、圆形、自定义）
• 自定义渐变支持
• 自动暗模式调整
• 易于与现有部件集成
• 轻量且高度可定制
• 动画控制（暂停和恢复）
• 插值颜色和不透明度控制
• 循环次数和缓动曲线支持

开始使用

要使用此包，请在 pubspec.yaml 文件中添加 shimmer_alternative 作为依赖项：

dependencies:
  shimmer_alternative: ^0.0.6

使用示例

以下是一个简单的使用示例：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Shimmer Alternative Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              // 垂直闪烁
              ShimmerAlternative(
                duration: const Duration(seconds: 2),
                direction: ShimmerDirection.ttb,
                isDarkMode: true,
                child: Container(
                  width: double.infinity,
                  height: 150.0,
                  color: Colors.grey[300],
                ),
              ),
              const SizedBox(height: 20),

              // 文本闪烁
              ShimmerAlternative(
                duration: const Duration(seconds: 3),
                direction: ShimmerDirection.btt,
                child: const Text(
                  'Loading text...',
                  style: TextStyle(
                    fontSize: 24.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.grey[300],
                  ),
                ),
              ),
              const SizedBox(height: 20),

              // 输入框闪烁
              ShimmerAlternative(
                duration: const Duration(seconds: 1),
                direction: ShimmerDirection.rtl,
                child: const TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Loading...',
                    fillColor: Colors.grey[300],
                    filled: true,
                  ),
                ),
              ),
              const SizedBox(height: 20),

              // 自定义渐变闪烁
              ShimmerAlternative(
                customGradient: const LinearGradient(
                  colors: [Colors.red, Colors.blue, Colors.green],
                  stops: [0.4, 0.5, 0.6],
                ),
                child: Container(
                  width: double.infinity,
                  height: 150.0,
                  color: Colors.grey[300],
                ),
              ),
              const SizedBox(height: 20),

              // 自定义形状闪烁
              ShimmerAlternative(
                shape: ShimmerShape.custom,
                customShapeBuilder: (canvas, size, paint) {
                  Path path = Path();
                  path.moveTo(size.width * 0.5, 0);
                  path.lineTo(size.width, size.height);
                  path.lineTo(0, size.height);
                  path.close();
                  canvas.drawPath(path, paint);
                },
                child: Container(
                  width: double.infinity,
                  height: 150.0,
                  color: Colors.grey[300],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

自定义

闪烁颜色

你可以通过设置 baseColor 和 highlightColor 来自定义闪烁颜色：

ShimmerAlternative(
  baseColor: Colors.grey[300]!,
  highlightColor: Colors.grey[100]!,
  child: Container(
    width: double.infinity,
    height: 150.0,
    color: Colors.grey[300],
  ),
);

闪烁速度

你可以通过更改 duration 参数来调整闪烁速度：

ShimmerAlternative(
  duration: Duration(seconds: 2),
  child: Container(
    width: double.infinity,
    height: 150.0,
    color: Colors.grey[300],
  ),
);

闪烁方向

你可以通过 direction 参数来改变闪烁方向：

ShimmerAlternative(
  direction: ShimmerDirection.ttb,
  child: Container(
    width: double.infinity,
    height: 150.0,
    color: Colors.grey[300],
  ),
);

闪烁形状

你可以通过 shape 参数来改变闪烁形状：

ShimmerAlternative(
  shape: ShimmerShape.circle,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.grey[300],
  ),
);

闪烁渐变

你可以通过 customGradient 参数来设置自定义渐变：

ShimmerAlternative(
  customGradient: LinearGradient(
    colors: [Colors.red, Colors.blue, Colors.green],
    stops: [0.4, 0.5, 0.6],
  ),
  child: Container(
    width: double.infinity,
    height: 150.0,
    color: Colors.grey[300],
  ),
);

暗模式调整

你可以通过设置 isDarkMode 参数来自动调整颜色以适应暗模式：

ShimmerAlternative(
  isDarkMode: true,
  child: Container(
    width: double.infinity,
    height: 150.0,
    color: Colors.grey[300],
  ),
);

自定义形状

你可以通过 customShapeBuilder 参数来定义自定义形状：

ShimmerAlternative(
  shape: ShimmerShape.custom,
  customShapeBuilder: (canvas, size, paint) {
    Path path = Path();
    path.moveTo(size.width * 0.5, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    canvas.drawPath(path, paint);
  },
  child: Container(
    width: double.infinity,
    height: 150.0,
    color: Colors.grey[300],
  ),
);

动画控制

你可以使用 pauseAnimation 和 resumeAnimation 方法来控制闪烁动画：

final GlobalKey<ShimmerAlternativeState> shimmerKey = GlobalKey<ShimmerAlternativeState>();

ShimmerAlternative(
  key: shimmerKey,
  child: Container(
    width: double.infinity,
    height: 150.0,
    color: Colors.grey[300],
  ),
);

ElevatedButton(
  onPressed: () {
    shimmerKey.currentState?.pauseAnimation();
  },
  child: const Text('Pause Animation'),
);

ElevatedButton(
  onPressed: () {
    shimmerKey.currentState?.resumeAnimation();
  },
  child: const Text('Resume Animation'),
);