All language subtitles for 30. Configuring & Using Themes

Regarding the styling, right now our app doesn't really have a uniform style.

We have the blue app bar,

we have the blue chart placeholder, the blue fab, here the floating action button and then the purple

custom style here

and in general thus far when we wanted to style something, like here in transaction list, when I want

to style the color of my amount, of the border around the amount, I had to do that manually with colors

purple. We can do that

but what if we decide that red would be a better color?

Then we manually have to change this here to colors red and we have to change the text color here to

red

and we also have to go to our main.dart file and there, we have to find our app bar and on the app bar,

we can set the background color to colors red. If we do all of that, it saves and yes, it works

and no I don't want to use red but of course, it's pretty cumbersome if we have to change this manually

in all these places.

It would be better if we had a central place of setting these colors and then we could tell Flutter

please use my globally defined color, my primary color, my secondary color and so on

and that's possible with a concept called theming.

We set up an application theme in the main.dart file and there in our MaterialApp. If we scroll up in the

main.dart file, here's our my app widget which is our actual root widget.

There we set up the title for our app,

this by the way is the title you see when the app is in background mode, in the task manager and so on,

so I'll name this personal expenses.

I also want to use this as a title by the way in my app bar,

so here I'll also name this personal expenses but of course the title is not the thing for which I came

there.

Instead here in your MaterialApp, you also can add a theme argument and the theme argument allows you

to set up a global application-wide theme and theme basically means a combination of colors, of text

styles, of font sizes that your entire application uses, that many of Flutter's widgets then use as a default

and that you always can tap into when you want to color your own widgets.

So how does such a theme look like,

how do we define it?

Theme takes a theme data object and now that's not a widget but a normal object based on a class,

the theme data class however is provided by Flutter. Now theme data, as you can tell, has a lot of arguments

which you can configure.

The good thing is you don't have to configure all of them,

a lot of the theme settings are derived from other theme settings so that you only have to define a couple

of main settings unless you really want to control every nitty gritty detail in your app which you also

could if you need that. The most important thing you can define here is the primary swatch.

There also is a primary color,

the difference is that the primary color is one single color, like blue or red and the primary swatch

is based on one single color but it automatically generates different shades of that color automatically

behind the scenes

and many of Flutter's default widgets need these different shades and if you only define your primary

color and not the swatch, then these shades are not available and therefore all these Flutter widgets

will fallback to other defaults or use your primary color which can, in some places, look worse.

So you should define a primary swatch there and what you pass there is still a single color though,

so all these shades are then generated automatically based on the color

you could say. To be really precise, colors gives you a bunch of material color colors and material colors

are more complex objects which have the color itself as well as all the shades included and primary

swatch is then able to pull out these shades. But that's happening behind the scenes, you can simply choose

one of these colors and of course it's totally up to you what you want to use,

I will use purple as my primary color and now also swatch. The effect of that is that

when I go down to the app bar and I make sure that the background color, this red color is removed and

I then save this all, that I automatically get a purple app bar

but also a purple floating action button just because I set this default primary swatch. Of course

here, my boxes are still red because I'm styling these manually, I'm not telling Flutter that I want to

use my theme here. To tell Flutter that I want to use my theme here, I can use theme, which is an object provided

by Flutter and it's available in this file because I'm importing material.dart. So I'm accessing theme

here, then auth context and that in the end is something we also saw on the navigator in the lost

lectures and this in the end just tells Flutter

here's my context object and context is something I get passed to the build method automatically by

Flutter and as I mentioned earlier, context is essentially an object with a lot of metadata about this

widget and its position in the widget tree and one thing context also contains in the end is a reference

to our theme data

you could say. It gives this widget a direct access to our theme data so that we don't have to pass that

theme data down to that widget through the constructor

because if every widget needs to get the theme data through the constructor, you would pass the theme

data around a lot and therefore this is way more convenient,

it gives us a direct tunnel to the theme data.

This is a very elegant way of managing this and that's also a topic we'll dive into later when we talk

about different state management options, where we can pass around our own data in a similar way.

For now, let's just use the theme by getting access to the context which gives us the direct tunnel to

the theme data defined globally

and now there you see you have a bunch of properties. You can for example access the primary color or

if you wanted to, you could access a darker or a lighter version of the primary color, that's that shading

I mentioned, there are different shades. Here I want to use the primary color and I'll do the same here

on my text as a text color, so theme of context primary color.

Now of course I still define my color manually here but I point at the theme and the advantage is that

if I now change my theme, let's say I go back here and I change my theme here to green, then all these

places change simultaneously and you don't have to manually pick and edit all these colors and

that's the huge advantage of using a theme.

I want to go with purple here though

and besides the primary swatch, you'll often also have an accent color. The accent color like the name suggests

is an alternative color because often you want to mix colors and you can look into the official material

design documentation if you want to get ideas for how to mix and match colors and which combinations

work, I really like the amber color, which is a yellowish color combined with purple. If I save this, we

see for example that now that we define that alternative color, the floating action bar is actually configured

to use that accent color.

Remember that floating action button is a default button or a default widget provided by Flutter and

internally, it's simply configured to use the accent color if available and fallback to the primary color

if it's not available

and that's pretty neat.

Here we see the accent color in action and it was just one line of code and something totally different

in our app changed. Now

besides that, you can configure a lot of other things too,

you could for example set the overall app bar theme if you wanted a different theme for the app bar

and so on and we'll come back to that theme data throughout this module and throughout this course. Playing

around with it is something you can always do, at the end of this module in the useful resources lecture,

you'll also find a link to the official theming docs where you can learn more about that and about the

many ways of adjusting this and using themes is a crucial and super important feature in Flutter apps

because it makes styling and coloring so much easier.