eo_color 1.1.0

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

Overview

EO-Color is an Elegant, 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 a shade of a color has been replaced by 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, you simply declare Grey.light(); for a darker one, Grey.dark(); and so on.

Contents

• Overview
• Getting Started
• Palette interface
• Numeric indexes X Named constructors
• Swatch interface
• Swatch in action
• Gradient interface
• Demo application
• References

Getting Started

Like any object-oriented package, this one utilizes interfaces to define concepts such as color palette, color swatch, and color gradient. Therefore, it is no surprise that the three core interfaces are Palette, Swatch, and Gradient.

Palette interface

It represents color palettes from which a color can be picked.

Typically, subclasses of the Palette interface provide named constructors in which the desired color is picked to be retrieved afterwards via the color property.

For example, the command Blue() retrieves the primary shade of blue and is equivalent to the Flutter's cryptic command Colors.blue.shade500; Blue.ultraLight() ≡ Colors.blue.shade50; Blue.veryDark() ≡ Colors.grey.shade900; and so on.

There are also accented color classes. For example, BlueAccent, TealAccent.

For a complete list of colors with detailed information — hex codes, indexes, opacity, etc. —:

• color palettes

Code snippet:

/// Builds a bluish container.
@override
Widget build(BuildContext context) {
  return Container(
    color: Blue().color,
  );
}

Numeric indexes vs. Named 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

Swatch interface

It represents a collection of related colors, such as the rainbow colors, shades of grey, etc.

Its single property colors retrieves several colors at once as an Iterable<Color> object.

For example, the statement Greys().colors retrieves ten shades of grey as defined by the Material Design standard; the higher the index, the darker the color.

For a complete list of colors with detailed information — hex codes, indexes, opacity, etc. —:

• swatches

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),
        ),
      ),
    );
  }
}

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 color gradient APIs — these APIs almost always expects as input a List<Color> object.

An example of a Gradient implementation is the abstract class GradientImmu which retrieves immutable List<Colors> objects.

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