Theme Customisation
Below is the file structure to reach the file for changing app theme.
├── docs └── FlutKit │ ├── android │ ├── assets │ ├── ios │ ├── lib │ └── apps │ └── extensions │ └── homes │ ├── select_theme_dialog.dart // Change app theme here │ └── localizations │ └── theme │ ├── app_notifier.dart │ ├── app_theme.dart // Change app theme variables here │ ├── custom_theme.dart // Change custom app theme variables here │ ├── theme_type.dart
Change App Theme
We can change theme of whole application in just a few steps. Let's see how it's done.
App Theme
Provider.of<AppNotifier>(context, listen: false).updateTheme(ThemeType.dark); // For light theme write ThemeType.light else ThemeType.dark
For more changes, have a look at the file - 'lib/homes/select_theme_dialog.dart'
Change App Theme Variables
Let's have a look at how to change the app theme of the application.
Light Theme
class AppTheme{
...
static final ThemeData lightTheme = ThemeData(
primaryColor: Color(0xff3C4EC5), // Change primary color
...
backgroundColor: Color(0xffffffff), // Change background color
scaffoldBackgroundColor: Color(0xffffffff), // Change scaffoldBackgroundColor
colorScheme: ColorScheme.light(
primary: Color(0xff3C4EC5), // Change primary color
onPrimary: Color(0xffeeeeee), // Change onPrimary color
primaryVariant: Color(0xff3C4EC5), // Change primaryVariant color
secondary: Color(0xff3C4EC5), // Change secondary color
secondaryVariant: Color(0xffeeeeee), // Change secondaryVariant color
onSecondary: Color(0xffeeeeee), // Change onSecondary color
surface: Color(0xffeeeeee), // Change surface color
background: Color(0xffeeeeee), // Change background color
onBackground: Color(0xff495057), // Change onBackground color
),
);
}
For more changes, have a look at the file - 'lib/theme/app_theme.dart'
Dark Theme
class AppTheme{
...
static final ThemeData darkTheme = ThemeData(
primaryColor: Color(0xff069DEF), // Change primary color
...
backgroundColor: Color(0xff1b1b1b), // Change background color
scaffoldBackgroundColor: Color(0xff1b1b1b), // Change scaffoldBackgroundColor
colorScheme: ColorScheme.dark(
primary: Color(0xff069DEF), // Change primary color
onPrimary: Color(0xffffffff), // Change onPrimary color
primaryVariant: Color(0xff069DEF), // Change primaryVariant color
secondary: Color(0xff069DEF), // Change secondary color
secondaryVariant: Color(0xffffffff), // Change secondaryVariant color
onSecondary: Color(0xffffffff), // Change onSecondary color
surface: Color(0xffeeeeee), // Change surface color
background: Color(0xff1b1b1b), // Change background color
onBackground: Color(0xfff3f3f3), // Change onBackground color
),
);
}
For more changes, have a look at the file - 'lib/theme/app_theme.dart'
Change Custom App Theme Variables
Let's have a look at how to change the custom theme of the app.
Custom Theme
CustomTheme({
...
this.shoppingPrimary = const Color(0xff387D94), // Change primary color
this.shoppingOnPrimary = const Color(0xffFAF9F9), // Change onPrimary color
this.shoppingSecondary = const Color(0xffD2E7EE), // Change secondary color
this.shoppingOnSecondary = const Color(0xff387D94), // Change onSecondary color
});
Similarly, you can make changes in other apps like fitness, learning, etc.
For more changes, have a look at the file - 'lib/theme/custom_theme.dart'