All language subtitles for 11. Customising Widgets with Themes

All right.
1

So our slider is looking beautiful and it's working beautifully as well.
2

But for the keen eyed amongst you especially those who are designers, you will have noticed that there
3

is a major difference between our slider and their slider.
4

So one of the things is that they obviously have a white active side and a gray inactive side which
5

is very easy to change because we can simply tap into that property, acticeColor, and change it to colors
6

.white.
7

But as soon as you do that you'll notice that the thumb color,
8

so the color of the main toggle, also changes to the same color as the active track which is probably
9

not what you want.
10

Also if we look at this one, that holder or handle is much much bigger than what we have here which is
11

a tiny one.
12

So how do we make our design look more like this?
13

Well if we go over to the documentation on the slider class, you can see that we have our usual properties
14

which we change say the activeColor or the inactiveColor.
15

And once you get to the bottom of the list, you'll notice that there's nothing that allows us to just change
16

for example the size of that handle or the color of that handle without affecting this active track
17

here.
18

So what can we do beyond changing the properties of the slider?
19

Well here's one way of customizing a Flutter widget to be more in line with exactly the design that
20

you want.
21

And if we read through this, you can see that to determine how the slider should be displayed, a slider
22

uses the SliderThemeData available either from a SliderTheme widget or the ThemeData, a widget above
23

it in the widget tree. Or you can override some of the colors but fine-grained control comes from the
24

SliderThemeData.
25

This is one of the things that we can do and we talked about themes before.
26

So we already added a primary color to our app theme and we changed the scaffoldBackgroundColor across
27

our app using this ThemeData. But we also said that we can have specific themes just for individual
28

components.
29

We can do that by embedding widgets inside another widget.
30

So in this case we could embed it inside a SliderTheme and a SliderTheme has a property called data
31

which is expecting something called a SliderThemeData.
32

And once you hit ENTER, you can see that there's loads of things that you can set for example, the track
33

height or the activeTrackColor the inactiveTrackColor, the thumbColor, all of these things.
34

But in order to use a SlideThemeData like this, you would have to provide a value for everything because
35

otherwise it will default to null, which is no color or no trackHeight.
36

And if we had save right now, you can see that our slider is completely broken because none of these
37

properties can be null,
38

we had to provide a value. But what do you do if you're kind of happy with the default theme but you
39

just want to tweak a couple of things without having to provide like 20 values and type out all this
40

code?
41

Well there's something that's really helpful across all of the widgets that Flutter has and it's something
42

called .of.
43

So we know that we already have a default SliderTheme. And we can tap into it and use a method called
44

.of which will return the data,
45

so that data property, from the closest SliderTheme in the given context. So we can write SliderTheme
46

.of.
47

And then we could provide a build context which comes from right over here.
48

And this context is basically the current state of our app.
49

It's how our app appears as it is.
50

And that will include the current SliderTheme.
51

So then if we say .of, we get a copy of what it looks like by default as it is. And then we can write
52

again using that .copyWith which we saw previously where we copied over our dark theme and simply
53

added a couple of changes.
54

Now inside this copyWith, we can provide only the things that we want to change about the SliderTheme.
55

And we don't have to create the entire thing from scratch.
56

So the things that we want to change are for example the thumbShape.
57

So instead of having it as the default size, we can change its size by saying that we want a round slider
58

thumb shape which has a normal radius of 6 but we now want a larger radius.
59

We're going to change it to maybe 15.
60

And now you can see when I hit save, my thumb is a lot bigger. But notice that when I normally click on
61

it, it has a little overlay a little transparent outer ring.
62

And that's now gone because it's smaller than the normal fully opaque shape.
63

Let's go ahead and add that and make it bigger as well. So we can add our overlay shape to be a round
64

slider overlay shape.
65

And by default, notice that it's 16.
66

So just only one pixel bigger than our thumb shape.
67

So let's make it a lot larger.
68

Let's make it 30.
69

And now when I click on this, you'll see my overlay animate and show up. It's looking pretty good now.
70

What about our thumbColor?
71

Well we can change that using the thumbColor property, and we're going to change it to our previous
72

pink color which is a custom color that is going to be 0xFFEB1555.
73

And that's that pink color that we have pretty much throughout our app.
74

So let's hit save but our slider is not changing and it's because our activeColor is overriding that
75

thumbColor.
76

Let's get rid of it.
77

So let's add instead an activeTrackColor, which is going to be colors.white.
78

And now if we save, you'll notice that the left hand side is white, the right hand side is still gray
79

and our thumb is pink. But when we click on it, it doesn't actually have an overlay color.
80

So let's add a overlay color as well.
81

And that's going to be the same color that we have for our thumbColor but we want it to have a little
82

bit of a transparency.
83

Now here's where the first part of my color comes in.
84

Do you remember I mentioned that there's four components to the code here and it always starts out with
85

0x
86

and then it's two characters for the alpha or the transparency amount,
87

and then it's red green and blue? What if we wanted to make it more transparent?
88

Well we would modify these first two numbers.
89

Now I quite liked how much transparency I was getting in the beginning when I had the default amount
90

enabled.
91

Now how can I find out what the default amount was?
92

Well I could go into my slider theme by holding down my COMMAND on Mac or CONTROL on Windows, and I
93

can click on the SliderTheme which takes me to my SliderTheme widget.
94

And here I can search for that overlayColor property and you can see that if we go through all of them,
95

you can see that the color is set as the primary color of the theme with a alpha amount that is something
96

called an overlayLightAlpha.
97

So let's try and find this overlayLightAlpha.
98

So I've highlighted it and hit COMMAND + F or CONTROL + F and we're going to go through this document and
99

you'll find it as a constant in here.
100

So they've set the overlayLightAlpha as 0x29.
101

So that gives us about 16% opacity they say.
102

So now if we copy that over to our color and we replace the first four characters with 0x29,
103

and we hit save, then you'll see that our thumb now has a overlay color of 16% opacity
104

of that pinkish color that we've been using. And this now looks fully like the design that we see over
105

here. So as I mentioned before, we can either keep our slider theme here or if you had multiple sliders
106

in your app and you wanted a app wide slider theme, then you could copy your slider theme and paste it
107

in here. And that would mean that all of the sliders across your app will have the same theme.
108

But in our case, we only have one slider so it doesn't really matter where we have it.
109

And I prefer having everything related to the same component all together in the same place. And to just
110

keep it consistent, our inactiveTrackColor should probably also go in here.
111

So we'll add the inactive track color and we'll paste this color over into here and we can delete it
112

from here.
113

So that means all of our styling is done in our theme and all of the properties or functionality is
114

done inside the actual slider component.
115

Now you can of course extract this widget if you wanted to use it in multiple places, but in our case
116

we only really have one.
117

So I'm just going to keep it in as it is. And also if you wish to,
118

you can move all of these colors and themes into a constant and you could keep this main file a little
119

bit cleaner if you wanted to. In this lesson,
120

what I'm trying to show you is that anything is possible. Any design that you can dream up or your designer
121

can dream up is fully possible either by creating your own widgets that combine different Flutter widgets,
122

or whenever you're using Flutter widgets such as material components, you can always tap into the theme
123

to be able to customize it further than just the properties that it normally comes with.
124

So for example if you are using a alert dialog that comes from the material component, then you can take
125

a look in the theme class then you see that there's a dialog theme which you can change. Or if you're
126

using an app bar, you can change the app bar theme or the text theme or an icon theme or a tab bar theme.
127

Basically all of these material components can be further fine tuned using the theme data.
128

Now what if that is not enough? Because at the moment, we're using a slider because it looks very similar
129

to the design that we're trying to achieve.
130

So why reinvent the wheel right?
131

Why not just customize it?
132

But what if it's not enough?
133

What if we wanted to create something that is really different? Well we can also build our very own widgets
134

from the very basic Flutter components such as basic shapes like circles or squares. And then change it's
135

elevation or change its background color and change how it behaves, completely define our own widgets
136

and the way it should work.
137

And we're going to be exploring exactly that in the next lesson.
138

So all of that and more, I'll see you there.