Flutter动画边框插件zo_animated_border的使用
Flutter动画边框插件zo_animated_border的使用
一、插件简介
zo_animated_border 是一个为Flutter提供的现代插件，它能够创建带有动画效果的渐变边框。以下是该插件的相关信息：
二、开始使用
1. 添加依赖
首先，在你的pubspec.yaml文件中添加zo_animated_border作为依赖项：
dependencies:
flutter:
sdk: flutter
zo_animated_border : ^[version]
请确保替换^[version]为最新版本号。
2. 导入包
在Dart代码中导入此包：
import 'package:zo_animated_border/zo_animated_border.dart';
三、使用示例
1. 渐变边框（Gradient Border）
ZoAnimatedGradientBorder(
width: 200,
height: 200,
borderRadius: 100,
borderThickness: 4,
gradientColor: [Colors.yellow, Colors.orange],
duration: Duration(seconds: 4),
child: Container(
alignment: Alignment.center,
color: Colors.black,
child: Text(
"Color",
style: TextStyle(color: Colors.white), // 修改文本颜色以便可见
),
),
)
注： 将文本颜色从黑色改为白色以提高对比度。
2. 脉冲边框（Pulsating Border）
ZoPulsatingBorder(
type: ZoPulsatingBorderType.pulse,
borderRadius: BorderRadius.circular(100),
pulseColor: Colors.blue,
child: Container(
alignment: Alignment.center,
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(50),
),
child: Text(
"Radar Pulse",
style: TextStyle(color: Colors.white),
),
),
)
3. 单色边框（MonoChrome Border）
ZoMonoCromeBorder(
trackBorderColor: Colors.white,
cornerRadius: 50.0,
borderStyle: ZoMonoCromeBorderStyle.mirror,
borderWidth: 5.5,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text("Mirror", style: TextStyle(color: Colors.white)),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
)
四、完整示例代码
以下是一个完整的Flutter应用程序示例，展示了如何将上述不同类型的动画边框集成到应用中：
import 'package:flutter/material.dart';
import 'package:zo_animated_border/zo_animated_border.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Animated Border Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: "Animated Border"),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Container(
alignment: Alignment.centerLeft,
child: Text(
"Gradient Borders",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ZoAnimatedGradientBorder(
width: 100,
height: 100,
borderRadius: 100,
borderThickness: 4,
gradientColor: [Colors.yellow, Colors.orange],
duration: Duration(seconds: 4),
child: Container(
alignment: Alignment.center,
color: Colors.black,
child: Text(
"Color",
style: TextStyle(color: Colors.white),
),
),
),
ZoAnimatedGradientBorder(
width: 100,
height: 100,
borderRadius: 100,
borderThickness: 4,
gradientColor: [Colors.red, Colors.blue],
duration: Duration(seconds: 4),
child: Container(
alignment: Alignment.center,
color: Colors.black,
child: Text(
"Color",
style: TextStyle(color: Colors.white),
),
),
),
ZoAnimatedGradientBorder(
width: 100,
height: 100,
borderRadius: 100,
borderThickness: 4,
gradientColor: [Colors.orange, Colors.white, Colors.green],
duration: Duration(seconds: 4),
child: Container(
alignment: Alignment.center,
color: Colors.black,
child: Text(
"Color",
style: TextStyle(color: Colors.white),
),
),
),
],
),
SizedBox(height: 50),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ZoAnimatedGradientBorder(
width: 150,
height: 45,
borderThickness: 2,
shouldAnimate: false,
gradientColor: [Colors.red, Colors.blue],
duration: Duration(seconds: 4),
child: Container(
alignment: Alignment.center,
color: Colors.black,
child: Text(
"Click Me",
style: TextStyle(color: Colors.white),
),
),
),
ZoAnimatedGradientBorder(
width: 150,
height: 45,
borderThickness: 3,
shouldAnimate: true,
gradientColor: [Colors.orange, Colors.white, Colors.green],
duration: Duration(seconds: 4),
child: Container(
alignment: Alignment.center,
color: Colors.white,
child: Text(
"Click Me",
style: TextStyle(color: Colors.black),
),
),
),
],
),
),
SizedBox(height: 25),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.centerLeft,
child: Text(
"Styled Monochrome Borders",
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(height: 10),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ZoMonoCromeBorder(
trackBorderColor: Colors.white,
cornerRadius: 50.0,
borderStyle: ZoMonoCromeBorderStyle.mirror,
borderWidth: 5.5,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text(
"Mirror",
style: TextStyle(color: Colors.white),
),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
),
ZoMonoCromeBorder(
trackBorderColor: Colors.white,
cornerRadius: 50.0,
borderStyle: ZoMonoCromeBorderStyle.repeated,
borderWidth: 5.5,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text(
"Repeated",
style: TextStyle(color: Colors.white),
),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
),
ZoMonoCromeBorder(
trackBorderColor: Colors.white,
cornerRadius: 50.0,
borderStyle: ZoMonoCromeBorderStyle.stroke,
borderWidth: 5.5,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text(
"Stroke",
style: TextStyle(color: Colors.white),
),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Container(
alignment: Alignment.centerLeft,
child: Text(
"Pulse Borders",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 40),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: Row(
children: [
ZoPulsatingBorder(
layerCount: 2,
type: ZoPulsatingBorderType.radarPulse,
pulseColor: Colors.blue,
borderRadius: BorderRadius.circular(10),
child: Container(
alignment: Alignment.center,
width: 120,
height: 45,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10)),
child: Text(
"Radar Pulse",
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(width: 80),
ZoPulsatingBorder(
type: ZoPulsatingBorderType.pulse,
borderRadius: BorderRadius.circular(100),
pulseColor: Colors.blue,
child: Container(
alignment: Alignment.center,
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(50)),
child: Text(
"Circle Pulse",
style: TextStyle(color: Colors.white),
),
),
)
],
),
)
],
),
),
);
}
}
以上就是zo_animated_border插件的基本用法和一个完整的示例项目。你可以根据需要调整参数来实现不同的视觉效果。如果有任何问题或需求，可以通过GitHub上的issue页面提交反馈。
更多关于Flutter动画边框插件zo_animated_border的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter动画边框插件zo_animated_border的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter项目中使用zo_animated_border插件来实现动画边框效果的代码案例。
首先，确保你已经在pubspec.yaml文件中添加了zo_animated_border依赖：
dependencies:
flutter:
sdk: flutter
zo_animated_border: ^最新版本号 # 请替换为实际的最新版本号
然后，运行flutter pub get来安装依赖。
接下来，你可以在你的Flutter项目中这样使用zo_animated_border：
import 'package:flutter/material.dart';
import 'package:zo_animated_border/zo_animated_border.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Zo Animated Border Demo'),
),
body: Center(
child: AnimatedBorderDemo(),
),
),
);
}
}
class AnimatedBorderDemo extends StatefulWidget {
@override
_AnimatedBorderDemoState createState() => _AnimatedBorderDemoState();
}
class _AnimatedBorderDemoState extends State<AnimatedBorderDemo> with SingleTickerProviderStateMixin {
bool _isBorderActive = false;
void _toggleBorder() {
setState(() {
_isBorderActive = !_isBorderActive;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ZoAnimatedBorder(
isActive: _isBorderActive,
borderType: ZoBorderType.rectangle,
borderWidth: 4.0,
borderColor: Colors.blue,
duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,
child: Container(
width: 200,
height: 200,
color: Colors.white,
child: Center(
child: Text(
'Animated Border',
style: TextStyle(fontSize: 24),
),
),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _toggleBorder,
child: Text(_isBorderActive ? 'Disable Border' : 'Enable Border'),
),
],
);
}
}
在这个例子中：
- 我们创建了一个
AnimatedBorderDemo小部件，它包含一个ZoAnimatedBorder和一个按钮。 ZoAnimatedBorder小部件有几个关键属性：isActive：控制动画边框是否激活。borderType：边框类型，这里使用ZoBorderType.rectangle表示矩形边框。borderWidth：边框宽度。borderColor：边框颜色。duration：动画持续时间。curve：动画曲线。
- 我们通过点击按钮来切换
_isBorderActive的值，从而控制动画边框的显示与隐藏。
这个代码案例展示了如何使用zo_animated_border插件来实现一个简单的动画边框效果。你可以根据需要调整这些属性来实现不同的动画效果。
