Flutter – Themes

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.
• isMaterialAppTheme: 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.

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: 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'),
    ),
  )
);

Creating a Container:

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

Applying the Theme:

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: