Flutter带有闪烁动画的骨架屏

Flutter Skeleton骨架屏

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

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]
)
),
);
}
}