flutter：占位视图（骨架屏、shimmer）

有时候打开美团，在刚加载数据时会显示一个占位视图，如下：

那么这个是如何实现的呢？我们可以使用shimmer来开发该功能

官方文档
https://pub-web.flutter-io.cn/packages/shimmer

安装

flutter pub add shimmer

示例1

SizedBox(  width: 200.0,  height: 100.0,  child: Shimmer.fromColors(    baseColor: Colors.red,    highlightColor: Colors.yellow,    child: Text(      'Shimmer',      textAlign: TextAlign.center,      style: TextStyle(        fontSize: 40.0,        fontWeight:        FontWeight.bold,      ),    ),  ),);

示例2

class _MyHomePageState extends State<MyHomePage> {  @override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(          backgroundColor: Theme.of(context).colorScheme.inversePrimary,          title: Text(widget.title),        ),        body: ListView(          children: const [            ProductDisplay(),            ProductDisplay(),            ProductDisplay(),            ProductDisplay(),          ],        ));  }}class ProductDisplay extends StatelessWidget {  const ProductDisplay({super.key});  @override  Widget build(BuildContext context) {    return Container(      height: 150,      width: MediaQuery.of(context).size.width,      margin: const EdgeInsets.all(10),      child: Card(        color: Colors.white,        child: Shimmer.fromColors(            baseColor: Colors.grey.shade300,            highlightColor: Colors.grey.shade100,            child: Row(              children: [                Container(                  width: 120,                  height: 130,                  margin: const EdgeInsets.all(10),                  decoration: BoxDecoration(                    borderRadius: BorderRadius.circular(10),                    color: Colors.grey,                  ),                ),                Expanded(                    child: Column(                      children: [                        Container(                          height:30,                          margin: const EdgeInsets.all(10),                          decoration: BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.grey,                          ),                        ),                        Container(                          height:20,                          margin: const EdgeInsets.only(left: 10,right: 10,bottom: 10),                          decoration: BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.grey,                          ),                        ),                        Container(                          height:20,                          margin: const EdgeInsets.only(left: 10,right: 50,bottom: 10),                          decoration: BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.grey,                          ),                        ),                        Container(                          height:20,                          margin: const EdgeInsets.only(left: 10,right: 100,bottom: 10),                          decoration: BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.grey,                          ),                        ),                      ],                    ))              ],            )),      ),    );  }}

来源地址：https://blog.csdn.net/weixin_41897680/article/details/132066134