tinycolor icon indicating copy to clipboard operation
tinycolor copied to clipboard

Making utility as Color Extension shortcuts

Open Skquark opened this issue 5 years ago • 5 comments

Needed this tool, tried a few of the other dart color addons and this did the trick. I got inspired with the new extension method in Dart that made it really easy to extend the Color object with all of your functions, and it's so nice to work with it. Wanted to share my code, it's so simple and pretty I'd recommend adding it as color_extensions.dart:

extension TinyColors on Color {
  /// Lighten the color a given amount, from 0 to 100. Providing 100 will always return white.
  Color lighten([int amount = 10]) => TinyColor(this).lighten(amount).color;
  /// Brighten the color a given amount, from 0 to 100.
  Color brighten([int amount = 10]) => TinyColor(this).brighten(amount).color;
  /// Darken the color a given amount, from 0 to 100. Providing 100 will always return black.
  Color darken([int amount = 10]) => TinyColor(this).darken(amount).color;
  /// Mix the color with pure white, from 0 to 100. Providing 0 will do nothing, providing 100 will always return white.
  Color tint([int amount = 10]) => TinyColor(this).tint(amount).color;
  /// Mix the color with pure black, from 0 to 100. Providing 0 will do nothing, providing 100 will always return black.
  Color shade([int amount = 10]) => TinyColor(this).shade(amount).color;
  /// Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling greyscale.
  Color desaturate([int amount = 10]) => TinyColor(this).desaturate(amount).color;
  /// Saturate the color a given amount, from 0 to 100.
  Color saturate([int amount = 10]) => TinyColor(this).saturate(amount).color;
  /// Completely desaturates a color into greyscale. Same as calling desaturate(100).
  Color get greyscale => TinyColor(this).greyscale().color;
  /// Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before).
  Color spin([double amount = 0]) => TinyColor(this).spin(amount).color;
  /// Returns the perceived brightness of a color, from 0-255, as defined by Web Content Accessibility Guidelines (Version 1.0).Returns the perceived brightness of a color, from 0-255, as defined by Web Content Accessibility Guidelines (Version 1.0).
  double get brightness => TinyColor(this).getBrightness();
  /// Return the perceived luminance of a color, a shorthand for flutter Color.computeLuminance
  double get luminance => TinyColor(this).getLuminance();
  /// Return a boolean indicating whether the color's perceived brightness is light.
  bool get isLight => TinyColor(this).isLight();
  /// Return a boolean indicating whether the color's perceived brightness is dark.
  bool get isDark => TinyColor(this).isDark();
  /// Returns the Complimentary Color for dynamic matching
  Color get compliment => TinyColor(this).complement().color;
  /// Blends the color with another color a given amount, from 0 - 100, default 50.
  Color mix(Color toColor, [int amount = 50]) => TinyColor(this).mix(input: toColor, amount: amount).color;
  /// Converts standard Color to TinyColor object
  TinyColor toTinyColor() => TinyColor(this);
  HSVColor toHsv() => TinyColor(this).toHsv();
  HslColor toHsl() => TinyColor(this).toHsl();
}

So now I can call it like Colors.yellow.shade(20), Colors.blue.shade700.compliment, Colors.red.darken(80), Colors.green.mix(Colors.blue.spin(33), 30), and all the other TinyColor features and make it look built into Flutter's Color widget. The only requirement for the extension on usage is setting environment in pubspec to sdk: ">=2.6.0 <3.0.0" Thanks, hope other people find this useful, it makes intuitive sense, I'm glad they added this ability to the language..

Skquark avatar Jan 21 '20 12:01 Skquark

Maybe make a pull request to add this.

neilweber avatar Jan 22 '20 21:01 neilweber

@Skquark if you make a PR I will merge it

mendieta avatar Jan 22 '20 21:01 mendieta

Alright, took the time to integrate it in and update the documents, and it makes this nice 2 year old utility feel brand new again.. Looking for more excuses to use it in my app where I've made my theme fully skinnable, and this lets me get more creative with the custom styling. Fun stuff...

Only other feature I can think to request is more color harmonizing utilities like the color wheels on color.adobe... Could be easy to make the Analogous, Triad, Compound etc using the .spin with the right degrees, but haven't played yet. Thank.

Skquark avatar Jan 24 '20 10:01 Skquark

Thank you @Skquark , I will upload it to pub in the next day.

mendieta avatar Jan 28 '20 02:01 mendieta

@mendieta Guessing you've been busy, is there any chance of getting the upload to pub soon?

JamesMcIntosh avatar Feb 13 '20 09:02 JamesMcIntosh