Flutter占位符动画插件nimu_shimmer的使用
Flutter占位符动画插件nimu_shimmer的使用
NimuShimmer 是一个 Flutter 动画插件，可以用来创建占位符的闪烁效果。通过给定线性渐变可以实现更丰富的闪烁效果，或者仅通过设置主颜色和次颜色来实现基本的闪烁效果。
使用步骤
1. 添加依赖
在 pubspec.yaml 文件中添加 nimu_shimmer 依赖：
dependencies:
flutter:
sdk: flutter
nimu_shimmer: ^版本号
然后运行 flutter pub get 来获取依赖。
2. 创建示例代码
在 lib/main.dart 中创建一个示例代码来展示如何使用 NimuShimmer。
import 'package:flutter/material.dart';
import 'package:nimu_shimmer/nimu_shimmer.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 15,
),
Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: ((context, index) {
return NimuShimmer(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 5),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 70,
height: 65,
color: Colors.white,
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: MediaQuery.of(context).size.width * 0.7,
height: 15,
color: Colors.white,
),
const SizedBox(height: 6),
Container(
width: MediaQuery.of(context).size.width * 0.3,
height: 15,
color: Colors.white,
),
const SizedBox(height: 6),
Container(
width: MediaQuery.of(context).size.width * 0.15,
height: 15,
color: Colors.white,
),
],
),
)
],
),
),
);
})),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
更多关于Flutter占位符动画插件nimu_shimmer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter占位符动画插件nimu_shimmer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
nimu_shimmer 是一个用于在 Flutter 中实现占位符动画（Shimmer Effect）的插件。它可以帮助你在加载数据时显示一个闪烁的占位符效果，提升用户体验。以下是如何使用 nimu_shimmer 插件的详细步骤。
1. 添加依赖
首先，在你的 pubspec.yaml 文件中添加 nimu_shimmer 插件的依赖：
dependencies:
flutter:
sdk: flutter
nimu_shimmer: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
2. 基本使用
nimu_shimmer 提供了多种方式来创建闪烁效果。以下是基本的使用方法：
import 'package:flutter/material.dart';
import 'package:nimu_shimmer/nimu_shimmer.dart';
class ShimmerExample extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shimmer Example'),
),
body: NimuShimmer(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
leading: Container(
width: 50,
height: 50,
color: Colors.grey[300],
),
title: Container(
width: double.infinity,
height: 20,
color: Colors.grey[300],
),
subtitle: Container(
width: double.infinity,
height: 15,
color: Colors.grey[300],
),
);
},
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: ShimmerExample(),
));
}
在这个例子中，NimuShimmer 包裹了一个 ListView，当数据加载时，ListView 中的每个项目都会显示闪烁的占位符。
3. 自定义闪烁效果
你可以通过 NimuShimmer 的构造函数来自定义闪烁效果。例如，你可以设置闪烁的颜色、方向、持续时间等。
NimuShimmer(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
direction: ShimmerDirection.ltr,
period: Duration(seconds: 2),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
leading: Container(
width: 50,
height: 50,
color: Colors.grey[300],
),
title: Container(
width: double.infinity,
height: 20,
color: Colors.grey[300],
),
subtitle: Container(
width: double.infinity,
height: 15,
color: Colors.grey[300],
),
);
},
),
)
4. 使用 NimuShimmer 的其他功能
nimu_shimmer 还提供了其他一些功能，比如 NimuShimmer.fromColors 和 NimuShimmer.fromGradient，可以让你更灵活地创建闪烁效果。
NimuShimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
leading: Container(
width: 50,
height: 50,
color: Colors.grey[300],
),
title: Container(
width: double.infinity,
height: 20,
color: Colors.grey[300],
),
subtitle: Container(
width: double.infinity,
height: 15,
color: Colors.grey[300],
),
);
},
),
)
5. 控制闪烁动画
你可以通过 NimuShimmerController 来控制闪烁动画的启动和停止。
class ShimmerExample extends StatefulWidget {
[@override](/user/override)
_ShimmerExampleState createState() => _ShimmerExampleState();
}
class _ShimmerExampleState extends State<ShimmerExample> {
final NimuShimmerController _controller = NimuShimmerController();
[@override](/user/override)
void initState() {
super.initState();
_controller.start();
}
[@override](/user/override)
void dispose() {
_controller.stop();
super.dispose();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shimmer Example'),
),
body: NimuShimmer(
controller: _controller,
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
leading: Container(
width: 50,
height: 50,
color: Colors.grey[300],
),
title: Container(
width: double.infinity,
height: 20,
color: Colors.grey[300],
),
subtitle: Container(
width: double.infinity,
height: 15,
color: Colors.grey[300],
),
);
},
),
),
);
}
}