eo_color 2.2.3

An elegant, object-oriented implementation of the color palettes and swatches of the Material Design standard; 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
• 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);
}

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;

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

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.

  flutter analyze && flutter test

References

• material design color palette.
• color-gradient