LoginSignup
3
2

More than 3 years have passed since last update.

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

Posted at

やりたいこと

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

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;
  }
}
3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2