eva_color 1.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 74

EVA COLOR #

version License

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 #

  1. Just include it into your pubspec.yaml dependencies:
    eva_color: ^1.1.1
    
  2. Run command to update the dependencies:
    $ flutter pub get
    

FEATURES #

  1. Color Swatches. This package provide 2 color class for Eva Design standard output:
    EvaColor -> used for the basic color with 9 shades
    EvaBasicColor -> used for basic background-foreground color with 11 shades
    EvaTransparentColor -> used for transparent color with 6 shades
    
    These classes are compatible with dart:ui and can be used in any color definition in the Flutter style / UI.
  2. 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 and EvaTransparentColor class from this package.

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';
    
    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),
      });
    
      static const EvaTransparentColor primaryTransparent =
          EvaTransparentColor(0x663366FF, {
        100: Color(0x143366FF),
        200: Color(0x283366FF),
        300: Color(0x3D3366FF),
        400: Color(0x513366FF),
        500: Color(0x663366FF),
        600: Color(0x7A3366FF),
      });
    
      // other colors below
    }
    
  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.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-basic-light-transparent-100": "rgba(142, 155, 179, 0.08)",
"color-basic-light-transparent-200": "rgba(142, 155, 179, 0.16)",
"color-basic-light-transparent-300": "rgba(142, 155, 179, 0.24)",
"color-basic-light-transparent-400": "rgba(142, 155, 179, 0.32)",
"color-basic-light-transparent-500": "rgba(142, 155, 179, 0.4)",
"color-basic-light-transparent-600": "rgba(142, 155, 179, 0.48)",
"color-basic-dark-transparent-100": "rgba(255, 255, 225, 0.08)",
"color-basic-dark-transparent-200": "rgba(255, 255, 255, 0.16)",
"color-basic-dark-transparent-300": "rgba(255, 255, 255, 0.24)",
"color-basic-dark-transparent-400": "rgba(255, 255, 255, 0.32)",
"color-basic-dark-transparent-500": "rgba(255, 255, 255, 0.4)",
"color-basic-dark-transparent-600": "rgba(255, 255, 255, 0.48)",

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",

[1.1.1] - 17 June 2020. #

  • Fix default basic color json file path when the library is used by other project.
  • Fix the test case for validating basic color

[1.1.0] - 17 June 2020. #

  • Add basic color for black and white. If not defined in the input file, it will be generated automatically.

[1.0.1] - 14 May 2020. #

  • Add example
  • Update several fix for health suggestions
  • Move generator source to bin to hide generator API in docs

[1.0.0] - 14 May 2020. #

  • Initial release with EvaColor, EvaTransparentColor, and Dart Generator.

example/example.md

Example #

import 'package:eva_color/eva_color.dart';
import 'package:flutter/material.dart';

// output example
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),
  });
}

// Usage for material design
Widget container = Container(
  color: EvaColors.primary.shade200,
);

Use this package as an executable

1. Install it

You can install the package from the command line:


$ pub global activate eva_color

2. Use it

The package has the following executables:


$ generate

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  eva_color: ^1.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:eva_color/eva_color.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
48
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
74
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • eva_color that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
args ^1.6.0 1.6.0
flutter 0.0.0
meta ^1.1.8 1.1.8 1.2.2
path ^1.6.4 1.7.0
Transitive dependencies
collection 1.14.12 1.14.13
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test