Flutter自定义边框插件custom_border的使用
Flutter自定义边框插件custom_border的使用
1. 简介
custom_border 是一个Flutter插件，用于为每个小部件添加边框。它支持多种类型的边框样式，包括动画边框、渐变边框、虚线边框等。
2. 安装
在 pubspec.yaml 文件中添加以下依赖：
dependencies:
custom_border: ^latest_version
然后运行以下命令来安装插件：
flutter pub add custom_border
3. 使用示例
3.1 动画与渐变边框
CustomBorder(
gradientBuilder: (progress) => LinearGradient(
colors: const [Colors.purple, Colors.green, Colors.blue, Colors.deepOrange],
transform: GradientRotation(progress * 6),
),
animateDuration: const Duration(seconds: 1),
animateBorder: true,
radius: const Radius.circular(25),
dashPattern: const [15, 5, 7.5, 10],
strokeWidth: 3,
child: Container(
margin: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.deepOrange,
),
width: 90,
height: 90,
child: const Center(child: Text("Animated")),
),
)
gradientBuilder: 定义渐变颜色。animateDuration: 动画持续时间。animateBorder: 是否启用动画。radius: 边框圆角半径。dashPattern: 虚线模式。strokeWidth: 边框宽度。
3.2 虚线边框
CustomBorder(
color: Colors.green,
size: const Size(100, 100),
radius: Radius.circular(50),
dashPattern: [6, 5],
dashRadius: Radius.circular(3),
style: PaintingStyle.fill,
pathStrategy: PathStrategy.aroundLine,
)
color: 边框颜色。size: 小部件大小。radius: 边框圆角半径。dashPattern: 虚线模式。dashRadius: 虚线圆角半径。style: 绘制风格（填充或描边）。pathStrategy: 路径策略。
3.3 虚线边框
CustomBorder(
color: Colors.red,
radius: const Radius.circular(25),
dashPattern: const [15, 5, 7.5, 10],
strokeWidth: 3,
size: const Size(100, 100),
)
color: 边框颜色。radius: 边框圆角半径。dashPattern: 虚线模式。strokeWidth: 边框宽度。size: 小部件大小。
3.4 线条边框
CustomBorder(
color: Colors.blueGrey,
size: Size(100, 100),
dashPattern: [3, 10, 9, 5],
pathStrategy: PathStrategy.verticalLine, // 或 PathStrategy.horizontalLine
strokeWidth: 3,
)
color: 边框颜色。size: 小部件大小。dashPattern: 虚线模式。pathStrategy: 路径策略（垂直线条或水平线条）。strokeWidth: 边框宽度。
3.5 自定义路径边框
CustomBorder(
color: Colors.blue,
dashPattern: const [15, 5, 7.5, 10],
strokeWidth: 3,
size: const Size(100, 100),
path: ObjectPath.triangle(const Size(100, 100)),
)
color: 边框颜色。dashPattern: 虚线模式。strokeWidth: 边框宽度。size: 小部件大小。path: 自定义路径（例如三角形）。
4. 完整示例代码
import 'package:custom_border/border.dart';
import 'package:flutter/material.dart';
void main() async {
runApp(const Application());
}
class Application extends StatelessWidget {
const Application({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
restorationScopeId: 'app',
theme: ThemeData(),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.system,
home: const BorderActivity(),
);
}
}
class BorderActivity extends StatelessWidget {
const BorderActivity({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Custom border"),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Wrap(
spacing: 16,
runSpacing: 16,
children: [
// 动画与渐变边框
CustomBorder(
gradientBuilder: (progress) => LinearGradient(
colors: const [
Colors.purple,
Colors.green,
Colors.blue,
Colors.deepOrange
],
transform: GradientRotation(progress * 6),
),
animateDuration: const Duration(seconds: 1),
animateBorder: true,
radius: const Radius.circular(25),
dashPattern: const [15, 5, 7.5, 10],
strokeWidth: 3,
child: Container(
margin: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.deepOrange,
),
width: 90,
height: 90,
child: const Center(child: Text("Animated")),
),
),
// 渐变边框
CustomBorder(
gradientBuilder: (progress) => const LinearGradient(
colors: [Colors.green, Colors.teal],
),
size: const Size(100, 100),
strokeWidth: 2,
strokeJoin: StrokeJoin.miter,
),
// 圆形渐变边框
CustomBorder(
animateDuration: const Duration(seconds: 1),
gradientBuilder: (progress) => LinearGradient(
colors: const [Colors.blue, Colors.pinkAccent],
transform: GradientRotation((1 - progress) * 6),
),
radius: const Radius.circular(49),
dashPattern: const [15, 10],
strokeCap: StrokeCap.square,
strokeWidth: 5,
child: const SizedBox(
width: 100,
height: 100,
child: Center(
child: Text("Circle"),
),
),
),
// 黄色虚线边框
const CustomBorder(
color: Colors.yellow,
size: Size(98, 98),
radius: Radius.circular(25),
dashPattern: [2, 10],
strokeCap: StrokeCap.butt,
strokeWidth: 10,
),
// 蓝色虚线边框
const CustomBorder(
color: Colors.indigo,
size: Size(98, 98),
radius: Radius.circular(25),
dashPattern: [5, 10],
strokeCap: StrokeCap.round,
strokeJoin: StrokeJoin.round,
strokeWidth: 3,
pathStrategy: PathStrategy.aroundLine,
),
// 粉色三角形边框
CustomBorder(
color: Colors.pink,
size: const Size(98, 98),
dashPattern: const [5, 5],
dashRadius: const Radius.circular(2.5),
style: PaintingStyle.fill,
path: ObjectPath.triangle(const Size(98, 98)),
pathStrategy: PathStrategy.aroundLine,
),
// 星形渐变边框
CustomBorder(
gradientBuilder: (progress) => const LinearGradient(
colors: [
Colors.purple,
Colors.green,
Colors.blue,
Colors.deepOrange
],
),
size: const Size(98, 98),
dashPattern: const [5, 10],
strokeCap: StrokeCap.round,
strokeJoin: StrokeJoin.round,
strokeWidth: 3,
path: ObjectPath.star(const Size(98, 98), 5),
),
// 动画与渐变线条边框
CustomBorder(
animateBorder: true,
gradientBuilder: (progress) => LinearGradient(
colors: const [
Colors.purple,
Colors.green,
Colors.blue,
Colors.deepOrange
],
transform: GradientRotation(progress * 6),
),
animateDuration: const Duration(seconds: 5),
radius: const Radius.circular(15),
dashPattern: const [10, 3, 30, 3],
dashRadius: const Radius.circular(5),
pathStrategy: PathStrategy.horizontalLine,
strokeWidth: 5,
style: PaintingStyle.stroke,
strokeJoin: StrokeJoin.bevel,
strokeCap: StrokeCap.butt,
child: const SizedBox(
width: double.infinity,
height: 70,
child: Align(
alignment: Alignment(0.0, -0.7),
child: Text("Animated & Gradient line"),
),
),
),
// 动画红色虚线边框
const CustomBorder(
animateBorder: true,
animateDuration: Duration(milliseconds: 250),
color: Colors.redAccent,
size: Size(98, 98),
radius: Radius.circular(25),
dashPattern: [15, 10],
strokeWidth: 3,
pathStrategy: PathStrategy.aroundLine,
),
// 蓝色填充正方形边框
const CustomBorder(
color: Colors.blue,
radius: Radius.circular(25),
dashPattern: [7, 5],
dashRadius: Radius.circular(3),
style: PaintingStyle.fill,
pathStrategy: PathStrategy.aroundLine,
child: SizedBox(
width: 100,
height: 100,
child: Center(child: Text("Square"))),
),
// 绿色点状边框
const CustomBorder(
color: Colors.green,
radius: Radius.circular(49),
dashPattern: [6, 5, 3, 5, 9, 5],
dashRadius: Radius.circular(3),
style: PaintingStyle.fill,
pathStrategy: PathStrategy.aroundLine,
child: SizedBox(
width: 100, height: 100, child: Center(child: Text("Dots"))),
),
// 橙色虚线边框
const CustomBorder(
color: Colors.orange,
radius: Radius.circular(35),
dashPattern: [9, 5, 6, 5],
dashRadius: Radius.circular(2),
strokeWidth: 1,
style: PaintingStyle.stroke,
pathStrategy: PathStrategy.aroundLine,
child: SizedBox(
width: 100,
height: 100,
child: Center(
child: Text("Squares"),
),
),
),
// 蓝灰色垂直线条边框
const CustomBorder(
color: Colors.blueGrey,
size: Size(100, 100),
dashPattern: [3, 10, 9, 5],
pathStrategy: PathStrategy.verticalLine,
strokeWidth: 3,
child: SizedBox(
width: 100,
height: 100,
child: Align(
alignment: Alignment(0.3, 0),
child: RotatedBox(
quarterTurns: 1,
child: Text("Line"),
),
),
),
),
// 红色五边形边框
CustomBorder(
color: Colors.redAccent,
size: const Size(98, 98),
dashPattern: const [10, 5],
strokeWidth: 3,
path: ObjectPath.pentagon(const Size(98, 98)),
),
// 骨状星形渐变边框
CustomBorder(
gradientBuilder: (progress) => const RadialGradient(colors: [
Colors.orange,
Colors.yellowAccent,
Colors.orangeAccent,
]),
size: const Size(98, 98),
dashPattern: const [5, 10],
strokeCap: StrokeCap.round,
strokeJoin: StrokeJoin.round,
strokeWidth: 3,
path: ObjectPath.boneStar(const Size(98, 98)),
),
],
),
),
);
}
}
更多关于Flutter自定义边框插件custom_border的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义边框插件custom_border的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter中使用自定义边框插件custom_border的代码示例。为了演示这个插件的使用，我们假设你已经将custom_border添加到了你的pubspec.yaml文件中。
首先，确保你的pubspec.yaml文件中包含以下依赖项：
dependencies:
flutter:
sdk: flutter
custom_border: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get来安装依赖。
接下来，我们来看一个具体的代码示例，展示如何使用custom_border插件来创建一个具有自定义边框的容器。
import 'package:flutter/material.dart';
import 'package:custom_border/custom_border.dart'; // 导入custom_border插件
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Border Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Custom Border Demo'),
),
body: Center(
child: CustomBorderContainer(
decoration: BoxDecoration(
color: Colors.white,
),
border: CustomBorder.all(
color: Colors.blue,
width: 5.0,
style: BorderStyle.solid,
),
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
child: Text(
'Hello, Custom Border!',
style: TextStyle(fontSize: 24, color: Colors.black),
),
),
),
),
),
);
}
}
// 假设custom_border插件没有提供直接的CustomBorderContainer，我们需要自己封装一个
class CustomBorderContainer extends StatelessWidget {
final BoxDecoration decoration;
final CustomBorder border;
final Widget child;
const CustomBorderContainer({
Key? key,
required this.decoration,
required this.border,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
// 使用Container并结合decoration和自定义的paint逻辑来绘制边框
return Container(
decoration: BoxDecoration(
borderRadius: border.borderRadius, // 如果custom_border支持borderRadius的话
boxShadow: [ // 这里可以添加一些阴影效果来模拟边框，但这并不是真正的边框
BoxShadow(
color: border.color!.withOpacity(0.5),
spreadRadius: border.width,
blurRadius: 0,
offset: Offset(0, 0),
),
],
),
child: CustomPaint(
painter: CustomBorderPainter(border: border),
child: DecoratedBox(
decoration: decoration,
child: child,
),
),
);
}
}
// 自定义Painter来绘制边框
class CustomBorderPainter extends CustomPainter {
final CustomBorder border;
CustomBorderPainter({required this.border});
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint()
..color = border.color!
..strokeWidth = border.width
..style = PaintingStyle.stroke;
// 绘制矩形边框（这里假设是矩形，根据需求可以调整）
final Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
canvas.drawRect(rect, paint);
// 如果需要圆角，可以使用RRect
// final RRect rrect = RRect.fromRectAndCorners(rect, ...);
// canvas.drawRRect(rrect, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return oldDelegate != this;
}
}
注意：上面的代码做了一些假设，因为custom_border插件的具体API可能与我这里的示例不完全匹配。通常，插件会提供一个更直接的方式来应用自定义边框，而不需要手动绘制。然而，上面的代码展示了一个如何结合Container和CustomPaint来模拟自定义边框的方法。
如果custom_border插件有更直接的API，你应该参考其官方文档来调整代码。例如，如果插件提供了一个CustomBorder widget，你可能只需要直接使用它而不是上面的CustomBorderContainer和CustomBorderPainter。
确保查看custom_border插件的README文件或官方文档，以获取最新的使用指南和API参考。
