Flutter动画效果插件shimmer_animation的使用
Flutter动画效果插件shimmer_animation的使用
Shimmer Animation
Supports Null Safety
此shimmer动画组件可以帮助你轻松地为项目带来简单而美丽的骨架加载器。
Shimmer在开发社区中被广泛用作骨架加载器或占位符小部件的默认动画。因此,拥有一个易于使用且可自定义的小部件,可以为Android、iOS和Web提供优势,使开发人员能够专注于其实际功能,让shimmer使加载体验更加流畅。
Examples 示例
一些示例可以在本仓库的example目录下找到。
更多详细的示例可以在Examples Repository中找到。
Full Screen 全屏 | Loading Widgets 加载组件 | Loading Buttons 加载按钮 |
---|---|---|
How to use 使用方法
添加依赖
在项目的pubspec.yaml
文件中添加shimmer_animation
依赖:
dependencies:
shimmer_animation: ^2.1.0
导入包
在Dart代码中导入shimmer_animation
:
import 'package:shimmer_animation/shimmer_animation.dart';
应用动画
将任何组件包裹在Shimmer()
组件中以应用动画:
Shimmer(
child: Container(
color: Colors.deepPurple,
),
),
可以通过传递参数来自定义动画的外观和感觉:
Shimmer(
duration: Duration(seconds: 3), // 默认值
interval: Duration(seconds: 5), // 默认值: Duration(seconds: 0)
color: Colors.white, // 默认值
colorOpacity: 0, // 默认值
enabled: true, // 默认值
direction: ShimmerDirection.fromLTRB(), // 默认值
child: Container(
color: Colors.deepPurple,
),
),
参数说明
@required child
:接受一个子Widget
,在其上显示动画。color
:接受一个Color
类型的参数,设置动画覆盖层的颜色,默认值为Colors.white
。colorOpacity
:接受一个double
类型的参数,设置动画覆盖层颜色的透明度,默认值为0.3
。enabled
:接受一个bool
值,开启或关闭动画,默认值为true
。duration
:接受一个Duration
,设置动画周期,默认值为Duration(seconds: 3)
。interval
:接受一个Duration
,设置重复动画之间的间隔,默认值为Duration(seconds: 0)
即无间隔。direction
:接受一个ShimmerDirection
,对齐动画方向,默认值为ShimmerDirection.fromLBRT()
。
详细API文档见这里。
License 许可证
完整示例demo
下面是一个完整的示例demo,展示了如何在一个全屏页面中使用shimmer_animation
创建一个带有闪烁效果的紫色背景。
import 'package:flutter/material.dart';
import 'package:shimmer_animation/shimmer_animation.dart';
void main() {
runApp(const FullPageShimmerExample());
}
class FullPageShimmerExample extends StatelessWidget {
const FullPageShimmerExample({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: ShimmerPage(),
);
}
}
class ShimmerPage extends StatelessWidget {
const ShimmerPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Shimmer(
// 动画持续时间,这是唯一必需的参数
duration: const Duration(seconds: 3),
// 动画之间的间隔时间,这不是默认值,默认是 Duration(seconds: 0)
interval: const Duration(seconds: 5),
// 动画覆盖层颜色,这是默认值
color: Colors.white,
// 动画覆盖层颜色透明度,这是默认值
colorOpacity: 0.3,
// 是否启用动画,这是默认值
enabled: true,
// 动画方向,这是默认值
direction: const ShimmerDirection.fromLTRB(),
// 子组件,这是唯一必需的参数
child: Container(
color: Colors.deepPurple,
),
),
);
}
}
这个例子创建了一个简单的Flutter应用程序,在主屏幕上展示了一个全屏的紫色容器,并应用了shimmer动画效果。你可以根据需要调整Shimmer
组件的参数来改变动画的效果。
更多关于Flutter动画效果插件shimmer_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter动画效果插件shimmer_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用shimmer_animation
插件来实现Shimmer效果的代码示例。shimmer_animation
插件通常用于在加载内容时显示占位符动画,以提供视觉反馈,让用户知道内容正在加载。
1. 添加依赖
首先,你需要在pubspec.yaml
文件中添加shimmer_animation
的依赖:
dependencies:
flutter:
sdk: flutter
shimmer_animation: ^x.y.z # 请替换为最新版本号
2. 导入包
在你的Dart文件中导入shimmer_animation
包:
import 'package:shimmer_animation/shimmer_animation.dart';
3. 使用Shimmer效果
以下是一个简单的示例,展示如何使用ShimmerAnimation
来创建一个Shimmer效果的列表项占位符:
import 'package:flutter/material.dart';
import 'package:shimmer_animation/shimmer_animation.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Shimmer Animation Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ShimmerScreen(),
);
}
}
class ShimmerScreen extends StatefulWidget {
@override
_ShimmerScreenState createState() => _ShimmerScreenState();
}
class _ShimmerScreenState extends State<ShimmerScreen> with SingleTickerProviderStateMixin {
bool isLoading = true;
@override
void initState() {
super.initState();
// 模拟数据加载
Future.delayed(Duration(seconds: 2), () {
setState(() {
isLoading = false;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shimmer Animation Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: isLoading
? ShimmerEffect(
child: Column(
children: <Widget>[
Container(
height: 20,
decoration: BoxDecoration(
color: Colors.grey[300]!,
borderRadius: BorderRadius.circular(8),
),
),
SizedBox(height: 8),
Container(
width: double.infinity,
height: 16,
decoration: BoxDecoration(
color: Colors.grey[300]!,
borderRadius: BorderRadius.circular(8),
),
),
SizedBox(height: 8),
Container(
width: 60,
height: 16,
decoration: BoxDecoration(
color: Colors.grey[300]!,
borderRadius: BorderRadius.circular(8),
),
),
],
),
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
)
: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item ${index + 1}'),
);
}),
),
);
}
}
解释
- 依赖添加:在
pubspec.yaml
文件中添加shimmer_animation
依赖。 - 导入包:在Dart文件中导入
shimmer_animation
。 - 创建Shimmer效果:
- 使用
ShimmerEffect
包裹一个列(Column
),列中包含几个容器(Container
),这些容器模拟了列表项的占位符。 baseColor
和highlightColor
分别定义了Shimmer动画的基础颜色和高亮颜色。
- 使用
- 模拟数据加载:使用
Future.delayed
模拟数据加载过程,加载完成后更新isLoading
状态。 - 条件渲染:根据
isLoading
状态决定是显示Shimmer效果还是真实数据。
这个示例展示了如何在Flutter中集成和使用shimmer_animation
插件来创建Shimmer效果的占位符动画。希望这个示例对你有所帮助!