flutter pub add skeleton_text基于插件公开信息、社区数据与项目使用情况整理的选型参考。
一个 Flutter 包，可简化在数据加载期间添加骨架文本加载动画的过程，以提升用户体验。它提供了一种简洁、可自定义的方式，通过带有动态闪烁效果的占位符内容来模拟真实文本布局。属于 101Loop 社区的一部分，支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux。非常适合希望以轻量级解决方案提升 UI 响应性的开发者。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
A package provides an easy way to add skeleton text loading animation in Flutter project
dependencies:
skeleton_text:
import 'package:skeleton_text/skeleton_text.dart';
To achieve the above example animation use the following code :
ListView.builder(
scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 240,
margin: EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
Expanded(
child: SkeletonAnimation(
shimmerColor: Colors.grey,
borderRadius: BorderRadius.circular(20),
shimmerDuration: 1000,
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(20),
boxShadow: shadowList,
),
margin: EdgeInsets.only(top: 40),
),
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(top: 60, bottom: 20),
decoration: BoxDecoration(
color: Colors.grey,
boxShadow: shadowList,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
bottomRight: Radius.circular(20),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 15.0, bottom: 5.0),
child: SkeletonAnimation(
borderRadius: BorderRadius.circular(10.0),
shimmerColor: index % 2 != 0 ? Colors.grey : Colors.white54,
child: Container(
height: 30,
width: MediaQuery.of(context).size.width * 0.35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.grey[300]),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: Padding(
padding: const EdgeInsets.only(right: 5.0),
child: SkeletonAnimation(
borderRadius: BorderRadius.circular(10.0),
shimmerColor: index % 2 != 0 ? Colors.grey : Colors.white54,
child: Container(
width: 60,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.grey[300]),
),
),
),
),
],
),
),
),
],
),
);
},
)
I have created a List builder of 5 Containers. Wrapping any widget by SkeletonAnimation would give a beautiful loading animation.
SkeletonAnimation({
@required this.child,
this.shimmerColor = Colors.white54,
this.gradientColor = const Color.fromARGB(0, 244, 244, 244),
this.curve = Curves.fastOutSlowIn,
this.borderRadius = const BorderRadius.all(Radius.circular(0)),
this.shimmerDuration = 1000,
Key key,
})