eo_color
EO-Color is an Elegant and Object-oriented implementation of the Material Design color palettes. It is intended to be used as:
- an alternative to the 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 a declarative interface.
The use of obscure numeric indexes such as 100, 200 ... 800, 900 to
select the shade of a color has been deliberately dropped in favour of a more
friendly approach: the use of adverbs (ultra, very, bit, etc) and
adjectives (light, dark, etc). For example, to get a light shade of grey,
simply declare Grey.light().
Getting Started
Like any object-oriented package, this one utilizes interfaces to define
concepts such as color palettes and swatches. Therefore, it is no surprise that
the two core interfaces are Palette and Swatch.
Palette interface
It represents color palettes from which a color can be picked. Tipically,
classes that implement Palette provide named constructors in which the desired
color is selected to be retrieved afterwards - via color property.
Material Design palette classes
These are classes whose name is the color they represent, such as "Grey". For
example: Grey() represents the primary grey color, equivalent to the Flutter's
cryptic Colors.grey.shade500; Grey.light() ≡ Colors.grey.shade200;
Grey.veryDark() ≡ Colors.grey.shade900; and so on.
Palettes in action
import 'package:eo_color/palettes.dart';
import 'package:flutter/material.dart';
class Greyish extends StatelessWidget {
static const _light = Grey.light();
@override
Widget build(BuildContext context) {
return Container(
color: _light.color,
);
}
}
Equivalence between the Material Design indexes and constructors
- Note:
- The "Normal" column refers to classes that represent non-accented colors: Amber, Green, Red, etc.
- The "Accent" column refers to classes that represent accented colors: AmberAccent, GreenAccent, RedAccent, etc.
| 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 |
Supported palette colors
Swatch interface
A color swatch is a collection of related colors, such as the colors of the
rainbow, shades of grey, etc. Its single property colors retrieves several
colors at once as an Iterable<Color>. For instance, Greys().colors retrieves
ten shades of grey - as defined by the Material Design standard.
Color Swatch Classes
These are classes whose name is the plural of a color, such as "Greys". For
example: Greys().colors retrieves an Iterable<Color> containing ten shades
of grey; the higher the index, the darker the color.
Swatch in action
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),
),
),
);
}
}
Supported color swatches
Showcase application
The showcase 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 showcase and experiment with it.
To run the showcase application:
git clone https://github.com/dartoos-dev/eo_color.git
cd eo_color/example/
flutter run -d chrome
This should launch the showcase application on Chrome in debug mode.
