Containerの形を変形するやり方いろいろメモ

やりたいこと

下記のようなラベルを作りたい。

CustomPaintを使ったやりかた

main.dart

Container(
  child: CustomPaint(
    painter: _TrianglePainter(),
    child: Container(
      padding: EdgeInsets.all(5),
      child: Text(
        "Label One",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
),

class _TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();

    paint.color = Colors.blue;
    var path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width + 15, size.height / 2);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.lineTo(0, 0);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

ShapeDecorationを使った例

main.dart

Container(
  padding: EdgeInsets.all(5),
  child: Text("Label Two", style: TextStyle(color: Colors.white)),
  decoration: ShapeDecoration(
    color: Colors.deepOrange,
    shape: _TagShape(),
))

class _TagShape extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions {
    return const EdgeInsets.only();
  }

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return getOuterPath(rect, textDirection: textDirection);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    return Path()
      ..moveTo(rect.left, rect.top)
      ..lineTo(rect.left, rect.bottom)
      ..lineTo(rect.right, rect.bottom)
      ..lineTo(rect.right + 15, rect.top + rect.height / 2)
      ..lineTo(rect.right, rect.top)
      ..lineTo(rect.left, rect.top)
      ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  @override
  ShapeBorder scale(double t) {
    return null;
  }
}