eva_color 2.0.0 copy "eva_color: ^2.0.0" to clipboard
eva_color: ^2.0.0 copied to clipboard

Simple Eva Design System color and swatches for Flutter, with dart generator command from eva theme json file.

EVA COLOR #

Pub Version GitHub

Simple Eva Design System color swatches generator for Flutter, with dart generator from eva theme json file.

Eva Design is a trademark of Akveo LLC

INSTALLATION #

  1. Just include it into your pubspec.yaml dev_dependencies:
    eva_color: ^2.0.0 # null safety ready
    
  2. Run command to update the dependencies:
    $ flutter pub get
    

FEATURES #

Generator. This library easily generates color constant. 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 user pure Color class from dart:ui packages.

DART COLOR SCHEME GENERATOR #

  1. Prepare the file custom-theme.json exported from the site. The default location is in your root Flutter project.
  2. Run flutter pub run eva_color:generate in command line.
  3. Default output file will be in placed in lib/eva_color.dart. See options below for customization.
  4. 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.

  1. Suppose the output file is in your /lib/eva_colors.dart and the class is default to EvaColors.
  2. Sample output.
    import 'dart:ui';
    
    // @autogenerate DO NOT EDIT!!!
    class EvaColors {
      static const Color primary = Color(0xFF3366FF);
      static const Color primary100 = Color(0xFFD6E4FF);
      static const Color primary200 = Color(0xFFADC8FF);
      static const Color primary300 = Color(0xFF84A9FF);
      static const Color primary400 = Color(0xFF6690FF);
      static const Color primary500 = Color(0xFF3366FF);
      static const Color primary600 = Color(0xFF254EDB);
      static const Color primary700 = Color(0xFF1939B7);
      static const Color primary800 = Color(0xFF102693);
      static const Color primary900 = Color(0xFF091A7A);
       
      // other color swatches here
    }
    
  3. Import your generated file to your desired page.
    import 'eva_colors.dart'; // or use absolute import
    
  4. Use Eva Color Scheme by its name EvaColors.primary for primary shade, or lighter/darker shade such as EvaColors.primary100.
    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",
6
likes
110
pub points
61%
popularity

Publisher

verified publisherglovory.dev

Simple Eva Design System color and swatches for Flutter, with dart generator command from eva theme json file.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-2-Clause (LICENSE)

Dependencies

args, flutter, meta, path

More

Packages that depend on eva_color