eo_color

Description:

eo color

Contents #

Overview
Getting Started
Palette interface
Numeric indexes X Named constructors
Swatch interface
Swatch in action
Gradient interface
Demo application
Contribute
References

Overview #
EO-Color is an Elegant, Object-oriented implementation of the
Material Design color palettes and swatches — as well as a color framework!
It is intended to be used as:

an alternative to Flutter's built-in colors.
a base framework for more specific color packages.

A key benefit of EO-Color is to improve the source code readability and
maintainability by providing declarative interfaces.
The use of obscure numeric indexes such as 100, 200…800, 900 to select the
shade of a color has been replaced by a more user-friendly approach: the use of
adverbs (ultra, very, bit, etc.) and adjectives (light, dark, etc.).
For example, to get the primary shade of grey, simply declare Grey().
Likewise, there are commands for retrieving shades of grey that are either
lighter or darker than the primary shade.

lighter shades: Grey.bitLighter(), Grey.lighter(), Grey.light(),
Grey.veryLight(), or Grey.ultraLight() for the lightest shade of grey.
darker shades: Grey.bitDarker(), Grey.darker(), Grey.dark(), or
Grey.veryDark() for the darkest shade.

With the exception of black and white, the same command patterns (light,
lighter, dark, etc.) also apply to all other
colors
Getting Started #
Like any other object-oriented package, this one uses interfaces to define
concepts such as the color palette, color swatch and color gradient; therefore,
the three main interfaces are Palette, Swatch and Gradient.
Palette interface #
The
Palette
interface represents color palettes from which a color can be selected.
Typically, subclasses of the Palette interface provide named constructors by
which the desired color is selected — to be retrieved later using the color
property.
For instance, the command Blue() retrieves the primary shade of blue, and it
is equivalent to the Flutter command Colors.blue.shade500. Similarly,
Blue.veryLight() is equivalent to Colors.blue.shade50; Blue.veryDark(), to
Colors.grey.shade900; and so on.
The code snippet below demonstrates how to build a bluish Flutter Container
widget using the Blue color class.
Code snippet:
/// Builds a bluish container.
@override
Widget build(BuildContext context) {
return Container(color: const Blue().color);
}
copied to clipboard
All Material Design colors — along with their respective accent-colors — have
been implemented.
For a complete list of colors with detailed information (hex codes, indexes,
opacity, etc.), see:

color-palettes-library

Numeric indexes vs. Named constructors #
The table below contains the relationship between the Material Design indexes
(100, 200…800, 900) and the named constructors of the color classes.

Note:

The "Normal" column refers to classes that represent non-accent colors
such as Amber, Green, Red, etc.
On the other hande, the "Accent" column refers to classes that represent
accent colors such as AmberAccent, GreenAccent, RedAccent, and so on.
Finally, "()" refers to the default constructor, which in turn
represents the primary shade of the color class it belongs to.






Index
Normal
Accent




50
ultraLight



100
veryLight
light


200
light
()


300
lighter



400
bitLighter
darker


500
()



600
bitDarker



700
darker
dark


800
dark



900
veryDark




Swatch interface #
The
Swatch
interface represents a collection of related colors such as:

shades of grey;
the color gradient of a brand;
a user's preferred colors.

Its single property colors retrieves several colors at once as an
Iterable<Color> object.
Except for the White and Black classes, there is always a corresponding
"plural" class for each color class — accent colors included — that implements
the Swatch interface. For example, the command Greys().colors retrieves 10
shades of grey; the higher the index, the darker the color.
For a red color gradient:
/// a color gradient of 10 shades of red.
final Iterable<Color> theReds = Reds().colors;
copied to clipboard
For a complete list of color swatches:

swatches

Swatch in action #
The following code provides a fully working example. It creates a rectangle
widget filled with a color gradient provided by the swatch instance.
import 'package:eo_color/swatches.dart';
import 'package:flutter/material.dart';

/// Rectangle filled with a gradient of ten shades of a Material Design color.
class RectGradient extends StatelessWidget {
/// Rectangle filled with the given color swatch.
const RectGradient(Swatch swatch, {Key? key})
: _swatch = swatch,
super(key: key);

/// Rectangle filled with ten shades of grey.
const RectGradient.grey({Key? key}) : this(const Greys(), key: key);

// Material Design color swatch.
final Swatch _swatch;

@override
Widget build(BuildContext context) {
return Container(
height: kToolbarHeight / 2,
decoration: BoxDecoration(
gradient: LinearGradient(
end: Alignment.bottomLeft,
begin: Alignment.topRight,
colors: _swatch.colors.toList(growable: false),
),
),
);
}
}
copied to clipboard
Gradient interface #
It represents a range of position-dependent colors, usually used to fill a
region. The colors produced by a gradient vary continuously with position,
producing smooth color transitions.
While the
Swatch
interface retrieves an iterable<Colors> object, subclasses of
Gradient
retrieves a List<Colors>, which makes them better suited for dealing with
Flutter's gradient APIs — these APIs almost always expects a List<Color>
object as the parameter rather than an Iterable<Color> object.
For Material Design color gradients, use the
GradOf
class, which in turn implements the
Gradient
interface. Another example of a Gradient implementation is the abstract class
GradientImmut, which retrieves immutable List<Colors> objects.
For a complete list of gradients:

gradients
library

Demo application #
The demo application provides a fully working example, focused on demonstrating
exactly three color palettes in action: BlueGrey, Grey, and Brown.
You can take the code in this demo and experiment with it.
To run the demo application:
git clone https://github.com/dartoos-dev/eo_color.git
cd eo_color/example/
flutter run -d chrome
copied to clipboard
This should launch the demo application on Chrome in debug mode.

Contribute #
Contributors are welcome!

Open an issue regarding an improvement, a bug you noticed, or ask to be
assigned to an existing one.
If the issue is confirmed, fork the repository, do the changes on a separate
branch and make a Pull Request.
After review and acceptance, the Pull Request is merged and closed.

Make sure the command below passes before making a Pull Request.
flutter analyze && flutter test
copied to clipboard
References #

material design color palette.
color-gradient

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter