Flutter Container triangle design

I have to create this green container. How can I achieve that?


I tried border-radius but I can’t.

>Solution :

Use like below

First create class for decoration

class BadgeDecoration extends Decoration {
  final Color? badgeColor;
  final double? badgeSize;
  final TextSpan? textSpan;

  const BadgeDecoration(
      {@required this.badgeColor = Colors.black,
      @required this.badgeSize,
      @required this.textSpan});

  BoxPainter createBoxPainter([VoidCallback? onChanged]) =>
      _BadgePainter(badgeColor!, badgeSize!, textSpan!);

class _BadgePainter extends BoxPainter {
  static const double BASELINE_SHIFT = 1;
  static const double CORNER_RADIUS = 15;
  final Color badgeColor;
  final double badgeSize;
  final TextSpan textSpan;

  _BadgePainter(this.badgeColor, this.badgeSize, this.textSpan);

  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
        offset.dx + configuration.size!.width - badgeSize, offset.dy);
    canvas.drawPath(buildBadgePath(), getBadgePaint());
    // draw text
    final hyp = math.sqrt(badgeSize * badgeSize + badgeSize * badgeSize);
    final textPainter = TextPainter(
        text: textSpan,
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center);
    textPainter.layout(minWidth: hyp, maxWidth: hyp);
    final halfHeight = textPainter.size.height / 2;
    final v = math.sqrt(halfHeight * halfHeight + halfHeight * halfHeight) +
    canvas.translate(v, -v);
    canvas.rotate(0.785398); // 45 degrees
    textPainter.paint(canvas, Offset.zero);

  Paint getBadgePaint() => Paint()
    ..isAntiAlias = true
    ..color = badgeColor;

  Path buildBadgePath() => Path.combine(
        ..addRRect(RRect.fromLTRBAndCorners(0, 0, badgeSize, badgeSize,
            topRight: const Radius.circular(CORNER_RADIUS))),
        ..lineTo(0, badgeSize)
        ..lineTo(badgeSize, badgeSize)

Then use it in Ui like below

          child: Container(
            width: 300,
            height: 200,
            padding: const EdgeInsets.all(16),
            foregroundDecoration: const BadgeDecoration(
              badgeColor: Colors.green,
              badgeSize: 70,
              textSpan: TextSpan(
                text: 'AWESOME',
                style: TextStyle(color: Colors.white, fontSize: 12),
            child: const Text(
                'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'),

Output will be

enter image description here

Leave a Reply