Advertisements
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});
@override
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);
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
canvas.save();
canvas.translate(
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) +
BASELINE_SHIFT;
canvas.translate(v, -v);
canvas.rotate(0.785398); // 45 degrees
textPainter.paint(canvas, Offset.zero);
canvas.restore();
}
Paint getBadgePaint() => Paint()
..isAntiAlias = true
..color = badgeColor;
Path buildBadgePath() => Path.combine(
PathOperation.difference,
Path()
..addRRect(RRect.fromLTRBAndCorners(0, 0, badgeSize, badgeSize,
topRight: const Radius.circular(CORNER_RADIUS))),
Path()
..lineTo(0, badgeSize)
..lineTo(badgeSize, badgeSize)
..close());
}
Then use it in Ui like below
Card(
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