Flutter加载占位动画插件animated_shimmer的使用
Flutter加载占位动画插件animated_shimmer的使用
Animated Shimmer 是一个简单而轻量级的Flutter插件，用于显示带有闪烁效果的动画。它非常适合在从服务器或其他数据源加载数据时创建骨架屏。
示例
以下是一个示例GIF展示如何使用 Animated Shimmer 创建加载列表的效果：
如何使用
添加依赖
首先，在你的 pubspec.yaml 文件中添加 animated_shimmer 依赖：
dependencies:
animated_shimmer: ^1.0.0
然后运行 flutter pub get 来安装这个包。
导入库
在你的Dart代码中导入 animated_shimmer 库：
import 'package:animated_shimmer/animated_shimmer.dart';
使用 AnimatedShimmer 小部件
你可以通过指定高度和宽度来声明 AnimatedShimmer 小部件：
AnimatedShimmer(
height: 10,
width: 120,
),
你还可以传递多个参数来自定义动画的外观和感觉：
AnimatedShimmer(
height: 10,
width: 120,
borderRadius: const BorderRadius.all(Radius.circular(16)),
delayInMilliSeconds: Duration(milliseconds: index * 500),
),
要创建圆形的 AnimatedShimmer 小部件：
AnimatedShimmer.round(
size: 50,
),
参数说明
- height: 必填，设置闪烁效果的高度。
- width: 必填，设置闪烁效果的宽度。
- startColor: 设置闪烁效果开始的颜色。
- endColor: 设置闪烁效果结束的颜色。
- borderRadius: 设置动画小部件的边框半径。
- delayInMilliSeconds: 设置动画开始的延迟时间，默认值为
Duration(milliseconds: 0)。
完整示例 Demo
以下是一个完整的示例代码，展示了如何在列表中使用 AnimatedShimmer 小部件：
import 'package:animated_shimmer/animated_shimmer.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: AnimatedShimmerWidget(),
);
}
}
class AnimatedShimmerWidget extends StatefulWidget {
const AnimatedShimmerWidget({Key? key}) : super(key: key);
@override
State<AnimatedShimmerWidget> createState() => _AnimatedShimmerWidgetState();
}
class _AnimatedShimmerWidgetState extends State<AnimatedShimmerWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.separated(
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
margin: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.all(16),
child: Row(
children: [
AnimatedShimmer.round(
size: 60,
),
const SizedBox(
width: 8,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AnimatedShimmer(
height: 10,
width: 120,
borderRadius: const BorderRadius.all(Radius.circular(16)),
delayInMilliSeconds: Duration(milliseconds: index * 500),
),
const SizedBox(
height: 8,
),
AnimatedShimmer(
height: 10,
width: 180,
borderRadius: const BorderRadius.all(Radius.circular(16)),
delayInMilliSeconds: Duration(milliseconds: index * 500),
),
],
)
],
),
);
},
itemCount: 12,
separatorBuilder: (context, index) => const SizedBox(
height: 12,
),
),
);
}
}
以上代码创建了一个包含12个项目的列表，每个项目都包含一个圆形的 AnimatedShimmer 和两个矩形的 AnimatedShimmer 小部件。这可以模拟一个正在加载数据的用户界面。
许可证
此插件使用 MIT License。详细信息可以在 GitHub 上查看。
更多关于Flutter加载占位动画插件animated_shimmer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
