Flutter占位动画插件simple_shimmer的使用

Flutter占位动画插件simple_shimmer的使用

Simple Shimmer 是一个轻量级的 Flutter 小部件，可以用于创建具有自定义渐变淡入动画的骨架屏幕。该插件允许你在两个颜色之间创建类似于闪动的效果。

特性

• 非常轻量级的小部件
• 易于定制
• 默认根据当前主题（Theme.of(context).brightness）选择浅色或深色闪动默认动画

使用方法

只需在你的 UI 中添加一个 SimpleShimmer() 小部件即可。

自定义方法

你可以通过 SimpleShimmerTheme 来为任何子 SimpleShimmer 小部件提供主题定制。

SimpleShimmerTheme.merge(
    data: ShimmerThemeData(
        baseColor: Colors.red,
        highlightColor: Colors.red.shade200,
        decoration: ShimmerDecoration(
        borderRadius: BorderRadius.circular(20),
        )
    ),
    // ... 在某处有一个 `SimpleShimmer` 小部件
)

示例代码

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

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

void main() {
  runApp(
    const MaterialApp(
      home: Example(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shimmer 示例'),
      ),
      body: Column(
        children: [
          // 水平排列的两个闪动小部件
          const Row(
            children: [
              Expanded(
                child: SimpleShimmer(
                  height: 100,
                ),
              ),
              SizedBox(
                width: 10,
              ),
              Expanded(
                child: SimpleShimmer(
                  height: 100,
                ),
              ),
            ],
          ),
          const SizedBox(
            height: 10,
          ),
          // 单个闪动小部件
          const SimpleShimmer(
            height: 100,
          ),
          const SizedBox(
            height: 10,
          ),
          // 带有圆形装饰的闪动小部件
          const SimpleShimmer(
            height: 100,
            theme: ShimmerThemeData(
              decoration: ShimmerDecoration(
                shape: BoxShape.circle,
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          // 使用合并主题的闪动小部件
          SimpleShimmerTheme.merge(
            data: ShimmerThemeData(
                baseColor: Colors.red,
                highlightColor: Colors.red.shade200,
                decoration: ShimmerDecoration(
                  borderRadius: BorderRadius.circular(20),
                )),
            child: const Row(
              children: [
                Expanded(
                  child: SimpleShimmer(
                    height: 100,
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: SimpleShimmer(
                    height: 100,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}