https://github.com/silentcatd/color_gen
color_gen package is used for Color and ColorSwatch generation of your flutter apps.
https://github.com/silentcatd/color_gen
color dart flutter generation
Last synced: 2 months ago
JSON representation
color_gen package is used for Color and ColorSwatch generation of your flutter apps.
- Host: GitHub
- URL: https://github.com/silentcatd/color_gen
- Owner: SilentCatD
- License: mit
- Created: 2023-06-28T06:55:34.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-11T02:40:47.000Z (almost 2 years ago)
- Last Synced: 2025-04-06T23:11:38.816Z (2 months ago)
- Topics: color, dart, flutter, generation
- Language: C++
- Homepage:
- Size: 285 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://pub.dev/packages/color_gen)
## Features
`color_gen` package is used for `Color` and `ColorSwatch` generation of your flutter apps.
## Getting started
The generation command is short and concise:
```shell
flutter pub run color_gen:generate
```
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:
```yaml
# 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
```
The generated colors of the above config may be used like this:
```dart
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;
```
For each `Color` or specific shade of `ColorSwatch`, the following format/key is supported:
Short version, currently only hexCode is supported.
```yaml
:
```
Longer version:
```yaml
:
hex:
rgb: # len = 3
alpha: # 0-255
opacity: # 0-1
primary: true | false # only for shaded color of `ColorSwatch`, if not set, the first shade will be chosen as primary
```
## 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.