eva_color 1.4.2 eva_color: ^1.4.2 copied to clipboard
Simple Eva Design System color and swatches for Flutter, with dart generator command from eva theme json file.
EVA COLOR #
Simple Eva Design System color class for Flutter, with dart generator from eva theme json file.
Eva Design is a trademark of Akveo LLC
INSTALLATION #
- Just include it into your
pubspec.yaml
dependencies:eva_color: ^1.4.2 # null safety ready
- Run command to update the dependencies:
$ flutter pub get
FEATURES #
- Color Swatches. This package provide 2 color class for Eva Design
standard output:
These classes are compatible withEvaColor -> used for the basic color with 9 shades EvaBasicColor -> used for basic background-foreground color with 11 shades
dart:ui
and can be used in any color definition in the Flutter style / UI. - Generator. To easily generate color, there is a command to
generate dart file for your project, using the json file exported
from the Eva Color Site. The generated
dart file will import and use
EvaColor
class andEvaBasicColor
class from this package.
DART COLOR SCHEME GENERATOR #
- Prepare the file
custom-theme.json
exported from the site. The default location is in your root Flutter project. - Run
flutter pub run eva_color:generate
in command line. - Default output file will be in placed in
lib/eva_color.dart
. See options below for customization. - Example command
flutter pub run eva_color:generate -i assets/my-app-color.json -o lib/config/color.dart -c AppColor`.
GENERATOR OPTIONS (CLI ARGUMENTS) #
-i or --input : Define input file, anywhere using relative or absolute path. Default to ${PROJECT_DIR}/custom-theme.json
-o or --output : Define output file, anywhere using relative or absolute path. Default to ${PROJECT_DIR}/lib/eva_colors.dart
-c or --class : Define class name for the generated color scheme. Default to EvaColors
USAGE #
Below is how you use the color in your project.
- Suppose the output file is in your
/lib/eva_colors.dart
and the class is default toEvaColors
. - Sample output.
import 'dart:ui'; import 'package:eva_color/eva_color.dart'; // @autogenerate DO NOT EDIT!!! class EvaColors { static const EvaColor primary = EvaColor(0xFF3366FF, { 100: Color(0xFFD6E4FF), 200: Color(0xFFADC8FF), 300: Color(0xFF84A9FF), 400: Color(0xFF6690FF), 500: Color(0xFF3366FF), 600: Color(0xFF254EDB), 700: Color(0xFF1939B7), 800: Color(0xFF102693), 900: Color(0xFF091A7A), }); // other colors below }
- Import your generated file to your desired page.
import 'eva_colors.dart'; // or use absolute import
- Use Eva Color Scheme by its name
EvaColors.primary
for primary shade, or lighter/darker shade such asEvaColors.primary.shade100
.Widget container = Container( color: EvaColors.primary, );
TIPS #
Basic Color #
By default, basic color is not provided by the generated json from Eva Colors Generator. Because it might be needed in most of the application, this library will auto generate the basic color by default, using the color scheme from the official Sketch file. If you want to customize the basic color, you must provide ALL the required swatches in the input file. Missing one of this, the generator will throw error.
"color-basic-100": "#FFFFFF",
"color-basic-200": "#F7F9FC",
"color-basic-300": "#EDF1F7",
"color-basic-400": "#E4E9F2",
"color-basic-500": "#C5CEE0",
"color-basic-600": "#8F9BB3",
"color-basic-700": "#2E3A59",
"color-basic-800": "#222B45",
"color-basic-900": "#192038",
"color-basic-1000": "#151A30",
"color-basic-1100": "#101426",
Color Shades #
If you want to add more Eva Color shades, just add it in the
custom-theme.json
provided by the exported file. For example, adding
accent colors with shades:
"color-accent-100": "#D6E4FF",
"color-accent-200": "#ADC8FF",
"color-accent-300": "#84A9FF",
"color-accent-400": "#6690FF",
"color-accent-500": "#3366FF",
"color-accent-600": "#254EDB",
"color-accent-700": "#1939B7",
"color-accent-800": "#102693",
"color-accent-900": "#091A7A",