在本文中，我们将绘制如下的弯曲虚线：
我想你已经熟悉了如何在Flutter中绘制自定义形状和线条。如果没有，你可以阅读我在这个主题上写的文章。
让我们开始创建我们的主文件：
main.dart
import 'package:custom_shape/pages/drawing_page.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Drawing Shapes",
home: DrawingPage(),
);
}
}
绘图将在DrawingPage课堂上进行：
drawing_page.dart
import 'package:curved_line/curve_painter.dart';
import 'package:flutter/material.dart';
class DrawingPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Curved Line"),
),
body: CustomPaint(
painter: CurvePainter(),
child: Container(),
),
);
}
}
像往常一样，我们的页面首先Scaffold有一个appBar和一个body设置为CustomPaint小部件实例的页面。
Container我使用的空（对于child属性）将扩展并填充整个屏幕，因此我们的大小canvas将与整个屏幕一样大（再次，如果你不明白为什么，请阅读我在这个主题上写的文章）。
这是CurvePainter类：
curve_painter.dart
import 'package:flutter/material.dart';
class CurvePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
我们将实现paint绘制曲线的方法。
要绘制贝塞尔线，我们需要四个点：起点，终点和两个控制点，如下图所示。移动控制点会改变曲线的斜率。您可以在此在线工具中使用控制点。
我们可以使用类Path的cubicTo方法绘制贝塞尔曲线：
void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)
使用控制点（x1，y1）和（x2，y2）添加从当前点到给定点（x3，y3）的曲线的三次贝塞尔曲线段。
如您所见，该cubicTo方法接受三个参数。其中两个是控制点，最后一个参数是终点。起点是您的笔已经位于画布上的位置。
不要忘记在画布坐标中，左上角是（0,0）点，右下角是（size.width，size.height）。因此，请尝试相应地调整四点：
curve_painter.dart
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Colors.lightBlue;
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 3;
var startPoint = Offset(0, size.height / 2);
var controlPoint1 = Offset(size.width / 4, size.height / 3);
var controlPoint2 = Offset(3 * size.width / 4, size.height / 3);
var endPoint = Offset(size.width, size.height / 2);
var path = Path();
path.moveTo(startPoint.dx, startPoint.dy);
path.cubicTo(controlPoint1.dx, controlPoint1.dy,
controlPoint2.dx, controlPoint2.dy,
endPoint.dx, endPoint.dy);
canvas.drawPath(path, paint);
}
请记住，paint对象就像我们的笔，我们将其颜色设置为蓝色，宽度设置为3。
我们用path对象描述了bezier路径。该moveTo方法已用于将笔移动到路径的起??点。然后我们调用cubicTo方法来定义控制点和终点。之后，我们使用该drawPath方法绘制了路径。尝试更改已定义点的x和y，并查看曲线形状如何变化：
虚线路径
为了将任何正常路径转换为虚线路径，幸运的是，可以在此处使用第三方包。它被称为路径绘图。
要使用此包，首先将其添加到pubspec.yml项目文件的依赖项部分（包版本当前为0.4.0）：
pubspec.yaml
dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 path_drawing: ^0.4.0
然后运行“flutter packages get”命令获取新包。
现在导入文件中的以下curve_painter.dart文件：
import 'package:path_drawing/path_drawing.dart';
并在绘制之前将其包装path在dashPath方法中：
curve_painter.dart
canvas.drawPath( dashPath( path, dashArray: CircularIntervalList<double>(<double>[15.0, 10.5]), ), paint, );
该dashPath方法有两个参数。第一个是您想要被破折的路径，第二个参数定义每个破折号的长度（15.0）以及每两个破折号（10.0）之间的空间长度。使用这两个数字进行播放，看看虚线是如何变化的。结果是：
好的伙计们，这就是今天的一切！
如果您想知道绘制这种线的用途是什么，您很快就会发现！在下一篇文章中，我将向您展示AnimationFlutter中的工作原理。我们将为餐馆应用程序实现以下动画：
GitHub上提供了本文的源代码。
谢谢阅读！
翻译自：https://medium.com/@meysam.mahfouzi/drawing-curved-dashed-lines-in-flutter-b5d0645b04c8