Themes are an integral part of UI for any application. Themes are used to design the fonts and colors of an application to make it more presentable. In Flutter, the Theme widget is used to add themes to an application. One can use it either for a particular part of the application like buttons and navigation bar or define it in the root of the application to use it throughout the entire app.
Constructor of Theme Class
Theme Theme({
Key? key,
required ThemeData data,
required Widget child,
})Properties of Theme Widget
- child : The child property takes in a widget as the object to show below the Theme widget in the widget tree.
- data : This property takes in ThemeData class as the object to specify the styling, colors and typography to be used.
In this article, we will look into the same widget in detail by creating a simple app with the Theme widget.
Steps to Implement Theme in Flutter
Step 1 : Creating a Theme
Use the Theme widget to create a theme. In themes some of the properties that can be used are given below:
- TextTheme
- brightness
- primarycolor
- accentColor
- fontFamily
A simple theme would look like below:
MaterialApp(
title: 'My App',
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
colorScheme: ColorScheme.dark(
primary: Colors.lightBlue[800],
secondary: Colors.cyan[600],
),
fontFamily: 'Georgia',
textTheme: const TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
),
);
Step 2 : Creating a Container
In Flutter a simple container can be defined as below:
Container(
color: Theme.of(context).colorScheme.secondary,
child: Text(
'Hello Geeks!',
style: Theme.of(context).textTheme.headline6,
),
);
Step 3 : Applying the Theme
To override the default theme of a widget in Flutter one can write the floatingActionButtonTheme widget inside the Themedata() widget.
ThemeData(
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Colors.red,
),
),
Complete Source Code (main.dart)
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appName = 'GeeksForGeeks';
return MaterialApp(
title: appName,
theme: ThemeData(
floatingActionButtonTheme:
FloatingActionButtonThemeData(
backgroundColor: Colors.red,
),
appBarTheme: AppBarTheme(foregroundColor: Colors.white),
brightness: Brightness.light,
primaryColor: Colors.green,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.green,
secondary: Colors.deepOrangeAccent,
),
fontFamily: 'Georgia',
textTheme: const TextTheme(
displayLarge: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
titleLarge: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyMedium: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
),
debugShowCheckedModeBanner: false,
home: MyHomePage(title: appName),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({super.key, required this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Theme.of(context).colorScheme.primary,
),
body: Center(
child: Container(
color: Theme.of(context).colorScheme.secondary,
child: Text(
'Hello Geeks!',
style: Theme.of(context).textTheme.titleLarge,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.arrow_circle_up),
),
);
}
}
Output:
