Theming the Flutter App

Table of Contents

• intro
• What is a Theme?
• How can I use it?
• Summary

Introduction

When you develop your app did you get bored from writing the Text widget style every time or giving color to your widgets, what if you have light and dark themes how you are going to manage this all and overwrite every color, font, and style of every widget on the screen? If you are a beginner in Flutter, you might get tired of overwriting all these details and ask yourself “Is there a way to make this better?”. If you look at YouTube or any code you will find that everyone is coding the color and the style as you are doing in your project. Still, when your project is getting bigger you need to write better code and be more efficient and productive as well. For this, you need theming.

What is a Theme?

You might have asked yourself before why each flutter application starts with the same blue color? or how has the counter text style been settled up like that? Or how can you change the theme from light to dark? If you have this question before in your mind, you are in the right place to get more information about them.

First of all, in every Flutter project, there is the MaterialApp you will see that there is a field called theme. By default, the theme is taking ThemeData as a widget. Inside the ThemeData you can write your own colors. But for that, you need first to understand the “Material Design” design language so when you see “Primary Swatch” you will understand what it is and where it is used.

For example, if you change the color of the “Primary Swatch” to Red color this will happen in the app.

You can see here that the AppBar and the FloatingActionButton changed to a red color without writing any extra lines of code!

So in short we can say that 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.

How can I use it?

Now you know what the theme is and why we need it for, but I think you do not know how to use it or call it inside your application. To call the theme data inside anywhere in your app, you should write this line.

Theme.of(context)._______ //what you want to call

So if you want to call the text theme style you can write this like.

Theme.of(context).textTheme.bodyText1

So with this line, it will give that text style to bodyText1 that you have entered in the theme data in your MaterialApp widget. This is also contacting the color so if you want to call the primary color you will have this line.

Theme.of(context).primaryColor

Summary

The theme is Flutter is like any other widget that helps you to control your UI with the style that you want especially if you want to make your application look like native applications UI. Also, the theme is to help you get over control of any color and style in your application and edit them in a fast way so it will apply automatically all over your app.

If you want to learn more, you can check the Flutter codeLabs or visit the Flutter theme document about the theme.