rotated_corner_decoration 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 68

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. #

all

Example #

Take a look at the provided example application for how to use the CornerDecoration.

How to use #

demo_badges01

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    child: const Text('Apply badge colors and font styles'),
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.blueGrey,
      geometry: const BadgeGeometry(width: 48, height: 48),
      textSpan: const TextSpan(
        text: 'OMG',
        style: TextStyle(
          fontSize: 10,
          letterSpacing: 1,
          fontWeight: FontWeight.bold,
          shadows: [BoxShadow(color: Colors.yellowAccent, blurRadius: 4)],
        ),
      ),
    ),
  ),
),

demo_badges02

Padding(
  padding: const EdgeInsets.all(4),
  child: Material(
    elevation: 1,
    child: Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [BoxShadow(color: Colors.black26)],
      ),
      child: const Text('cornerRadius=0', style: TextStyle(fontSize: 12)),
      foregroundDecoration: const RotatedCornerDecoration(
        color: Colors.redAccent,
        geometry: const BadgeGeometry(width: 30, height: 30, cornerRadius: 0),
      ),
    ),
  ),
),

demo_badges03

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  child: Container(
    padding: const EdgeInsets.all(12),
    child: const Text('cornerRadius=16', style: TextStyle(fontSize: 12)),
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.redAccent,
      geometry: const BadgeGeometry(width: 32, height: 32, cornerRadius: 16),
    ),
  ),
),

demo_badges04

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    alignment: Alignment.bottomLeft,
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.green,
      geometry: const BadgeGeometry(width: 90, height: 90),
      textSpan: const TextSpan(
        text: 'DEFAULT',
        style: TextStyle(fontSize: 10, backgroundColor: Colors.black),
      ),
    ),
    child: const Text('By default baselineShift=1'),
  ),
),

demo_badges05

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    alignment: Alignment.bottomLeft,
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.green,
      geometry: const BadgeGeometry(width: 90, height: 90),
      textSpan: const TextSpan(
        text: 'BASELINE SHIFT 0',
        style: TextStyle(fontSize: 10, backgroundColor: Colors.black),
      ),
      labelInsets: const LabelInsets(baselineShift: 0),
    ),
    child: const Text('But it can be changed'),
  ),
),

demo_badges06

Card(
  child: Container(
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.green,
      geometry: const BadgeGeometry(width: 90, height: 90),
      textSpan: const TextSpan(
        text: 'BASELINE SHIFT 3',
        style: TextStyle(fontSize: 10, backgroundColor: Colors.black),
      ),
      labelInsets: const LabelInsets(baselineShift: 3),
    ),
  ),
),

demo_badges07

Card(
  child: Container(
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.blue,
      geometry: const BadgeGeometry(width: 64, height: 64),
      textSpan: const TextSpan(
        text: 'Multiline\nbadge',
        style: TextStyle(fontSize: 10),
      ),
    ),
  ),
),

demo_badges08

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    child: const Text('Just empty badge on foreground', style: TextStyle(fontSize: 12)),
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.purpleAccent,
      geometry: const BadgeGeometry(width: 48, height: 48),
    ),
  ),
),

demo_badges09

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    child: const Text('Just empty badge on background', style: TextStyle(fontSize: 12)),
    decoration: const RotatedCornerDecoration(
      color: Colors.orange,
      geometry: const BadgeGeometry(width: 48, height: 48),
    ),
  ),
),

demo_badges10

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    alignment: Alignment.bottomLeft,
    child: const Text('Text Span Example'),
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.black87,
      geometry: const BadgeGeometry(width: 64, height: 64),
      textSpan: const 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),
          ),
        ],
      ),
      labelInsets: const LabelInsets(baselineShift: 2),
    ),
  ),
),

demo_badges11

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    alignment: Alignment.bottomLeft,
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.brown,
      geometry: const BadgeGeometry(width: 120, height: 50),
      textSpan: const TextSpan(
        text: 'WEIRD BADGE',
        style: TextStyle(fontSize: 10),
      ),
    ),
  ),
),

demo_badges12

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    alignment: Alignment.bottomLeft,
    child: const Text(
      'Extra space before text OR after.\nNot both!\n\nlabel inset start=8',
      style: TextStyle(fontSize: 12),
    ),
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.blueGrey,
      geometry: const BadgeGeometry(width: 48, height: 48),
      textSpan: const TextSpan(text: 'WOW', style: TextStyle(fontSize: 10)),
      labelInsets: const LabelInsets(start: 8),
    ),
  ),
),

demo_badges13

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    alignment: Alignment.bottomLeft,
    child: const Text('Apply any gradients instead of colors '),
    foregroundDecoration: const RotatedCornerDecoration(
      gradient: LinearGradient(
        begin: Alignment.topRight,
        end: Alignment.bottomLeft,
        stops: [0, 0.6],
        colors: [Colors.blue, Colors.greenAccent],
      ),
      geometry: const BadgeGeometry(width: 48, height: 48),
      labelInsets: const LabelInsets(baselineShift: 2),
    ),
  ),
),

demo_badges14

Card(
  child: Container(
    foregroundDecoration: const RotatedCornerDecoration(
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [Colors.purpleAccent, Colors.blue],
      ),
      geometry: const BadgeGeometry(width: 48, height: 48),
    ),
  ),
),

demo_badges15

Card(
  child: Container(
    foregroundDecoration: RotatedCornerDecoration(
      gradient: RadialGradient(
        center: Alignment.topRight,
        radius: 1.5,
        stops: [0.1, 0.5],
        colors: [Colors.redAccent, Colors.redAccent.withAlpha(0)],
      ),
      geometry: const BadgeGeometry(width: 48, height: 48),
    ),
  ),
),

demo_badges16

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    alignment: Alignment.bottomLeft,
    child: const Text('Add shadow with color and elevation'),
    foregroundDecoration: const RotatedCornerDecoration(
        color: Colors.yellow,
        geometry: const BadgeGeometry(width: 48, height: 48),
        badgeShadow: const BadgeShadow(color: Colors.black87, elevation: 1.5)),
  ),
),

demo_badges17

Card(
  child: Container(
    padding: const EdgeInsets.all(12),
    alignment: Alignment.bottomRight,
    child: const Text('Apply badge alignment', textAlign: TextAlign.end),
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.teal,
      geometry: const BadgeGeometry(width: 48, height: 48, alignment: BadgeAlignment.bottomLeft),
      textSpan: TextSpan(text: 'o, rly?', style: TextStyle(fontSize: 10, letterSpacing: 0.5)),
      labelInsets: LabelInsets(baselineShift: 3),
    ),
  ),
),

demo_badges18

Card(
  child: Container(
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.lightGreen,
      geometry: const BadgeGeometry(width: 48, height: 48, alignment: BadgeAlignment.bottomRight),
      textSpan: TextSpan(text: 'WHY?', style: TextStyle(fontSize: 12)),
      labelInsets: LabelInsets(baselineShift: 3, start: 1),
    ),
  ),
),

demo_badges19

Card(
  child: Container(
    foregroundDecoration: const RotatedCornerDecoration(
      color: Colors.pinkAccent,
      geometry: const BadgeGeometry(width: 48, height: 48, alignment: BadgeAlignment.topLeft),
      textSpan: TextSpan(text: 'OK', style: TextStyle(fontSize: 12)),
      labelInsets: LabelInsets(baselineShift: 3, start: 1),
    ),
  ),
),

[1.0.0] - 10.09.2019

  • Release version.

[0.0.2+2] - 10.09.2019

  • Initial Open Source release.

example/README.md

example #

How to use RotatedCornerDecoration

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  rotated_corner_decoration: ^1.0.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:rotated_corner_decoration/rotated_corner_decoration.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
35
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
68
Learn more about scoring.

We analyzed this package on Oct 9, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/rotated_corner_decoration.dart.

Run flutter format to format lib/rotated_corner_decoration.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test