Contents
- Overview
- Getting Started
- Palette interface
- Numeric indexes X Named constructors
- Swatch interface
- Swatch in action
- Gradient interface
- Demo application
- 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 a 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 lighter and darker shades.
- shades of grey lighter than the primary shade:
Grey.bitLighter(),Grey.lighter(),Grey.light(),Grey.veryLight(), orGrey.ultraLight()for the lightest shade of grey. - shades of grey darker than the primary shade:
Grey.bitDarker(),Grey.darker(),Grey.dark(), orGrey.veryDark()for the darkest shade.
With the exception of black and white, the same command patterns (light, lighter, dark, veryDark, etc.) also apply to the other colors.
Getting Started
Like any other object-oriented package, this one uses interfaces to define concepts such as color palette, color swatch, and color gradient. Therefore, the three main interfaces are Palette, Swatch, and Gradient.
Palette interface
It 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 via the color property.
For instance, the command Blue() retrieves the primary shade of blue and is equivalent to the Flutter command Colors.blue.shade500. Similarly, the command 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 class.
Code snippet:
/// 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:
Numeric indexes vs. Named constructors
The table below contains the relationship between the Material Design indices (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 the Amber, Green or Red classes.
- The "Accent" column refers to classes that represent accent colors such as the AmberAccent, GreenAccent or RedAccent classes.
- () is the default constructor, which in turn represents the primary shade of a color.
| 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
It 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 declaration Greys().colors will retrieve 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;
For a complete list of color 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),
),
),
);
}
}
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 Gradients 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 a parameter instead of an Iterable<Color> object.
An example of a Gradient implementation is the abstract class GradientImmu, which retrieves immutable List<Colors> objects.
For a complete list of gradients:
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
This should launch the demo application on Chrome in debug mode.
16 Jun 23, 2022
22 Sep 1, 2022
37 Jul 25, 2022
26 Nov 8, 2022
30 Oct 25, 2022
8 Feb 12, 2022
1.1k Dec 31, 2022
296 Jan 1, 2023
7 Nov 2, 2022
16 Nov 25, 2022