eo_color 1.1.8

An elegant, object-oriented implementation of Material Design's color palettes and swatches; an alternative to Flutter's built-in colors.

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 the Material Design grey color, simply declare Grey().

For shades of grey lighter than the primary shade: Grey.bitLighter(), Grey.lighter(), Grey.light(), Grey.veryLight(), or Grey.ultraLight() for the lightest shade of grey.

For darker shades of grey: Grey.bitDarker(), Grey.darker(), Grey.dark(), or Grey.darkest() for the darkest shade.

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 in which the desired color is selected to be retrieved afterwards via the color property.

For example, the Blue() command retrieves the primary shade of the Material Design blue and is equivalent to the cryptic Flutter command Colors.blue.shade500. Likewise, the named constructor Blue.veryLight() is equivalent to Colors.blue.shade50; Blue.veryDark() is equivalent 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:

• color-palettes-library

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 unaccented 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 a primary color shade.

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:

• 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:

• gradient

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.

References

• material design color palette.
• color-gradient