Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Making utility as Color Extension shortcuts #3

Open
Skquark opened this issue Jan 21, 2020 · 5 comments
Open

Making utility as Color Extension shortcuts #3

Skquark opened this issue Jan 21, 2020 · 5 comments

Comments

@Skquark
Copy link
Contributor

Skquark commented Jan 21, 2020

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

@neilweber
Copy link

Maybe make a pull request to add this.

@mendieta
Copy link
Member

@Skquark if you make a PR I will merge it

@Skquark
Copy link
Contributor Author

Skquark commented Jan 24, 2020

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.

@mendieta
Copy link
Member

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

@JamesMcIntosh
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants