Hey there, what is up? This is Flutter
Mentor and today we're gonna figure out how to use themes in Flutter, in order to
make your life easier. The UI is super simple. Just three different containers, one text widget, one elevated button and a floating action
button. That's it, let's get this started with. Theming is, essentially, the art of making things
easier for you by changing up the default Flutter colors. Unlike other videos, I even let the
appBar color be the default one, so that you can see it change as we change the themes and its
properties. And the first thing we need to do is go to main.dart. Over here on the material app,
we already have the title defined. And the theme is right here. Now this that is currently here, is
pretty much the exact same as nothing being here. This and this are the same. And this would also be
the same right here. This is how it looks like in default, without doing anything else. So, typing
this in, is literally pointless. But when you check out your main.dart, it'll look like this. Just
type in theme, themeData. And then within themeData, as you can see, there are a lot of properties. In
fact, you can come over to the documentation and check out the ThemeData class. And here you can
see the properties more organized. Like this is how it's in the IDE, but if you scroll a little
bit further you'll see them all listed out and with short descriptions as well. For example, the
accentColor is the foreground color for widgets. Like, knobs, text, overscroll edge effect, etc. And
you can pretty much just read everything that it says. There are a lot of properties. If you
really want to be a theme master, then I advise you to read them all. And experiment with them,
because that's the only way you'll know what they really do. But let's get back to the IDE. Now, I
just showed you that, this right here would be the default version of the theme data... But if we want
we can make it ".dark", and that will massively change the display. And let me just check something real
quick. Yeah, let me take out the background color of the scaffold. So we can get the default colors.
So this is what it would look like without the ".dark". And now with the .dark, it looks like this.
Quite a heavy difference. You can notice the app bar color changed, the floating action button
changed, the background color also changed. And this body of text also changed. Because it used
to be black, but now that the background is black, Flutter automatically changes it to white because
that's the defined text color in the dark theme. And by the way you can also use darkTheme right
here and, as you can see here, "This is the ThemeData to use when a dark mode is requested by the
system". So, if you've ever wondered how to set up a regular theme and then a dark theme for those
who prefer the dark theme, this would be how. You just have this theme defined for regular - obviously
it wouldn't be dark - and then here you just have a different one. But that's just a detail I wanted
you to know, let's focus on the regular theme property. Let me show you how to customize the
theme data. You just need a ThemeData object and then you just change the property, for example
let's make the primary color Flutter's original color. And all the colors will change because this
right here is the dark theme version of Flutter's default themes, and we're going to revert it back
to the light version. So, everything's going to change. Something interesting is that they actually
changed the text color of the app bar - that would be because flutter decided that black would look
better, on this color, than white. If I made it pink accent it would go white. So, it's actually
really cool how flutter is intelligent and tries to help you when you change colors. So, you can
already tell that there's a lot of work behind the scenes. And by the way, just by changing the primary
color, if we had a bottom navigation bar or a tab bar it would also have the same color as the app
bar. However, I usually advise people to just use the primarySwatch. Because the primary color only
defines one color, and that's it. But the primarySwatch takes a material color and automatically
generates different shades of that color. The thing is, here you would have to give it an actual
material color from Flutter. If I save it, it will go back to the regular blue. So, if I have a custom
color, I usually just combine both. There's the custom color as a primary color, and then for the
primary swatch colors I just used a material color that's close to it. And here it shouldn't be this
blue but, like I said, it's material colors. If I change it to a blue accent color, you will see that
you can't. Because that's the material accent color. And that's because Flutter already has the shades
implemented. And just in case you're wondering what would change, I'm just going to make it red and
you will see these two change right here. But let's revert back to blue. But let's say we define
this color right here, and we want to manually apply it to our button, right here. Now, colors are
different. To change their color, you gotta do it like this. And then here, in the case of the elevated button
you gotta change the primary property. And instead of doing this, for example. We can use "theme.
of(context).primary Color. And I'm going to save it and it's going to change. Now, you might be
thinking that's the same thing. I could have just put in the color code. But once you have a whole
app, with a bunch of buttons it will be much better to change the color just in one place, rather than
in all of the buttons. And that's one of the main advantages of using themes. When I talked about the
different shades... for example here you can access primaryColorDark and if I save it it will be
a darker blue. You can tell this blue is darker than this one right here. And you can also do light
for example and it will be, well, lighter. But let's say you want to change the color of the floating
action button through your themes. You would do that through the accent color. For example, let's
make it some weird blue like this one: blueGray. If I save it, it has changed. And if you have a lot
of different pages with a floating action button, obviously it'll be easier to change it
through the theme data. And throughout all of my tutorial videos I've always had
the background color defined like this. But let me show you how to define it using
themes. And again, if you don't know how you change the scaffold background color, for example.
You can just look around here and you could literally just do Ctrl + F and just "background"
and then you just look like this. Eventually you would find it. For example, it's right here.
"scaffoldBackgroundColor". As you can see, there's literally so many different properties that I can't go
over all of them. The video would just take forever and you would probably not withstand to watch
it. And that's why I try to make videos as short as possible. But yeah, all you have to do
is type in scaffoldBackgroundColor, define a color and then save it. And that's it. The color
changed, I don't know if you noticed it, let me just use a different color just to make sure you got it.
There you go. But now, we can't see the text. So, let's change the text, shall we? Now, the text
you gotta do textTheme and then, if you use Ctrl + Q, you will see that it expects an object
of the type TextTheme. So let's give it that. TextTheme again. And as you can tell there's a
lot of different things to be defined as well. And we can come here and we can just click the
TextTheme. And here everything will be explained to you. They even give you a nice table to simplify
it, but if you just keep scrolling it'll get to this part. For example, BodyText1, used for emphasizing
text that would otherwise be BodyText2. And this is the default text style for material. So,
which one would we change, in order to change the text that was once visible right here? Pause
the video and think for yourself a little bit I hope you got it right. If you didn't that's
okay, because you're here to learn. Before the application of these two, it used to be body1
but now it's bodyText2. And in here it expects a TextStyle, so let's give it exactly
that. And then here, you just gotta give it a color. Let's make it white, and if we save it it goes to
white. As you can see. And this would also work if you try to use something like .dark, but not
in the same way. In this case, you have to use a different method, Which is the copyWith() method.
And within here, you could paste this. Although it does not have a primarySwatch. And let's get rid
of the text theme as well. Because it will fix it by default. And this isn't necessary either. So
if I save it... now it's in dark theme. Although, the floating action button actually didn't change,
if you wanted to change it you would have to use this property right here. Which takes exactly what
you would expect: the FloatingActionButtonThemeData And here, you could change for example the
background color and give it this color right here. And save, and then it would change the color. This
is why you should play around with the themes to really understand the differences between using
dark and light, and defining all the properties by yourself, etc. You will only master it if you
use it a lot. And you can actually go to a button and give it its own theme. You just wrap it with a
Theme widget, and then use the data property - which takes the theme data object. And then you just
do theme data, and let's make it ".light". And see the button's color change... There you go. Because
we just gave it its own theme, ignoring the whole theme of the app. And earlier I forgot that you
can also use this expression right here "Theme.of (context)", to apply it to any kind of widgets. We can
just make all these widgets have the theme color. Just with this piece of code, like so. And lastly, we
can also define a buttonTheme. In a new update, you can also define specific types of button themes.
So you can define a theme for elevated buttons, for text buttons, and for outlined buttons. Giving you
more control over buttons. But in this case let's just go over the button theme in general. Here
what you would do would be ButtonTheme.of(context), so that you don't have to define everything. This
way you can use the default and then just change what you want to change about it. copyWith() and in
here we can change for example the button color. Let's make it something completely different red
and then the text theme for example we can access the primary color, like so. And we can even define
a shape for all buttons. For example, let's use this rounded rectangle border. And then let's give it
a borderRadius. BorderRadius.circular(20). And if I save it, nothing will happen because
this kind of theme actually only applies to former buttons. If I just do this really
quick and I save it, now you see that the button theme was applied. And really quick, let me
just show you an elevated button theme in action. And here you just style it like you
would style any other elevated button. I'm just going to paste this for the shape part,
and then I would change this part to Colors.red. And very importantly, I cannot forget to
remove this right here, so that it actually uses the theme data. And I'm gonna save it. And there it is. I hope you now have a better grasp on how to use themes in Flutter. If this
video helped you, in any way please drop a like and subscribe if you want to keep on
learning Flutter, that's it for now. If you have any questions just drop them in the
comments below. This is Flutter Mentor, aand out.
