Flutter动画进度条插件simple_animation_progress_bar的使用
Flutter动画进度条插件 simple_animation_progress_bar 的使用
simple_animation_progress_bar 是一个用于展示响应式动画进度条的Flutter插件。它支持水平和垂直方向的进度条，并提供了多种自定义选项，如渐变颜色、边框圆角、阴影等。
特性
- 修复了
Namespace not specified错误。 - 线性进度条
- 渐变颜色
- 设置比例值
- 设置边框值
- 设置圆角半径值
- 设置背景颜色
- 设置前景颜色
- 设置动画类型
- 设置延迟时间
- 设置方向（水平或垂直）
- 设置反向进度条
- 设置阴影效果
开始使用
首先，确保在您的 pubspec.yaml 文件中添加 simple_animation_progress_bar 作为依赖项：
dependencies:
simple_animation_progress_bar: "^1.8.2"
然后运行以下命令更新包：
flutter packages upgrade
或者在 IntelliJ 中更新您的包。
示例项目
您可以在 example 文件夹中找到示例项目。如果需要进一步了解，请继续阅读以下内容。
使用方法
基本用法
要使用该插件，首先需要导入包：
import 'package:simple_animation_progress_bar/simple_animation_progress_bar.dart';
水平进度条的基本示例
SimpleAnimationProgressBar(
height: 30,
width: 300,
backgroundColor: Colors.grey.shade800,
foregrondColor: Colors.purple,
ratio: 0.5,
direction: Axis.horizontal,
curve: Curves.fastLinearToSlowEaseIn,
duration: const Duration(seconds: 3),
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.pink,
offset: const Offset(
5.0,
5.0,
),
blurRadius: 10.0,
spreadRadius: 2.0,
),
],
)
渐变颜色的水平进度条示例
SimpleAnimationProgressBar(
height: 30,
width: 300,
backgroundColor: Colors.grey.shade800,
foregrondColor: Colors.purple,
ratio: 0.5,
direction: Axis.horizontal,
curve: Curves.fastLinearToSlowEaseIn,
duration: const Duration(seconds: 3),
borderRadius: BorderRadius.circular(10),
gradientColor: const LinearGradient(
colors: [Colors.pink, Colors.purple]),
boxShadow: [
BoxShadow(
color: Colors.pink,
offset: const Offset(
5.0,
5.0,
),
blurRadius: 10.0,
spreadRadius: 2.0,
),
],
)
完整示例 Demo
以下是一个完整的示例代码，展示了如何动态改变进度条的比例值并显示不同类型的进度条：
import 'package:flutter/material.dart';
import 'package:simple_animation_progress_bar/simple_animation_progress_bar.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const SimpleAnimationProgressBarTestPage(),
);
}
}
class SimpleAnimationProgressBarTestPage extends StatefulWidget {
const SimpleAnimationProgressBarTestPage({super.key});
@override
State<SimpleAnimationProgressBarTestPage> createState() =>
_SimpleAnimationProgressBarTestPageState();
}
class _SimpleAnimationProgressBarTestPageState
extends State<SimpleAnimationProgressBarTestPage> {
double ratio = 0;
void ratioVal() {
if (ratio == 0) {
Future.delayed(const Duration(seconds: 2), () {
setState(() {
ratio = 0.2;
});
if (ratio == 0.2) {
Future.delayed(const Duration(seconds: 1), () {
setState(() {
ratio = 0.4;
});
if (ratio == 0.4) {
Future.delayed(const Duration(seconds: 1), () {
setState(() {
ratio = 0.7;
});
if (ratio == 0.7) {
Future.delayed(const Duration(seconds: 1), () {
setState(() {
ratio = 1;
});
if (ratio == 1) {
Future.delayed(const Duration(seconds: 1), () {
setState(() {
ratio = 0;
});
});
}
});
}
});
}
});
}
});
}
}
@override
Widget build(BuildContext context) {
ratioVal();
return Scaffold(
backgroundColor: Colors.grey.shade900,
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SimpleAnimationProgressBar(
height: 30,
width: 300,
backgroundColor: Colors.grey.shade800,
foregrondColor: Colors.purple,
ratio: ratio,
direction: Axis.horizontal,
curve: Curves.fastLinearToSlowEaseIn,
duration: const Duration(seconds: 3),
borderRadius: BorderRadius.circular(10),
gradientColor: const LinearGradient(
colors: [Colors.pink, Colors.purple]),
boxShadow: const [
BoxShadow(
color: Colors.pink,
offset: Offset(
5.0,
5.0,
),
blurRadius: 10.0,
spreadRadius: 2.0,
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: SimpleAnimationProgressBar(
height: 30,
width: 300,
backgroundColor: Colors.grey.shade800,
foregrondColor: Colors.blue,
ratio: ratio,
direction: Axis.horizontal,
curve: Curves.fastLinearToSlowEaseIn,
duration: const Duration(seconds: 3),
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.pink,
offset: Offset(
5.0,
5.0,
),
blurRadius: 10.0,
spreadRadius: 2.0,
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: SimpleAnimationProgressBar(
height: 30,
width: 300,
backgroundColor: Colors.grey.shade800,
foregrondColor: Colors.blue,
ratio: ratio,
direction: Axis.horizontal,
curve: Curves.fastLinearToSlowEaseIn,
duration: const Duration(seconds: 3),
borderRadius: BorderRadius.circular(10),
reverseAlignment: true,
boxShadow: const [
BoxShadow(
color: Colors.pink,
offset: Offset(
5.0,
5.0,
),
blurRadius: 10.0,
spreadRadius: 2.0,
),
],
),
),
],
),
SimpleAnimationProgressBar(
height: 130,
width: 30,
backgroundColor: Colors.grey.shade800,
foregrondColor: Colors.purple,
ratio: ratio,
direction: Axis.vertical,
curve: Curves.fastLinearToSlowEaseIn,
duration: const Duration(seconds: 3),
borderRadius: BorderRadius.circular(10),
gradientColor: const LinearGradient(
colors: [Colors.pink, Colors.purple],
begin: Alignment.bottomCenter,
end: Alignment.topCenter),
),
Padding(
padding: const EdgeInsets.only(left: 2),
child: SimpleAnimationProgressBar(
height: 130,
width: 30,
backgroundColor: Colors.grey.shade800,
foregrondColor: Colors.purple,
ratio: ratio,
direction: Axis.vertical,
curve: Curves.fastLinearToSlowEaseIn,
duration: const Duration(seconds: 3),
borderRadius: BorderRadius.circular(10),
gradientColor: const LinearGradient(
colors: [Colors.pink, Colors.purple],
begin: Alignment.bottomCenter,
end: Alignment.topCenter),
reverseAlignment: true,
),
),
],
),
),
);
}
}
通过上述示例，您可以轻松地在Flutter应用中集成和使用 simple_animation_progress_bar 插件来创建各种样式的进度条。
更多关于Flutter动画进度条插件simple_animation_progress_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter动画进度条插件simple_animation_progress_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter中使用simple_animation_progress_bar插件的示例代码。这个插件可以帮助你创建带有动画效果的进度条。
首先，你需要在你的pubspec.yaml文件中添加simple_animation_progress_bar依赖：
dependencies:
flutter:
sdk: flutter
simple_animation_progress_bar: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来是一个完整的示例代码，展示了如何使用simple_animation_progress_bar来创建一个简单的动画进度条：
import 'package:flutter/material.dart';
import 'package:simple_animation_progress_bar/simple_animation_progress_bar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Simple Animation Progress Bar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 5),
vsync: this,
)..repeat(reverse: true); // 反复播放动画
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple Animation Progress Bar Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SimpleAnimationProgressBar(
progress: _animation.value,
animationDuration: 2000, // 动画持续时间（毫秒）
barBackgroundColor: Colors.grey[200]!,
barProgressColor: Colors.blue,
height: 20.0,
width: MediaQuery.of(context).size.width * 0.8,
borderRadius: 25.0,
),
SizedBox(height: 20),
Text(
'Progress: ${(_animation.value * 100).toInt()}%',
style: TextStyle(fontSize: 20),
),
],
),
),
);
}
}
在这个示例中：
- 我们创建了一个
AnimationController来控制进度条的动画，并设置其持续时间为5秒。 Tween<double>用来定义动画从0到1的变化。SimpleAnimationProgressBar是我们用来显示动画进度条的组件，通过progress属性来接收动画的当前值。- 进度条的高度、宽度、背景颜色、进度颜色和圆角等都可以通过相关属性来设置。
Text组件用于显示当前的进度百分比。
运行这个示例，你将看到一个带有动画效果的进度条，并且进度条下方会显示当前的进度百分比。
