Created
September 14, 2019 05:43
-
-
Save yakubpashask/510fed8113232259f4942d4ec56d615d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'dart:math' as math; | |
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
debugShowCheckedModeBanner: false, | |
home: Scaffold( | |
appBar: AppBar(title: Text('I\'m awesome')), | |
body: Column( | |
children: <Widget>[ | |
Card( | |
child: Container( | |
width: 300, | |
height: 200, | |
padding: const EdgeInsets.all(16), | |
child: Text('Lorem Ipsum is simply dummy text of the printing and typesetting industry.'), | |
foregroundDecoration: const BadgeDecoration( | |
badgeColor: Colors.green, | |
badgeSize: 70, | |
textSpan: TextSpan( | |
text: 'AWESOME', | |
style: TextStyle(color: Colors.white, fontSize: 12), | |
), | |
), | |
), | |
), | |
], | |
), | |
), | |
); | |
} | |
} | |
class BadgeDecoration extends Decoration { | |
final Color badgeColor; | |
final double badgeSize; | |
final TextSpan textSpan; | |
const BadgeDecoration({@required this.badgeColor, @required this.badgeSize, @required this.textSpan}); | |
@override | |
BoxPainter createBoxPainter([onChanged]) => _BadgePainter(badgeColor, badgeSize, textSpan); | |
} | |
class _BadgePainter extends BoxPainter { | |
static const double BASELINE_SHIFT = 1; | |
static const double CORNER_RADIUS = 4; | |
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: Radius.circular(CORNER_RADIUS))), | |
Path() | |
..lineTo(0, badgeSize) | |
..lineTo(badgeSize, badgeSize) | |
..close()); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment