Theme Your Flutter App: A Guide to ThemeData and ColorScheme
Before diving in I need to tell you something. Many articles are available on this topic in the medium and other sources, so what is the necessity of this article?
In this article, I plan to focus on only the key points of the ThemeData
widget and the most used parameters from my development experience, and you get a brief explanation about how each parameter takes action on your application.
Are you curious? continue reading 🤗.
Key Benefits of using ThemeData
- Maintain a unified look and feel: Define a single
ThemeData
object that encapsulates your app's color palette, fonts, shapes, and other visual elements. Apply this theme consistently across all screens, ensuring a cohesive and recognizable brand identity. - Create variations for different themes: Define multiple
ThemeData
objects for light and dark modes, app sections, or user preferences. - Define themes once, and use them everywhere: Instead of manually setting visual styles for individual widgets, apply the appropriate
ThemeData
ones in your app. This reduces code duplication and simplifies maintenance. - Centralized control and updates: Make changes to the
ThemeData
object and those changes automatically propagate throughout your app, ensuring consistency and reducing the need for repetitive edits. - Create accessible variants: Build separate
ThemeData
objects for users with specific accessibility needs, such as high-contrast themes for visually impaired users.
So, now you are familiar with ThemeData
how it helps you, then how to implement this in your app? please stick with me 😊.
Here is a small guide to implementing a basic Theme in a Flutter app for Dark and Light themes.
Creating Global Class
The first step is to create a global class for managing ThemeData
within your application. This contains a method to create different instances ThemeData
with ColorSheme
.
class GlobalThemData {
static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {
return ThemeData(colorScheme: colorScheme, focusColor: focusColor);
}
}
focusColor
: This color is used by widgets like TextFields and TextFormField to indicate the widget has a primary focus.
ColorSheme : A set of 30 colors based on the Material spec that can be used to configure the color properties of most components.
We can discuss ColorSheme
in more detail later in this article.
Now we can create additional public variables that can be accessed directly from GlobalThemData
class.
lightColorScheme: holds a ColorSheme
for light theme.
darkColorScheme: holds a ColorSheme
for dark theme.
lightThemeData: holds a ThemeData
for light theme.
darkThemeData: holds a ThemeData
for dark theme.
class GlobalThemData {
static final Color _lightFocusColor = Colors.black.withOpacity(0.12);
static final Color _darkFocusColor = Colors.white.withOpacity(0.12);
static ThemeData lightThemeData = themeData(lightColorScheme, _lightFocusColor);
static ThemeData darkThemeData = themeData(darkColorScheme, _darkFocusColor); static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {
return ThemeData(colorScheme: colorScheme, focusColor: focusColor);
} static const ColorScheme lightColorScheme = ColorScheme(); static const ColorScheme darkColorScheme = ColorScheme();
}
If you are coding along with me you should probably get a required parameter error warning on ColorSheme()
.
we can fix this in the next step.
ColorSheme
The colors in ColorSheme come in pairs; the first is the color itself, and the second is the color that may be used on that color, such as text and other elements.
these 10 colors are mandatory for creating a ColorSheme for Flutter ThemData.Values for each color are optional.
primary
: This is the most used color in the application
onPrimary
: This color is used to color the elements on top of the primary color such as text, icons, etc.
secondary
: This defines a secondary color, often used for less prominent elements like filter chips, toggle buttons, or background elements that need to stand out from the primary color but not overpower it.
onSecondary
: This color is used to color the elements on top of the secondary color.
error
: This is the color used for error messages or alerts, like a flashing red light to indicate a problem.
onError
: This is the text color that goes well on the error
color, like white text on a red sign for easy reading.
background
: The primary background color for your entire application. Think of this as the canvas upon which all other UI elements are placed.
onBackground
: This color is used to color the elements on top of the background color.
surface
: Used as the base color for elevated UI elements like cards, sheets, dialogs, etc.
onSurface
: use to color the elements on top of the surface color.
So, we can set our lightColorScheme
and darkColorScheme
variable as follows.
static const ColorScheme lightColorScheme = ColorScheme(
primary: Color(0xFFB93C5D),
onPrimary: Colors.black,
secondary: Color(0xFFEFF3F3),
onSecondary: Color(0xFF322942),
error: Colors.redAccent,
onError: Colors.white,
background: Color(0xFFE6EBEB),
onBackground: Colors.white,
surface: Color(0xFFFAFBFB),
onSurface: Color(0xFF241E30),
brightness: Brightness.light,
);
static const ColorScheme darkColorScheme = ColorScheme(
primary: Color(0xFFFF8383),
secondary: Color(0xFF4D1F7C),
background: Color(0xFF241E30),
surface: Color(0xFF1F1929),
onBackground: Color(0x0DFFFFFF),
error: Colors.redAccent,
onError: Colors.white,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: Colors.white,
brightness: Brightness.dark,
);
So as of now, we set a ColorScheme
for light and dark themes, now how we use this in our ThemeData
?
Creating ThemeData
we need to modify our themeData
method in GlobalThemeData
to build the ThemeData
with the appropriate value ColourScheme
that is going to pass to it.
static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {
return ThemeData(
colorScheme: colorScheme,
canvasColor: colorScheme.background,
scaffoldBackgroundColor: colorScheme.background,
highlightColor: Colors.transparent,
focusColor: focusColor
);
}
canvasColor
: This is the background color for the entire screen or app window. It defines the base color upon which all other UI elements are placed.scaffoldBackgroundColor
: This specifically defines the background color of the scaffold itself, encompassing the app bar, body content area, and bottom navigation bar (if present).highlightColor
: This property defines the color that is displayed briefly when a user taps and holds on a widget. It provides visual feedback to the user that the interaction has been registered.focusColor
: This property defines the color used to visually indicate which element currently has focus, meaning it's the element that will receive keyboard input. This can be useful for highlighting the currently active element, drawing the user's attention to it.
These are just samples and there are a bunch of other options available on ThemeData
that you need to explore.
Therefore our final GlobalThemeData
class should look like this,
class GlobalThemData {
static final Color _lightFocusColor = Colors.black.withOpacity(0.12);
static final Color _darkFocusColor = Colors.white.withOpacity(0.12);
static ThemeData lightThemeData =
themeData(lightColorScheme, _lightFocusColor); static ThemeData darkThemeData = themeData(darkColorScheme, _darkFocusColor); static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {
return ThemeData(
colorScheme: colorScheme,
canvasColor: colorScheme.background,
scaffoldBackgroundColor: colorScheme.background,
highlightColor: Colors.transparent,
focusColor: focusColor
);
} static const ColorScheme lightColorScheme = ColorScheme(
primary: Color(0xFFB93C5D),
onPrimary: Colors.black,
secondary: Color(0xFFEFF3F3),
onSecondary: Color(0xFF322942),
error: Colors.redAccent,
onError: Colors.white,
background: Color(0xFFE6EBEB),
onBackground: Colors.white,
surface: Color(0xFFFAFBFB),
onSurface: Color(0xFF241E30),
brightness: Brightness.light,
); static const ColorScheme darkColorScheme = ColorScheme(
primary: Color(0xFFFF8383),
secondary: Color(0xFF4D1F7C),
background: Color(0xFF241E30),
surface: Color(0xFF1F1929),
onBackground: Color(0x0DFFFFFF),
error: Colors.redAccent,
onError: Colors.white,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: Colors.white,
brightness: Brightness.dark,
);
}
Yep! We just created a beautiful Theme for our application. now what?
Setting ThemeData
sets the desired themes in MaterialApp
.
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
themeMode: ThemeMode.light, //or ThemeMode.dark
theme: GlobalThemData.lightThemeData,
darkTheme: GlobalThemData.darkThemeData,
home: const ShowCaseHome(),
);
}
}
This will give a default light theme to your application, you can change the mode to dark. You can explore the power of InheritedWidget or Provider for switching the dynamically. It is out of the scope of this article, if you need we can discuss it in detail in a future article.
Hope you get some valuable information, Thank you for reading 🤗.