flutter如何实现shimmer效果

在Flutter中如何实现类似Facebook或Instagram加载数据时的shimmer效果？我尝试过一些方法但效果不太理想，希望能找到一个简单高效的实现方案。是否需要使用特定的插件，或者可以通过Flutter内置的动画组件来实现？最好能提供具体的代码示例和实现步骤。

2 回复

使用shimmer包实现Flutter shimmer效果。步骤如下：

  1. 添加依赖：shimmer: ^2.0.0
  2. 导入包：import 'package:shimmer/shimmer.dart';
  3. 包裹组件：用Shimmer组件包裹需要添加效果的内容。
  4. 可选配置：设置方向、颜色等参数。

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


在Flutter中实现Shimmer（闪烁加载）效果，可以通过以下方法：

1. 使用 shimmer 包（推荐）

添加依赖到 pubspec.yaml：

dependencies:
  shimmer: ^2.0.0

基本用法：

import 'package:shimmer/shimmer.dart';

Shimmer(
  gradient: LinearGradient(
    colors: [
      Colors.grey[300]!,
      Colors.grey[100]!,
      Colors.grey[300]!,
    ],
  ),
  child: Column(
    children: List.generate(
      3,
      (index) => Container(
        margin: EdgeInsets.only(bottom: 10),
        height: 60,
        color: Colors.white,
      ),
    ),
  ),
)

2. 自定义实现

使用 AnimationController 和渐变：

class ShimmerEffect extends StatefulWidget {
  @override
  _ShimmerEffectState createState() => _ShimmerEffectState();
}

class _ShimmerEffectState extends State<ShimmerEffect>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return ShaderMask(
          shaderCallback: (bounds) {
            return LinearGradient(
              colors: [Colors.grey[300]!, Colors.grey[100]!, Colors.grey[300]!],
              stops: [0.1, 0.3, 0.4],
              begin: Alignment(-1.0, -0.3),
              end: Alignment(1.0, 0.3),
              tileMode: TileMode.clamp,
              transform: _SlidingGradientTransform(
                slidePercent: _controller.value,
              ),
            ).createShader(bounds);
          },
          child: child,
        );
      },
      child: YourContentWidget(), // 替换为实际内容
    );
  }
}

class _SlidingGradientTransform extends GradientTransform {
  final double slidePercent;

  _SlidingGradientTransform({required this.slidePercent});

  @override
  Matrix4? transform(Rect bounds, {TextDirection? textDirection}) {
    return Matrix4.translationValues(bounds.width * slidePercent, 0.0, 0.0);
  }
}

使用建议：

  • 使用 shimmer 包更简单且效果更好
  • 可调整渐变颜色和动画速度
  • 适用于列表项、卡片等加载状态

记得在 dispose 方法中释放控制器：

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}
回到顶部