Flutter - Themes - GeeksforGeeks

23 Feb, 2022
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:
const Theme(
{Key? key,
required ThemeData data,
bool isMaterialAppTheme: false,
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.
isMarerialAppTheme: This property takes in a boolean (final) as the object. If it is set to true then theme uses the material design.
In this article, we will look into the same widget in detail by creating a simple app with the Theme widget. To do so follow the below steps:
Create a theme
Create a container to apply the theme
Use the same theme in part of the application (or, the entire application.)
Now, let’s look into the above steps in detail.
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: title,  theme: ThemeData(    // UI    brightness: Brightness.dark,    primaryColor: Colors.lightBlue[800],    accentColor: Colors.cyan[600],     // font    fontFamily: 'Georgia',    //text style    textTheme: TextTheme(      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),    ),  ));
In Flutter a simple container can be defined as below:
Dart
Container(  color: Theme.of(context).accentColor,  child: Text(    'Hello Geeks!',    style: Theme.of(context).textTheme.headline6,  ),);
To override the default theme of a widget in Flutter one can wrap the same widget inside the Theme widget. A Themedata() instance can be created and passed to the respective widget as shown below:
Dart
Theme(  data: ThemeData(    accentColor: Colors.yellow,  ),  child: FloatingActionButton(    onPressed: () {},    child: Icon(Icons.add),  ),);
You can extend the same Theme app-wide using the copyWith() method as shown below:
Dart
Theme(  data: Theme.of(context).copyWith(accentColor: Colors.yellow),  child: FloatingActionButton(    onPressed: null,    child: Icon(Icons.add),  ),);
Complete Source Code:
Dart
import 'package:flutter/foundation.dart';import 'package:flutter/material.dart'; void main() {  runApp(MyApp());} class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    final appName = 'GeeksForGeeks';     return MaterialApp(      title: appName,      theme: ThemeData(        brightness: Brightness.light,        primaryColor: Colors.green,        accentColor: Colors.deepOrangeAccent,        fontFamily: 'Georgia',         //text styling        textTheme: TextTheme(          headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),          headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),          bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),        ),      ),      home: MyHomePage(        title: appName,      ),    );  }} class MyHomePage extends StatelessWidget {  final String title;   MyHomePage({Key key, @required this.title}) : super(key: key);   @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(title),      ),      body: Center(        child: Container(          color: Theme.of(context).accentColor,          child: Text(            'Hello Geeks!',            style: Theme.of(context).textTheme.headline6,          ),        ),      ),      floatingActionButton: Theme(        data: Theme.of(context).copyWith(          colorScheme:          Theme.of(context).colorScheme.copyWith(secondary: Colors.red),        ),        child: FloatingActionButton(          onPressed: null,          child: Icon(Icons.arrow_circle_up),        ),      ),    );  }}
  
Output:
 
 
ankit_kumar_
mayankpatidar275
android
Flutter
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Listview.builder in Flutter
Flutter - DropDownButton Widget
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - BoxShadow Widget
Flutter - Checkbox Widget
Flutter - Flexible Widget