Skip to content

Commit

Permalink
feat: bluish gradients
Browse files Browse the repository at this point in the history
Closes #119
  • Loading branch information
rafamizes committed Nov 8, 2021
1 parent d36d115 commit 5607b8a
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 44 deletions.
52 changes: 32 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,25 +53,28 @@ or darker than the primary shade.
- **darker shades**: `Grey.bitDarker()`, `Grey.darker()`, `Grey.dark()`, or
`Grey.veryDark()` for the darkest shade.

With the exception of the colors black and white, the same command patterns
(light, lighter, dark, etc.) also apply to all other colors.
With the exception of black and white, the same command patterns (light,
lighter, dark, etc.) also apply to all other
[colors](https://pub.dev/documentation/eo_color/latest/palettes/palettes-library.html)

## Getting Started

Like any other object-oriented package, this one uses interfaces to define
concepts such as color palette, color swatch, and color gradient; t8herefore,
the three main interfaces are `Palette`, `Swatch`, and `Gradient`.
concepts such as the color palette, color swatch and color gradient; therefore,
the three main interfaces are `Palette`, `Swatch` and `Gradient`.

## Palette interface

It represents color palettes from which a color can be selected.
The
[Palette](https://pub.dev/documentation/eo_color/latest/palettes/Palette-class.html)
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 afterwards using the `color`
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 is
equivalent to the Flutter command `Colors.blue.shade500`. Similarly,
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.

Expand Down Expand Up @@ -124,7 +127,9 @@ The table below contains the relationship between the Material Design indexes

## Swatch interface

It represents a collection of related colors such as:
The
[Swatch](https://pub.dev/documentation/eo_color/latest/swatches/Swatch-class.html)
interface represents a collection of related colors such as:

- shades of grey;
- the color gradient of a brand;
Expand All @@ -135,8 +140,8 @@ Its single property `colors` retrieves several colors at once as an

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 declaration `Greys().colors` retrieves
10 shades of grey; the higher the index, the darker the color.
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:

Expand Down Expand Up @@ -193,19 +198,26 @@ 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 a parameter instead of an `Iterable<Color>` object.
While the
[Swatch](https://pub.dev/documentation/eo_color/latest/swatches/Swatch-class.html)
interface retrieves an `iterable<Colors>` object, subclasses of
[Gradient](https://pub.dev/documentation/eo_color/latest/gradients/Gradient-class.html)
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 argument rather than an `Iterable<Color>` object.

For Material Design color gradients, use the
[GradOf](https://pub.dev/documentation/eo_color/latest/gradients/GradOf-class.html)
class, which in turn implements the
[Gradient](https://pub.dev/documentation/eo_color/latest/gradients/Gradient-class.html)
interface. Another example of a `Gradient` implementation is the abstract class
`GradientImmut`, which retrieves immutable `List<Colors>` objects.

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 `GradientImmu`, which retrieves immutable
`List<Colors>` objects.

For a complete list of gradients:

- [gradient](https://pub.dev/documentation/eo_color/latest/gradients/gradients-library.html)
- [gradients
library](https://pub.dev/documentation/eo_color/latest/gradients/gradients-library.html)

## Demo application

Expand Down
2 changes: 1 addition & 1 deletion lib/src/gradient_immut.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import 'package:eo_color/src/palette.dart';
import 'gradient.dart';
import 'swatch_base.dart';

/// Convenience [Gradient] that retrieves an immutable list of colors.
/// Convenience [Gradient] that retrieves immutable lists of colors.
abstract class GradientImmut extends SwatchBase implements Gradient {
/// [palettes] is a source of colors to be transformed into an immutable list.
const GradientImmut(Iterable<Palette> palettes) : super(palettes);
Expand Down
23 changes: 0 additions & 23 deletions lib/src/material/blue_grey/blue_grey_grad.dart

This file was deleted.

38 changes: 38 additions & 0 deletions lib/src/material/grad_of.dart
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,42 @@ class GradOf extends GradientSwatch {
/// See also: [Greys].
const GradOf.grey({bool growable = false})
: super(const Greys(), growable: growable); // coverage:ignore-line

/// A gradient of ten shades of blue.
///
/// See also: [Blues].
const GradOf.blue({bool growable = false})
: super(const Blues(), growable: growable); // coverage:ignore-line
/// A gradient of four shades of blue accent.
///
/// See also: [BlueAccents].
const GradOf.blueAccent({bool growable = false})
: super(const BlueAccents(), growable: growable); // coverage:ignore-line

/// A gradient of ten shades of light-blue.
///
/// See also: [LightBlues].
const GradOf.lightBlue({bool growable = false})
: super(const LightBlues(), growable: growable); // coverage:ignore-line
/// A gradient of four shades of light-blue accent.
///
/// See also: [LightBlueAccents].
const GradOf.lightBlueAccent({bool growable = false})
// coverage:ignore-start
: super(
const LightBlueAccents(),
growable: growable,
);
// coverage:ignore-end

/// A gradient of ten shades of cyan.
///
/// See also: [Cyans].
const GradOf.cyan({bool growable = false})
: super(const Cyans(), growable: growable); // coverage:ignore-line
/// A gradient of four shades of cyan accent.
///
/// See also: [CyanAccents].
const GradOf.cyanAccent({bool growable = false})
: super(const CyanAccents(), growable: growable); // coverage:ignore-line
}
96 changes: 96 additions & 0 deletions test/material/grad_of_test.dart
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import 'package:eo_color/src/material/blue/blue_accents.dart';
import 'package:eo_color/src/material/blue/blues.dart';
import 'package:eo_color/src/material/blue_grey/blue_greys.dart';
import 'package:eo_color/src/material/brown/browns.dart';
import 'package:eo_color/src/material/cyan/cyan_accents.dart';
import 'package:eo_color/src/material/cyan/cyans.dart';
import 'package:eo_color/src/material/grad_of.dart';
import 'package:eo_color/src/material/grey/greys.dart';
import 'package:eo_color/src/material/light_blue/light_blue_accents.dart';
import 'package:eo_color/src/material/light_blue/light_blues.dart';
import 'package:eo_color/src/material/transparent.dart';
import 'package:flutter_test/flutter_test.dart';

Expand Down Expand Up @@ -54,5 +60,95 @@ void main() {
expect(growable.length, prevLength + 1);
});
});
group('blue:', () {
final blueGrad = const GradOf.blue().colors;
test('gradient', () {
expect(blueGrad, List.of(const Blues().colors));
});
test('fixed-length list', () {
expect(() => blueGrad.add(aColor), throwsUnsupportedError);
});
test('growable list', () {
final growable = const GradOf.blue(growable: true).colors;
final prevLength = growable.length;
growable.add(aColor);
expect(growable.length, prevLength + 1);
});
});
group('blue accent:', () {
final blueGrad = const GradOf.blueAccent().colors;
test('gradient', () {
expect(blueGrad, List.of(const BlueAccents().colors));
});
test('fixed-length list', () {
expect(() => blueGrad.add(aColor), throwsUnsupportedError);
});
test('growable list', () {
final growable = const GradOf.blueAccent(growable: true).colors;
final prevLength = growable.length;
growable.add(aColor);
expect(growable.length, prevLength + 1);
});
});
group('light-blue:', () {
final blueGrad = const GradOf.lightBlue().colors;
test('gradient', () {
expect(blueGrad, List.of(const LightBlues().colors));
});
test('fixed-length list', () {
expect(() => blueGrad.add(aColor), throwsUnsupportedError);
});
test('growable list', () {
final growable = const GradOf.lightBlue(growable: true).colors;
final prevLength = growable.length;
growable.add(aColor);
expect(growable.length, prevLength + 1);
});
});
group('light-blue accent:', () {
final blueGrad = const GradOf.lightBlueAccent().colors;
test('gradient', () {
expect(blueGrad, List.of(const LightBlueAccents().colors));
});
test('fixed-length list', () {
expect(() => blueGrad.add(aColor), throwsUnsupportedError);
});
test('growable list', () {
final growable = const GradOf.lightBlueAccent(growable: true).colors;
final prevLength = growable.length;
growable.add(aColor);
expect(growable.length, prevLength + 1);
});
});
group('cyan:', () {
final cyanGrad = const GradOf.cyan().colors;
test('gradient', () {
expect(cyanGrad, List.of(const Cyans().colors));
});
test('fixed-length list', () {
expect(() => cyanGrad.add(aColor), throwsUnsupportedError);
});
test('growable list', () {
final growable = const GradOf.cyan(growable: true).colors;
final prevLength = growable.length;
growable.add(aColor);
expect(growable.length, prevLength + 1);
});
});
group('cyan accent:', () {
final cyanGrad = const GradOf.cyanAccent().colors;
test('gradient', () {
expect(cyanGrad, List.of(const CyanAccents().colors));
});
test('fixed-length list', () {
expect(() => cyanGrad.add(aColor), throwsUnsupportedError);
});
test('growable list', () {
final growable = const GradOf.cyanAccent(growable: true).colors;
final prevLength = growable.length;
growable.add(aColor);
expect(growable.length, prevLength + 1);
});
});
});
}

0 comments on commit 5607b8a

Please sign in to comment.