rotated_corner_decoration

Description:

rotated corner decoration

Pay attention! #
If you need a regular (not rotated) text at the corner of widgets please consider to use Stack with Containers and Text widgets.
This package was developed to provide auto rotation of TextSpans.
Example #
Take a look at the provided example application for how to use the CornerDecoration.
How to use #

Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Color(0xffffd700),
badgeSize: Size(16, 16),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.red,
spanBaselineShift: 4,
badgeSize: Size(64, 64),
badgeCornerRadius: Radius.circular(8),
badgePosition: BadgePosition.topStart,
textSpan: TextSpan(
text: 'OMG',
style: TextStyle(
color: Colors.white,
fontSize: 12,
letterSpacing: 1,
fontWeight: FontWeight.bold,
shadows: [
BoxShadow(color: Colors.yellowAccent, blurRadius: 8),
],
),
),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.blue,
badgeSize: Size(64, 64),
textSpan: TextSpan(
text: 'Multiline\nbadge',
style: TextStyle(fontSize: 10),
),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.black87,
badgeSize: Size(64, 64),
spanBaselineShift: 2,
textSpan: TextSpan(
children: [
TextSpan(
text: 'LOREM\n',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.redAccent,
),
),
TextSpan(
text: 'IPSUM',
style: TextStyle(
fontSize: 7,
fontStyle: FontStyle.italic,
letterSpacing: 5,
color: Colors.yellow,
),
),
],
),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.brown,
badgeSize: Size(112, 56),
textSpan: TextSpan(
text: 'WEIRD BADGE',
style: TextStyle(fontSize: 10),
),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.blueGrey,
badgeSize: Size(64, 64),
textSpan: TextSpan(
text: 'WOW',
style: TextStyle(fontSize: 10),
),
spanHorizontalOffset: -12,
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.green,
badgeSize: Size(64, 64),
textSpan: TextSpan(
text: 'SHIFT 1',
style: TextStyle(fontSize: 10, backgroundColor: Colors.black),
),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.green,
badgeSize: Size(64, 64),
spanBaselineShift: 3,
textSpan: TextSpan(
text: 'SHIFT 4',
style: TextStyle(fontSize: 10, backgroundColor: Colors.black),
),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withGradient(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.blue, Colors.lightGreenAccent],
),
badgeSize: Size(64, 64),
),
decoration: RotatedCornerDecoration.withGradient(
badgePosition: BadgePosition.topStart,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
stops: [0, 0.5, 1],
colors: [
Colors.purpleAccent,
Colors.amber,
Colors.blue,
],
),
badgeSize: Size(64, 64),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withGradient(
gradient: RadialGradient(
center: Alignment.topRight,
radius: 1.5,
stops: const [0, 0.25, 0.5],
colors: [
Colors.redAccent,
Colors.redAccent.withOpacity(0.5),
Colors.redAccent.withOpacity(0),
],
),
badgeSize: const Size(64, 64),
),
decoration: RotatedCornerDecoration.withGradient(
badgePosition: BadgePosition.topStart,
gradient: SweepGradient(
center: const FractionalOffset(0.27, -0.65),
colors: List.generate(360, _generator),
),
badgeSize: const Size(64, 64),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.lightBlue,
badgeSize: Size(64, 64),
badgeShadow: BadgeShadow(color: Colors.black, elevation: 4),
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.indigo,
badgeSize: Size(64, 64),
badgePosition: BadgePosition.bottomStart,
textDirection: TextDirection.ltr,
),
),
copied to clipboard


Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.indigo,
badgeSize: Size(64, 64),
badgePosition: BadgePosition.bottomStart,
textDirection: TextDirection.rtl,
),
),
copied to clipboard

EXPERIMENTAL FEATURE!
use isEmoji: true to disable span rotating
you can shift span position with spanHorizontalOffset and TextStyle.height parameters

Container(
foregroundDecoration: RotatedCornerDecoration.withColor(
color: Colors.purple,
badgeSize: Size(64, 64),
isEmoji: true,
textSpan: TextSpan(
text: '🤮',
style: TextStyle(fontSize: 20, height: 1.7),
),
),
),
copied to clipboard