👨🏼‍💻Flutter|How to use ThemeData - ThemeExtension in Light/Dark Theme Design? (New feature of Flutter 3.0

Flutter 3.0

Hi Everyone👋 In this article, I will talk about “ThemeExtension” which is new feature of Flutter 3.0.

Introduction

Flutter 3.0 was released with Dart 2.17 on 5 May 2022. Of course this new version came with some beautiful changes. One of them is “Theme Extension” feature, which will allow us to use themes more widely. Let’s see how to use this new feature together:

ThemeExtension

ThemeData is the widget where we manage almost everything related to the theme. “Theme Extension” is a parameter we add to ThemeData. It appears under the name “extensions”:

Iterable<ThemeExtension<dynamic>>? extensions,

Let’s see how this new feature is added to the theme.

First, let’s look at the code part of our ThemeExtension class:

ThemeExtension

As you can see, the ThemeExtension abstract class has two mandatory methods.

Now let’s see how to use this feature:

Implementation

We will get all the style of the widget we design from the extensions parameter of the ThemeData widget.

We will add different colors and text styles as extensions for both light and dark theme. Let’s see how to do this together:

We will add the following features to the style of the card we will create:

i. titleTextStyle

ii. subtitleTextStyle

iii. backgroundColor

iv. circleBackgroundColor

1. Creating Theme Extension

We will create one ThemeExtension and use it in the themeData:
The ThemeExtension type must be the same as the type of the class we are creating:

class CardTheme extends ThemeExtension<CardTheme>{}

Now, let’s add two methods by necessity. by default it is added as:

Here it can be seen that the return types of the two methods are ThemeExtention<CardTheme>. We will change these return types to CardTheme:

Now, let’s add the card style elements we listed above to our CardTheme class as a constructor:

Constructor

Let’s write the same constructor parameters as a parameter to the copyWith method and complete this method:

Now let’s fill in the lerp method:

Our CardTheme class is fully formed. You can see all the code below:

2. Creating ThemeData

Here we will create ThemeDatas for both light and dark theme in a Map. But we will only add extension and scaffoldBackgroundColor in it.

3. Editing the MyApp widget

First let’s write a function to choose between light/dark theme:

bool isLight=true;

void _selectTheme(){
  setState(()=> isLight=!isLight);
}

Now let’s edit the MaterialApp widget and add the themes:

That’s all for the changes we’re going to make in MyApp. Now let’s move on to the card design:

4.Card Design

Here we will use the themeextension we created above.

Here’s how we access ThemeExtension:

CardTheme cardTheme = Theme.of(context).extension<CardTheme>()!;

Now let’s use this in card design:

5. Creating the HomePage Widget

Firstly, let’s add the function to the constructor of the HomePage widget to help us change the theme:

Secondly, let’s add the Appbar and add the switch button to this appbar that will help us change themes:

After adding our card, the final version of our HomePage widget will look like this:

This much!!! Now you can further develop your theme using ThemeExtension. You can find the whole code here.

Output:

Testing theme extension

Conclusion:

The use of ThemeExtension is very important to make our work easier. We need to start using this feature for more effective themes without wasting time :)

I wish everyone a pleasant Flutter week :)

References

ThemeExtension class — material library — Dart API