lvfarias/easy_theme

A package to generate MaterialColors and a ThemeData for your Flutter App in an EASY and FAST WAY.

Easy Theme

Sumary

• Description
• Installation
  • Depend on it
  • Install it
  • Import it
• What is CustomTheme
  • EasyColors
• Customize
• Exemple
• Authors

Description

A package to generate MaterialColors and a ThemeData for your Flutter App in an EASY and FAST WAY.

Installation

Depend on it

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

dependencies:
  easy_theme: ^1.0.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.

Import it

Now in your Dart code, you can use:

import 'package:easy_theme/easy_theme.dart';

Use it

Now in your Dart code, you can use:

final EasyTheme myCustomTheme = EasyTheme(primary: Colors.blue);

What is CustomTheme?

Is the main class of the package, it will be responsible for generating a theme for your app and a color variable, which facilitates work and understanding.

When instantiation the class, it is mandatory to pass a primary color as a parameter, but it is also possible to pass the colors: secondary, success, info, warning, error. It is also possible to pass a brightness to build dark or light themes.

This class there are two public functions, they are:

• getColors that returns an object of type EasyColors
• getTheme that returns an object of type ThemeData

EasyColors

Is a class that transforms the colors passed in CustomTheme to MaterialColors, and puts it in an easy to understand structure to be used in the application.

It contains the following MaterialColors: primary; secondary; success; info; warning; error; white; black;

White is #FFFFFF and Black is #000000.

Secondary, if not provided at CustomTheme instantiation, a complementary color to the primary calculated by the EasyColors class.

Customize

Try to pass more colors to CustomTheme for a more personalized theme.

final EasyTheme myEasyTheme = EasyTheme(
    primary: Color(0XFF0F4C81),
    secondary: Color(0XFFCFA904),
    success: : Color(0XFF268209),
    info: : Color(0XFF09827A),
    warning: : Color(0XFFB49404),
    error: : Color(0XFF82211D),
    brightness: Brightness.light,
);

You can also create more than one theme for your application, as in the example below a dark and light theme is created

final EasyTheme myEasyThemeLight = EasyTheme(
    primary: Color(0XFF0F4C81),
    secondary: Color(0XFFCFA904),
    success: : Color(0XFF268209),
    info: : Color(0XFF09827A),
    warning: : Color(0XFFB49404),
    error: : Color(0XFF82211D),
    brightness: Brightness.light,
);

final EasyTheme myEasyThemeDark = EasyTheme(
    primary: Color(0XFFCFA904),
    secondary: Color(0XFF007FB1),
    success: : Color(0XFF5AB009),
    info: : Color(0XFF1283B0),
    warning: : Color(0XFFFCC319),
    error: : Color(0XFFB03009),
    brightness: Brightness.dark,
);

Authors

• Luan Vasco de Farias

Exemple

////////// IMPORT EASY THEME //////////
import 'package:easy_theme/easy_theme.dart';

/// Creating a Easy Theme based on the blue color (`Colors.blue`)
final EasyTheme myCustomTheme = EasyTheme(primary: Colors.blue);

/// get the ThemeData object created by the EasyTheme
final ThemeData myTheme = myCustomTheme.getTheme();

/// get the EasyColors object created by the EasyTheme
final EasyColors myColors = myCustomTheme.getColors();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme Test',
      /// use `myTheme` in your
      theme: myTheme,
      home: MyHomePage(),
    );
  }
}