How to use theme in Flutter

Layout of any Flutter app greatly depends on a global theme that we can apply to any widget in the widget tree.

In this section we’ll learn how we can create a global theme object that can help us to change or modify our style globally, across the whole flutter app.

To do that, we will create a new ThemeData object first.

final globalTheme = ThemeData(
  primarySwatch: Colors.deepOrange,
  textTheme: const TextTheme(
    bodyText1: TextStyle(
      fontSize: 22,
      height: 1.2,
    ),
    bodyText2: TextStyle(
      color: Colors.blue,
      fontSize: 20,
      fontWeight: FontWeight.bold,
      height: 1.0,
    ),
    caption: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
      fontStyle: FontStyle.italic,
      height: 1.2,
    ),
    headline1: TextStyle(
      color: Colors.deepOrange,
      fontFamily: 'Allison',
      fontWeight: FontWeight.bold,
      fontSize: 60,
    ),
    headline2: TextStyle(
      color: Colors.black38,
      fontSize: 30,
      fontWeight: FontWeight.bold,
    ),
  ),
  appBarTheme: const AppBarTheme(
    backgroundColor: Colors.amber,
    // This will control the "back" icon
    iconTheme: IconThemeData(color: Colors.red),
    // This will control action icon buttons that locates on the right
    actionsIconTheme: IconThemeData(color: Colors.blue),
    centerTitle: false,
    elevation: 15,
    titleTextStyle: TextStyle(
      color: Colors.deepPurple,
      fontFamily: 'Allison',
      fontWeight: FontWeight.bold,
      fontSize: 40,
    ),
  ),
);

Usually the ThemeData class comes with a default configuration. With the help of context we can apply the Material App theme property across the flutter app.

However, we can also override the default configuration and modify it according to our choices.

Exactly that’s what we’ve done here, in the above code.

We’ve defined the configuration of the overall visual Theme for a MaterialApp or a widget sub-tree within the app.

That’s why we’ve included a Theme widget at the top of the sub-tree.

Normally, if we don’t create our own theme object, we can obtain the default configuration with Theme.of. Material components that typically depend on the colorScheme and textTheme. These properties are always provided with non-null values.

As a result, with the help of context of the nearest BuildContext ancestor the static Theme.of method finds the ThemeData value.

In our case, however, we apply the ThemeData object the following way.

class GlobalThemeSample extends StatelessWidget {
  const GlobalThemeSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Global Theme Sample',
      theme: globalTheme,
      home: const GlobalThemeSampleHome(),
    );
  }
}

Once we have declared overall visual Theme for our MaterialApp, we can apply the properties across the widget tree.

It starts with AppBar theme, right way.

class GlobalThemeSampleHome extends StatelessWidget {
  const GlobalThemeSampleHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Global Theme Sample',
          style: globalTheme.appBarTheme.titleTextStyle,
        ),
      ),
      body: const GlobalThemeBody(),
    );
  }
}

Next, the rest global theme properties are applied across the widget tree.

class GlobalThemeBody extends StatelessWidget {
  const GlobalThemeBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    String stringDate = DateFormat('yyyy-MM-dd – kk:mm').format(now);
    return Center(
      child: Column(
        children: [
          const SizedBox(
            height: 10,
          ),
          Container(
            height: 70,
            width: 70,
            color: Colors.blue[50],
            child: const Align(
              alignment: Alignment.topCenter,
              child: FlutterLogo(
                size: 60,
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Text(
            'Headline 1',
            style: globalTheme.textTheme.headline1,
          ),
          const SizedBox(
            height: 10,
          ),
          Text(
            'Headline 2',
            style: globalTheme.textTheme.headline2,
          ),
          Container(
            margin: const EdgeInsets.all(5),
            padding: const EdgeInsets.all(5),
            child: Text(
              'Body Text 1: Here goes some introduction about yourself.',
              style: globalTheme.textTheme.bodyText1,
            ),
          ),
          Container(
            margin: const EdgeInsets.all(5),
            padding: const EdgeInsets.all(5),
            child: Text(
              'Body Text 2: Here goes some more information regarding your works.',
              style: globalTheme.textTheme.bodyText2,
            ),
          ),
          Container(
            margin: const EdgeInsets.all(5),
            padding: const EdgeInsets.all(5),
            child: Text(
              stringDate,
              style: globalTheme.textTheme.caption,
            ),
          ),
        ],
      ),
    );
  }
}

Now we can run the app and see the output.

Certainly, we can apply more style. Moreover, we can create a custom Theme class and with the help of Provider package we can give user a chance to change theme anytime.

We’ll discuss that in a separate section.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter