Setting up a theme in Flutter involves defining and customising the visual aspects of your application, such as colours, fonts, and other design elements. Flutter provides a powerful theme system that allows you to create a consistent look and feel across your entire app. Here’s a step-by-step complete guide to setup theme in Flutter:
In case, you have not created a Flutter project, create a new Flutter project using the following command in your terminal or command prompt:
flutter create flutterishtheme
cd flutterishthemeIn main.dart file you will see a build method that returns MaterialApp widget. This widget contains the configuration of theme. This widget have property theme that accept ThemeData object.
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}The above mention code snippet is default code snippet of Flutter. We can modify the theme data in the same file but we will create a separate file following standard of coding. Create a file in lib directory or that would be nice if we create a sub-directory under lib directory that is completely up to you, how you would like go. Create a theme.dart under lib/theme directory. You can give it any name of your choice.
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class ManageTheme {
ManageTheme();
// This theme color schema we will be using for light theme.
// You can choose other color varient of you choice here.
var kColorScheme = ColorScheme.fromSeed(
background: const Color.fromRGBO(255, 255, 255, 1),
onBackground: const Color(0xFF2F2F2F),
seedColor: const Color(0xFF7FC7D9),
primary: const Color(0xFF7FC7D9),
secondary: const Color(0xFF2F2F2F),
brightness: Brightness.light,
);
ThemeData getTheme(BuildContext context) {
final theme = ThemeData().copyWith(
textTheme: GoogleFonts.robotoTextTheme().copyWith(
bodyLarge: GoogleFonts.roboto(
fontWeight: FontWeight.normal,
fontSize: 22,
color: kColorScheme.onBackground,
),
bodyMedium: GoogleFonts.roboto(
fontWeight: FontWeight.normal,
fontSize: 19,
color: kColorScheme.onBackground,
),
bodySmall: GoogleFonts.roboto(
fontWeight: FontWeight.normal,
fontSize: 17,
color: kColorScheme.onBackground,
),
),
);
return theme;
}In above example, we create a class ManageTheme that returns the ThemeData object for theme property. We defined the color schema for our theme and body text for our theme. You can provide other colors of your choice for different varients. With this we can now setup theme in flutter.
Now what to do if we need to create a dark theme. Using the same pattern we will create a dark theme property in the ManageTheme class.
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class ManageTheme {
ManageTheme();
// This theme color schema we will be using for light theme.
// You can choose other color varient of you choice here.
var kColorScheme = ColorScheme.fromSeed(
background: const Color.fromRGBO(255, 255, 255, 1),
onBackground: const Color(0xFF2F2F2F),
seedColor: const Color(0xFF7FC7D9),
primary: const Color(0xFF7FC7D9),
secondary: const Color(0xFF2F2F2F),
brightness: Brightness.light,
);
ThemeData getTheme(BuildContext context) {
final theme = ThemeData().copyWith(
textTheme: GoogleFonts.robotoTextTheme().copyWith(
bodyLarge: GoogleFonts.roboto(
fontWeight: FontWeight.normal,
fontSize: 22,
color: kColorScheme.onBackground,
),
bodyMedium: GoogleFonts.roboto(
fontWeight: FontWeight.normal,
fontSize: 19,
color: kColorScheme.onBackground,
),
bodySmall: GoogleFonts.roboto(
fontWeight: FontWeight.normal,
fontSize: 17,
color: kColorScheme.onBackground,
),
),
);
return theme;
}
var kDarkColorScheme = ColorScheme.fromSeed(
seedColor: const Color.fromRGBO(250, 200, 25, 1),
background: const Color.fromRGBO(15, 15, 15, 1),
onBackground: const Color.fromRGBO(255, 246, 217, 1),
secondaryContainer: const Color.fromRGBO(160, 160, 160, 1),
onSecondaryContainer: const Color.fromRGBO(160, 160, 160, 0.30),
brightness: Brightness.dark, // This is important.
);
ThemeData getDarkTheme(BuildContext context) {
final theme = ThemeData.dark().copyWith(
colorScheme: kDarkColorScheme, // Here will define our color schema for dark theme.
textTheme: GoogleFonts.robotoTextTheme().copyWith(
bodyLarge: GoogleFonts.roboto(
fontWeight: FontWeight.normal,
fontSize: 22,
color: kDarkColorScheme.onBackground,
),
bodyMedium: GoogleFonts.roboto(
fontWeight: FontWeight.normal,
fontSize: 19,
color: kDarkColorScheme.onBackground,
),
bodySmall: GoogleFonts.roboto(
fontWeight: FontWeight.normal,
fontSize: 17,
color: kDarkColorScheme.onBackground,
),
),
);
return theme;
}
}Now get back to our main.dart file in Material widget. At the last step we need to connect our theme configuration with app. In above example, we configured theme for colors and body text but this is not limited to that only. You can customise theme for Appbar, Buttons, InputDecoration, etc.
import 'package:flutter/material.dart';
import 'package:flutterishtheme/view/screen/navigator_screens.dart';
import 'package:flutterishtheme/view/theme/theme.dart' as theme_data;
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: theme_data.ManageTheme().getTheme(context),
darkTheme: theme_data.ManageTheme().getDarkTheme(context),
themeMode: ThemeMode.light, // Here we pass which theme we want. This can be managed with state
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}In above code, we have configured our theme configuration for light and dark theme with theme and darkTheme property. What is our current theme mode that we set in the themeMode property. This you need to manage with help of any state management system, such as Riverpod.
That is all we need to do to setup theme in flutter.
