https://github.com/dartoos-dev/eo_color
An elegant, object-oriented implementation of the Material Design color palettes and swatches.
https://github.com/dartoos-dev/eo_color
accented-colors color color-palette color-palettes color-swatch color-swatches eo-color flutter greys material material-design swatches
Last synced: 9 months ago
JSON representation
An elegant, object-oriented implementation of the Material Design color palettes and swatches.
- Host: GitHub
- URL: https://github.com/dartoos-dev/eo_color
- Owner: dartoos-dev
- License: mit
- Created: 2021-05-12T21:28:06.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-26T13:29:30.000Z (almost 2 years ago)
- Last Synced: 2024-11-28T17:02:21.897Z (over 1 year ago)
- Topics: accented-colors, color, color-palette, color-palettes, color-swatch, color-swatches, eo-color, flutter, greys, material, material-design, swatches
- Language: Dart
- Homepage:
- Size: 410 KB
- Stars: 7
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.elegantobjects.org)
[](https://www.rultor.com/p/dartoos-dev/eo_color)
[](https://pub.dev/packages/eo_color)
[](https://github.com/dartoos-dev/eo_color/blob/master/LICENSE)
[](https://github.com/dartoos-dev/eo_color/actions/)
[](https://codecov.io/gh/dartoos-dev/eo_color)
[](https://www.codefactor.io/repository/github/rafamizes/eo_color)
[](https://pub.dev/packages/lint)
[](https://hitsofcode.com/github/dartoos-dev/eo_color/view?branch=master)
## Contents
- [Overview](#overview)
- [Getting Started](#getting-started)
- [Palette interface](#palette-interface)
- [Numeric indexes X Named constructors](#numeric-indexes-vs-named-constructors)
- [Swatch interface](#swatch-interface)
- [Swatch in action](#swatch-in-action)
- [Gradient interface](#gradient-interface)
- [Demo application](#demo-application)
- [Contribute](#contribute)
- [References](#references)
## Overview
**EO-Color** is an **E**legant, **O**bject-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](https://pub.dev/documentation/eo_color/latest/palettes/palettes-library.html)
## 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](https://pub.dev/documentation/eo_color/latest/palettes/Palette-class.html)
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:**
```dart
/// Builds a bluish container.
@override
Widget build(BuildContext context) {
return Container(color: const Blue().color);
}
```
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](https://pub.dev/documentation/eo_color/latest/palettes/palettes-library.html)
### 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](https://pub.dev/documentation/eo_color/latest/swatches/Swatch-class.html)
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` 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:
```dart
/// a color gradient of 10 shades of red.
final Iterable theReds = Reds().colors;
```
For a complete list of color swatches:
- [swatches](https://pub.dev/documentation/eo_color/latest/swatches/swatches-library.html)
### 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.
```dart
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),
),
),
);
}
}
```
## 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](https://pub.dev/documentation/eo_color/latest/swatches/Swatch-class.html)
interface retrieves an `iterable` object, subclasses of
[Gradient](https://pub.dev/documentation/eo_color/latest/gradients/Gradient-class.html)
retrieves a `List`, which makes them better suited for dealing with
Flutter's gradient APIs — these APIs almost always expects a `List`
object as the parameter rather than an `Iterable` object.
For Material Design color gradients, use the
[GradOf](https://pub.dev/documentation/eo_color/latest/gradients/GradOf-class.html)
class, which in turn implements the
[Gradient](https://pub.dev/documentation/eo_color/latest/gradients/Gradient-class.html)
interface. Another example of a `Gradient` implementation is the abstract class
`GradientImmut`, which retrieves immutable `List` objects.
For a complete list of gradients:
- [gradients
library](https://pub.dev/documentation/eo_color/latest/gradients/gradients-library.html)
## 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:
```shell
git clone https://github.com/dartoos-dev/eo_color.git
cd eo_color/example/
flutter run -d chrome
```
This should launch the demo application on Chrome in debug mode.
## Contribute
Contributors are welcome!
1. Open an issue regarding an improvement, a bug you noticed, or ask to be
assigned to an existing one.
2. If the issue is confirmed, fork the repository, do the changes on a separate
branch and make a _Pull Request_.
3. After review and acceptance, the _Pull Request_ is merged and closed.
Make sure the command below **passes** before making a Pull Request.
```shell
flutter analyze && flutter test
```
## References
- [material design color palette](https://material.io/archive/guidelines/style/color.html#color-color-palette).
- [color-gradient](https://en.wikipedia.org/wiki/Color_gradient)