eo_color 1.0.0
eo_color: ^1.0.0 copied to clipboard

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

eo_color #

EO-Color logo

EO principles respected here DevOps By Rultor.com

pub license style: lint PDD status build codecov Hits-of-Code

EO-Color is an Elegant and 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 the shade of a color has been deliberately dropped in favour of 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, simply declare Grey.light().

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 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 Grey() retrieves the primary shade of grey and is equivalent to the Flutter's cryptic command Colors.grey.shade500; Grey.light()Colors.grey.shade200; Grey.veryDark()Colors.grey.shade900; and so on.

Code snippet:

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

Material Design shade 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.
IndexNormalAccent
50ultraLight
100veryLightlight
200light()
300lighter
400bitLighterdarker
500()
600bitDarker
700darkerdark
800dark
900veryDark

See also:

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. E.g., Greys().colors retrieves ten shades of grey; the higher 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),
        ),
      ),
    );
  }
}

See also:

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.

Demo-App

References #

5
likes
130
pub points
47%
popularity

Publisher

dartoos.dev

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

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on eo_color