Flutter - Themes

Last Updated : 04 Mar, 2025

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:

Dart

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:

Dart

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.

Dart

ThemeData( floatingActionButtonTheme: FloatingActionButtonThemeData( backgroundColor: Colors.red, ), ),

Complete Source Code (main.dart)

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),  ),  );  } }