color_gen 0.1.3

Package to assist with Color and ColorSwatch generation for your Flutter projects

Features

color_gen package is used for Color and ColorSwatch generation of your flutter apps.

Getting started

The generation command is short and concise:

flutter pub run color_gen:generate   

copied to clipboard

In real projects, you may encounter the need for custom Color and ColorSwatch beside Flutter built-in Colors class and MaterialSwatch. Writing these can be tedious and repetitive, this package can help you with such problems.

Usage

To perform Color and ColorSwatch generation, you may follow these steps:

• Step 1: create color_gen.yaml. This is where you store all your color and color swatch configs.
• Step 2: config the color_gen.yaml as your requirements.
• Step 3: run the command: flutter pub run color_gen:generate

Config

To sum it up, here is the supported format:

# color_gen.yaml
shaded_color:
  class_name: ExampleAppColor # Generated color class name, which all member will be static, default to `AppColor`
  file_name: app_colors.dart # Generated file name, default to `colors.dart`
  location: lib/presentation/theme/color/ # folder to store generated file, default to `lib/generate/color/`
  swatch_prefix: $ShadedSwatch # Generated `ColorSwatch` class name, default to to `$ShadedSwatch`
  colors:
    red: # will generate `ColorSwatch` `red` with the following variable: shade10, shade50
      shade10:
        hex: 0xFF132112 # hex color code
        opacity: 1 # will add `.withOpacity(1)` after the color variable.
        primary: true # will make this color primary, if not set, will default to the first shade
      shade50:
        rgb: 12, 12, 41 # rgb is supported as well
        alpha: 244 # will add `.withAlpha(244)` after the color variable.
    blue: # normal color `blue`, contain no shade.
      hex: 0xFF132131
    primary: red # color named `primary` references to color `red`
    purple: 0xff123412 # short version of Color, currently only support hex value
    pink: # short version of ColorSwatch
      shade20: 0xff124912
      shade10: 0xff123512

copied to clipboard

The generated colors of the above config may be used like this:

import 'lib/presentation/theme/color/app_colors.dart';

final Color red = ExampleAppColor.red;
final Color redShade10 = ExampleAppColor.red.shade10;
final Color blue = ExampleAppColor.blue;
final Color primary = ExampleAppColor.primary; // will actually point to `red`
final Color pink = ExampleAppColor.pink.shade20;

copied to clipboard

For each Color or specific shade of ColorSwatch, the following format/key is supported:

Short version, currently only hexCode is supported.

<colorName>: <hexCode> 

copied to clipboard

Longer version:

<colorName>:
  hex: <hexCode>
  rgb: <rgb array> # len = 3
  alpha: <alpha> # 0-255
  opacity: <opacity> # 0-1 
  primary: true | false # only for shaded color of `ColorSwatch`, if not set, the first shade will be chosen as primary

copied to clipboard

Additional information

• Code generation will actually use the shade name as variable name and key for query it
• ColorSwatch with the same swatch (the same amount of shades and the same variable names) will utilize the same generated swatch class.
• Refer to the example for more details.