theme_x 1.0.4 copy "theme_x: ^1.0.4" to clipboard
theme_x: ^1.0.4 copied to clipboard

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

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,
);

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 or ThemeXColorEngine.complementary
);

Pass attribute "googleFont" to using GoogleFonts packages

final theme = ThemeX(
    brightness: Brightness.light,
    primaryColor: const Color(0xFF684437),
    colorEngine: ThemeXColorEngine.constantin, 
    googleFont: GoogleFonts.latoTextTheme, //Here pass google fonts
);

Pass attribute "backgroundColor"

final theme = ThemeX(
    brightness: Brightness.light,
    primaryColor: const Color(0xFF684437),
    colorEngine: ThemeXColorEngine.constantin, 
    backgroundColor: (primary, secondary, grey) {
      return Colors.white;
    }, //Here pass background color
);
19
likes
80
pub points
44%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, pigment

More

Packages that depend on theme_x