eo_color 0.0.6

eo_color: ^0.0.6 copied to clipboard

EO-Color is an Elegant and Object-oriented implementation of the Material Design color palettes. It is aimed to be an alternative to the Flutter's built-in colors, as well as a base framework for other color related packages.

A key benefit of EO-Color is to improve the source code readability and maintainability by providing a declarative approach. For instance, if you wish to get a light shade of grey, you just have to declare it like Grey.light() in the source code. It sounds more like an English sentence than a command. Welcome to declarative programming!

Getting Started #

Like any object-oriented package, this one utilizes interfaces to define concepts such as color palettes and swatches. Therefore, it is no surprise that the two core interfaces are Palette and Swatch.

Palette interface #

It represents color palettes from which a color can be selected. Typically, the "Palette" subclasses provide named constructors by which a color is selected. On the other hand, the actual color object initialization is deferred until the color property gets called - Lazy loading.

Material Design 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.

Palettes in action

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

Indexes by named constructors

Supported palette colors

• palettes

Swatch interface #

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.

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.

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

Supported color swatches

• swatches

Showcase application #

To run the showcase application:

cd example/
flutter run -d chrome

This should start the color palettes showcase in Chrome.

References #

• material design color palette.