ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

Related tags

Templates theme_x
Overview

ThemeX is an easy theme manipulation basied on Material Design. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX result

theme_x_palette

Usage

ThemeX a simple usage. Only inform primary color and the magic happens

Create a ThemeX instance

final theme = ThemeX(
    brightness: Brightness.light,
    primaryColor: const Color(0xFF684437),
    colorEngine: ThemeXColorEngine.traditional,
    backgroundColor: Colors.white,
);

Set theme on MaterialApp

MaterialApp(
  title: 'ThemeX',
  theme: theme.get(), //Here set theme attribute with ThemeX codes
  home: const MyHomePage(),
);

How to see visual result?

For see result is simple call a dialog any page or menu that you will see the entire generated color palette

 showDialog(
  context: context,
  builder: (context) {
    return const ThemeXDialog();
  },
);

How to get properties from ThemeX?

Colors

Get primary color

var primary = ThemeX.I.primary;

OR get primary variants

var primary50 = ThemeX.I.primary[50];
var primary100 = ThemeX.I.primary[100];
var primary200 = ThemeX.I.primary[200];
var primary300 = ThemeX.I.primary[300];
var primary400 = ThemeX.I.primary[400];
var primary500 = ThemeX.I.primary[500];
var primary600 = ThemeX.I.primary[600];
var primary700 = ThemeX.I.primary[700];
var primary800 = ThemeX.I.primary[800];
var primary900 = ThemeX.I.primary[900];

Get secondary color

var secondary = ThemeX.I.secondary;

OR get secondary variants

var secondary100 = ThemeX.I.secondary[100];
var secondary200 = ThemeX.I.secondary[200];
var secondary400 = ThemeX.I.secondary[400];
var secondary700 = ThemeX.I.secondary[700];

Get Greyscale color

var grey = ThemeX.I.grey;

OR Greyscale variants

var grey50 = ThemeX.I.grey[50];
var grey100 = ThemeX.I.grey[100];
var grey200 = ThemeX.I.grey[200];
var grey300 = ThemeX.I.grey[300];
var grey400 = ThemeX.I.grey[400];
var grey500 = ThemeX.I.grey[500];
var grey600 = ThemeX.I.grey[600];
var grey700 = ThemeX.I.grey[700];
var grey800 = ThemeX.I.grey[800];
var grey900 = ThemeX.I.grey[900];

Semantic colors

var success = ThemeX.I.success;
var danger = ThemeX.I.danger;
var warning = ThemeX.I.warning;
var info = ThemeX.I.info;
var secondarySuccess = ThemeX.I.secondarySuccess;
var secondaryDanger = ThemeX.I.secondaryDanger;
var secondaryWarning = ThemeX.I.secondaryWarning;
var secondaryInfo = ThemeX.I.secondaryInfo;

Typography

var h1 = ThemeX.I.h1;
var h2 = ThemeX.I.h2;
var h3 = ThemeX.I.h3;
var h4 = ThemeX.I.h4;
var h5 = ThemeX.I.h5;
var bodyLarge = ThemeX.I.bodyLarge;
var bodyMedium = ThemeX.I.bodyMedium;
var buttonLarge = ThemeX.I.buttonLarge;
var buttonMedium = ThemeX.I.buttonMedium;
var subtitleLarge = ThemeX.I.subtitleLarge;
var subtitleMedium = ThemeX.I.subtitleMedium;

Features

Discover Highlight/Contrast color from the another color

If you use the yellow color in the background and want to find out which one color accent this background

var backgroundAccentColor = ThemeX.I.contrastColor(Colors.yellow);

Color engine

Color engine generate a pallet color variants basied on Constantin Material Design, Buckner Material Design and Traditional Material Design.

Pass attribute "colorEngine" on ThemeX create

final theme = ThemeX(
    brightness: Brightness.light,
    primaryColor: const Color(0xFF684437),
    colorEngine: ThemeXColorEngine.constantin, //Or ThemeXColorEngine.buckner or ThemeXColorEngine.traditional
);
You might also like...

This is a mason brick you can use to generate code that get's you started right up with a flutter project

flutter_brick This is a mason brick you can use to generate code that gets you started right up with a flutter project A flutter brick created with th

Sep 16, 2022

Create flutter project with all needed configuration in two minutes (theme, localization, connect to firebase, FCM, local notifications, safe API call, error handling, animation..etc)

Create flutter project with all needed configuration in two minutes (theme, localization, connect to firebase, FCM, local notifications, safe API call, error handling, animation..etc)

Flutter GetX Template Flutter Getx template to make starting project fast and easy . Introduction We all face the same problem when we want to start a

Jan 7, 2023

The one and only Docker Tool you will ever need again

# container_tool A new Flutter project. ## Getting Started This project is a starting point for a Flutter application. A few resources to get you

Nov 17, 2021

Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls into your app with only a few lines of code.

Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls into your app with only a few lines of code.

Call Kit (ZegoUIKitPrebuiltCall) Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls

Dec 26, 2022

Easy Material White Theme

flutter_fast_ui_white Easy Material White Theme Getting Started in pubspec.yaml dependencies: flutter_fast_ui_white: git: url: https://git

Apr 11, 2022

Acronym - A simple, lightweight and easy to use package to generate acronyms

A simple, lightweight and easy to use package to generate acronyms. Usage You ca

Jan 20, 2022

WIP: generate easy localization key code

Generates translation key code for the easy localization package. Support for json and yaml formats.You can see examples in the assets/ folder. Gettin

Oct 24, 2022

A Fluter tabview that text color can change with animation and bg color change with animation

A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

Dec 8, 2021

Colorpicker flutter - This Color picker for flutter apps provide picking facility for both single and multiple color choosing

Colorpicker flutter - This Color picker for flutter apps provide picking facility for both single and multiple color choosing

This Color picker for flutter apps provide picking facility for both single and

Feb 2, 2022
Owner
Michael S. Lopes
Michael S. Lopes
A Flutter color palette with eyedropper, HSL, RGB and Material colors

Cyclop A flutter colorpicker with an eyedropper tool. Works on mobile, desktop & web ( CanvasKit) Demo Desktop & tablet Mobile Material HSL RVB Custom

Erick Ghaumez 107 Jan 5, 2023
Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

Aditya Dharmawan Saputra 10 Dec 20, 2022
Flutter-Theme-Changer - Change theme of your app from light to dark theme and vice versa

Flutter Theme Changer - Hard Coded This is a flutter theme changer without using

Shametha K G 4 Oct 17, 2022
meg4cyberc4t 11 Oct 24, 2022
Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON.

JSON to Dart Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON. This library is designed to ge

Javier Lecuona 1.2k Dec 25, 2022
Flutter App Change Theme With Getx and Save Theme Stage with Hive

Flutter Change app Theme With GetX Flutter App Change Theme With Getx. Theme Stage saved using Hive. instead of hive you can use get-storage or shared

Azraf Al Monzim 12 Oct 22, 2022
The classic to-do application where a user can write down all the things he wants to accomplish. Android only.

todo-app The classic to-do application where a user can write down all the things he wants to accomplish. Android only. Table of Contents todo-app Tab

Samuel Marques 9 Sep 23, 2022
Material color picker, you can customize colors. Selection in two step, first main color and after shades.

Flutter Material Color Picker Material Color picker is a Flutter widget, that can be customizable. By default, it's Material Colors, but you can defin

Jean-Charles Moussé 70 Nov 25, 2022
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Zero 201 Nov 10, 2022