如何在 Flutter CustomPainter 中创建带边框的圆形气泡？

Question

以下为参考。 如何使用 CustomPainter 创建仅边框的气泡？

但我想要实现的是圆圈的气球。图像如下。

如果按如下方式实现，它们将被分离并绘制，如示例所示。

final path = Path();

// create circle
final center = Offset(size.width / 2, size.height / 2 - 10);
final radius = size.width / 2;
path.addOval(Rect.fromCircle(center: center, radius: radius));

// create tip
path.moveTo(center.dx - 10, center.dy + radius);
path.lineTo(center.dx, center.dy + radius + 12);
path.lineTo(center.dx + 10, center.dy + radius);
path.close();

// draw path
canvas.drawPath(path, paint);
canvas.drawPath(path, borderPaint);

这可能是一个基本问题，但请回答。

Answer 1

使用 Stack 和 CustomPainter 尝试以下代码。根据您的要求更改偏移值。

          Stack(
              alignment: Alignment.center,
              children: [
                Column(
                  children: [
                    Container(
                      width: 200,
                      height: 200,
                      decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(100),
                      ),
                    ),
                    Transform.translate(
                        offset: Offset(0, -8), child: VShape(50, Colors.red)),
                  ],
                ),
                Transform.translate(
                  offset: Offset(0, -5),
                  child: Column(
                    children: [
                      Container(
                        width: 170,
                        height: 170,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(100),
                        ),
                      ),
                      Transform.translate(
                          offset: Offset(0, -8),
                          child: VShape(40, Colors.white)),
                    ],
                  ),
                )
              ],
            ),

这是“V”形 CustomPainter 类

class VShape extends StatelessWidget {
  double size = 0;
  Color color;
  VShape(this.size, this.color);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(size, size), // Set the size of the canvas
      painter: VShapePainter(color),
    );
  }
}

class VShapePainter extends CustomPainter {
  Color color;
  VShapePainter(this.color);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color // Color of the reverse V shape
      ..style = PaintingStyle.fill;

    // Create the path for the reverse V shape
    Path path = Path();
    path.moveTo(0, 0); // Top left point
    path.lineTo(size.width / 2, size.height); // Bottom point
    path.lineTo(size.width, 0); // Top right point
    path.close(); // Close the path

    canvas.drawPath(path, paint); // Draw the path
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false; // No need to repaint unless something changes
  }
}