Theme

Before modifying the theme, refer to Flutter’s official docs for more information on how to use themes to share colors and font styles. Please refer URL https://flutter.dev/docs/cookbook/design/themes

Font Family

This template uses the default font family name “Poppins”. If you prefer a different font or a custom one to make it look better, you’ll need to provide the .ttf files for all supported styles such as thin, ultraLight, light, regular, medium, semibold, bold, heavy, black, etc. To add a custom font, follow these simple steps.

Access to the fonts folder ./assets/fonts/..

Download and add more font Roboto [Download]

Open file ./lib/configs/theme.dart

static String defaultFont = "Poppins";  

Color Palette

The templates use a color palette that follows the format shown in the image below.

You can dynamically change the theme prop, and the components will update accordingly. Open file ./lib/configs/theme.dart

///Default Theme
static final ThemeModel defaultTheme = ThemeModel.fromJson({
  "name": "default",
  "primary": 'ffe5634d',
  "secondary": "ff4a91a4",
});  

If you want to change or modify the color. Open file ./lib/configs/theme_collection.dart

If you want to customize the colors to match your business, refer to the websites below to find the right color palettes.

• https://materialpalette.com
• https://colorhunt.co

Theme Supports

The application template allows users to choose from multiple color options. Additionally, users have the option to customize the color patterns according to their preference. As a first step, it is important to define a list of available color patterns that can be easily selected and enabled.

Open file ./lib/configs/theme.dart

///List Theme Support in Application
  static final List themeSupport = [
    {
      "name": "default",
      "primary": 'ffe5634d',
      "secondary": "ff4a91a4",
    },
    {
      "name": "blue",
      "primary": 'ff0d6efd',
      "secondary": 'ffC89132',
    },
    {
      "name": "green",
      "primary": 'ff82B541',
      "secondary": "ffff8a65",
    },
    {
      "name": "orange",
      "primary": 'fff4a261',
      "secondary": "ff2A9D8F",
    }
  ].map((item) => ThemeModel.fromJson(item)).toList();