Flutter带有闪烁动画的骨架屏

发表于 2020年03月24日
flutter

Flutter Skeleton骨架屏

骨架屏是一种策略，可通过呈现与所需内容大小大致匹配的空白占位符来改善内容的感知加载时间。此方法最初由Facebook流行，但现在已在许多流行的应用程序和网站上使用。

Flutter带有闪烁动画的骨架屏 — 从外部源加载数据时，使用骨架屏Widget小部件作为占位符。

Flutter Skeleton Text Widget

可以在Flutter中创建Skeleton效果，并在颜色渐变上创建动画循环。它只是简单地从左向右移动渐变的起点。另外，它使高度和宽度可配置为适合不同的内容类型。

skeleton.dart

class Skeleton extends StatefulWidget {
  final double height;
  final double width;

  Skeleton({Key key, this.height = 20, this.width = 200 }) : super(key: key);

  createState() => SkeletonState();
}

class SkeletonState extends State<Skeleton> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  Animation gradientPosition;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: Duration(milliseconds: 1500), vsync: this);

    gradientPosition = Tween<double>(
      begin: -3,
      end: 10,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.linear
      ),
    )..addListener(() {
      setState(() {});
    });

    _controller.repeat();
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width:  widget.width,
        height: widget.height, 
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment(gradientPosition.value, 0),
            end: Alignment(-1, 0),
            colors: [Colors.black12, Colors.black26, Colors.black12]
          )
        ),
    );
  }
}