在本文中，我们将绘制如下的弯曲虚线：

我想你已经熟悉了如何在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