flutter如何使用shimmer效果

在Flutter中如何实现Shimmer加载动画效果？我看到很多应用在数据加载时会有这种闪烁的占位效果，但不知道具体该怎么实现。是否需要使用特定的包，还是Flutter自带这个功能？能否提供一个简单的代码示例？另外，Shimmer效果是否可以自定义颜色和动画速度？

2 回复

在Flutter中使用shimmer效果，可安装shimmer包。

  1. 添加依赖：flutter pub add shimmer
  2. 导入包：import 'package:shimmer/shimmer.dart';
  3. 包裹组件：用Shimmer组件包装需要加载效果的内容，设置gradient或颜色即可实现闪烁效果。

更多关于flutter如何使用shimmer效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现Shimmer（微光/骨架屏）效果，可以使用官方提供的 shimmer 包。以下是具体步骤：

1. 添加依赖

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

dependencies:
  shimmer: ^2.0.0

运行 flutter pub get 安装。

2. 基本用法

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

class ShimmerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Shimmer.fromColors(
        baseColor: Colors.grey[300]!,
        highlightColor: Colors.grey[100]!,
        child: Column(
          children: List.generate(
            3,
            (index) => Padding(
              padding: EdgeInsets.only(bottom: 8.0),
              child: Row(
                children: [
                  Container(
                    width: 48,
                    height: 48,
                    color: Colors.white,
                  ),
                  SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: double.infinity,
                          height: 8,
                          color: Colors.white,
                        ),
                        SizedBox(height: 8),
                        Container(
                          width: double.infinity,
                          height: 8,
                          color: Colors.white,
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3. 自定义参数

  • baseColor: 基础颜色（默认灰色）
  • highlightColor: 高亮颜色（默认浅灰色）
  • direction: 闪烁方向（ShimmerDirection.ltr 或 ShimmerDirection.rtl）
  • period: 动画周期（默认1500毫秒）

4. 使用场景

常用于数据加载时的占位效果，提升用户体验。可配合 FutureBuilder 或 StreamBuilder 在加载状态时显示。

注意事项

  • 子组件需要使用不透明颜色
  • 可通过 SizedBox 控制占位区域尺寸
  • 可配合 LinearGradient 实现更复杂的闪烁效果

这是最简洁高效的实现方式，适用于大多数闪烁加载场景。

回到顶部