All language subtitles for 9. Refactoring Our App

So now that you've learned about all three types of functions in Dart, can you try and solve this problem
1

that we have here and make our error go away?
2

So if you haven't fixed it yet,
3

pause the video and try and complete the challenge. All right.
4

So at the moment, we've got the arrow that says the expression here is a type of void and therefore cannot
5

be used.
6

And the reason is because this function buildKey doesn't return anything. It outputs void which means
7

it outputs nothing.
8

So in order to change this, we have to change the output type and also use that return keyword to specify
9

what needs to come out of this function.
10

So first let's change the void to the return type, and what is going to come out of this function?
11

Well, essentially we want to have a whole bunch of expanded widgets in each of these places where we're
12

calling buildKey. So we can simply specify that data type of our expanded widget, so we can write expanded
13

write here.
14

And now this function, once it gets called, should return something that has a data type of expanded.
15

And that's exactly what we're going to do here.
16

We're going to write return.
17

And the thing that we're going to be returning is this expanded widget.
18

So now, each time we call buildKey, it will go and find where this function was created,
19

and it will look inside the curly braces of this function to see what it needs to do.
20

And in this case, it simply just needs to return an expanded widget which contains a flat button which
21

has a red color
22

and when it gets pressed, it plays note1.
23

So let's save this and run this in our simulator. And you can see we have a whole bunch of red buttons.
24

And very faintly, you can see where they separate from each other.
25

So this works but this doesn't look great, right?
26

And we've also lost all that functionality that we added previously. But we've got our function now so
27

we can start providing an input in between these parentheses to tell our function to build a different
28

expanded widget each time.
29

So for the first one, we might want to build one that has a color of red, and it plays sound 1. But for
30

the second one, we probably want it to have a different color and play a different sound.
31

So we have our buildKey and in between the parentheses, we can specify the inputs which has a color
32

property, so we could write colors.red.
33

And it also has a sound number property,
34

and this one is going to take a integer.
35

So in this case, it's going to be the sound number 1 that's going to be played.
36

So now the challenge is can you change the code so that we're still using this buildKey function to
37

build each of our Xylophone keys and update the rest of this code so that we get different colors and
38

different sounds for each of the keys that we're building?
39

Pause the video and try to complete this challenge.
40

All right.
41

So first things first, let's try and make this code work first.
42

Now in order to do this, our build key function needs to be able to accept some arguments or some inputs.
43

And here it says well, this thing called color and this thing called sound number isn't defined.
44

So let's go ahead and define it right here. And remember that if we want to have named parameters, then
45

we need to enclose the inputs inside some curly braces, like this.
46

And the first input has a data type of color, and we decide to call that property just the word color,
47

but of course in lower case.
48

And then the second property was called sound number, and it has a data type of integer. So now, this line
49

no longer gives us an error here
50

because it's now valid code. We're providing a color and we're providing a sound
51

number. But we now need to use what we get through the input inside this buildKey function.
52

So instead of using color.red, we're going to use the color that we get from our input. And instead
53

of playing the sound, that's sound 1, then we're going to play the sound that is the sound
54

number,
55

whatever it may be that's passed in as the input. For this key, the color input is red,
56

so that will go in here and the sound number is 1,
57

so that will go in here. And we're going to update all of these other build keys so that we get a different
58

number and a different sound.
59

I'm just gonna copy that and paste it a few times. And let's just make sure that we've got 1, 2, 3
60

4, 5, 6 and 7. And now I'm gonna change all the colors.
61

All right.
62

So now if we hit save, we should see all our buttons change to the corresponding color that we're using
63

to build each key.
64

Now all we need is to change each of these sound numbers so that when they get pressed, they play different
65

sounds.
66

All right.
67

So now we've dramatically reduced the amount of code that's required to build our Xylophone app by building
68

an expanded widget
69

each time we need one.
70

And because we have these inputs, we're able to customize them for each key so that they each have a
71

different color and they eat play a different sound.
72

And this is all thanks to the abilities of functions. In the next lesson,
73

I want to talk about one last thing that's related to functions and it's this syntax right up here.
74

Now previously, we kind of glossed over this until we started covering functions. But in the next lesson,
75

I'm going to talk about this in more depth.
76

So all of that and more, I'll see you on the next lesson.