eo_color 0.0.4

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

eo-color

Stop wondering whether an obscure command like Grey.colors[200] represents a light, medium or dark shade of grey. Moreover, what does that 200 mean and why not, say, 330 or 777?

This is an Elegant and Object-oriented implementation of the Material Design color palettes and an alternative to the Flutter's built-in colors. It significantly improves the readability and maintainability of the source code by providing a declarative interface.

To get a light shade of grey, you just have to declare Grey.light() in the source code. It sounds like an English sentence rather than a command! A consequence of being declarative.

Getting Started

Like any object-oriented package, this one makes extensive use of interfaces for defining concepts, such as color palettes, color swatches, gradients, etc.

There are two core interfaces:

• Palette: represents a color palette from which a color can be picked. Its single property color retrieves the picked color. Typically, the color selection takes place when a Palette subclass is instantiated. For instance, Grey.light().color retrieves a light shade of grey; Blue.dark().color, a dark shade of blue; Red().color, the primary red shade; and so on.

• Swatch: a color swatch is a collection of related colors, such as the colors of the rainbow, shades of grey, etc. Its single property colors retrieves several colors at once as an Iterable<Color>. For instance, Greys().colors retrieves ten shades of grey, as defined by the Material Design standard.

For more details: api reference.

Color Palette Classes

These are classes whose name is the color they represent, such as "Grey". For example: Grey() represents the primary grey color, equivalent to the Flutter's cryptic Colors.grey.shade500; Grey.light() ≡ Colors.grey.shade200; Grey.veryDark() ≡ Colors.grey.shade900; and so on.

import 'package:eo_color/palettes.dart';
import 'package:flutter/material.dart';

class Greyish extends StatelessWidget {

  static const _light = Grey.light();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: _light.color,
    );
  }
}

Color Swatch Classes

These are classes whose name is the plural of a color, such as "Greys". For example: Greys().colors retrieves an Iterable<Color> containing ten shades of grey; the greater the index, the darker the color.

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

Running demo showcase application

From the root directory of this project, enter:

cd example/
flutter run -d chrome

This should start the color palettes showcase in Chrome.

Supported color palettes

Blue, BlueAccent, LightBlue, LighBlueAccent, Cyan, CyanAccent, Indigo,
IndigoAccent.
BlueGrey, Brown, Grey.

Supported color swatches

Blues, BlueAccents, LightBlues, LighBlueAccents, Cyans, CyanAccents, Indigos,
IndigoAccents.
BlueGreys, Browns, Greys.

See also: material design color palette.