theme_x 1.0.4 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 #
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,
);
copied to clipboard
Set theme on MaterialApp
MaterialApp(
title: 'ThemeX',
theme: theme.get(), //Here set theme attribute with ThemeX codes
home: const MyHomePage(),
);
copied to clipboard
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();
},
);
copied to clipboard
How to get properties from ThemeX? #
Colors #
Get primary color
var primary = ThemeX.I.primary;
copied to clipboard
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];
copied to clipboard
Get secondary color
var secondary = ThemeX.I.secondary;
copied to clipboard
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];
copied to clipboard
Get Greyscale color
var grey = ThemeX.I.grey;
copied to clipboard
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];
copied to clipboard
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;
copied to clipboard
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;
copied to clipboard
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);
copied to clipboard
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
);
copied to clipboard
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
);
copied to clipboard
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
);
copied to clipboard