如何创建自定义形状，Flutter中带圆角的四边形

Question

如何在Flutter中创建自定义形状（带圆角的四边形）？ 它应该看起来与图像类似。 有没有办法绘制每个顶点，然后指定角的半径？

Answer 1

对于任何自定义形状，您都可以使用CustomPainter。这使您可以访问丰富的Canvas绘图API，您可以在其中绘制形状，文本，线条，渐变等等。您需要计算线条和曲线以绘制四边形。 （如果您可以访问矢量绘图包，则可以从中获取曲线参数，否则只需进行实验（最好使用绝对坐标，而不是相对于手工操作）。）

这是一个这样的小工具的模板 - 请注意，这里的数字是无稽之谈 - 他们在那里你会告诉你要在哪里填写什么。

final Path quadPath = new Path()
  ..moveTo(123.0, 12.2)
  ..relativeLineTo(1.1, -0.2)
  ..relativeCubicTo(4.2, -0.6, 12.1, 1.3, 3.2, 3.1)
  // etc all the way around
  ..close();

class LogoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      width: 350.0,
      height: 240.0,
      child: new CustomPaint(
        painter: new LogoPainter(),
      ),
    );
  }
}

class LogoPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = Colors.blue
      ..strokeWidth = 0.0;

    canvas.drawPath(quadPath, paint);

    paint.color = Colors.blue[600];
    canvas.drawCircle(new Offset(123.4, 56.7), 12.0, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}