Original subtitles

0 So now that we've got our app, which currently has a single button, to be able to play a single sound 1

namely note1, how can we have lots of buttons? 2

More specifically, seven buttons. So that each of them plays a different sound. As a challenge, 3

I want you to build seven buttons on the screen. And they should play the sound from note1 through 4

to note7. 5

Once you're done, this is what you should have. 6

You should have seven buttons, each with a different color so you can tell them apart. And going from 7

the top to the bottom, 8

when you click on them, you should hear a different sound. 9

So seven sounds, seven buttons, each having a different color. 10

Don't worry too much about the layout for now. 11

We're going to stretch it out a little bit later on. 12

But for now, let's just concentrate on the functionality. 13

So pause the video, and try to complete this challenge. 14

All right. 15

So this shouldn't be anything too difficult here. 16

But we do have to write quite a bit of code. 17

First things first. 18

I'm going to get rid of our center widget and we're going to do that by holding down OPTION OR ALT, hitting 19

ENTER and remove widgets. 20

Now instead, I want my flat button to be inside a column. 21

So I'm going to wrap it with a column. 22

Now I have a column with a single flat button which simply has the text that says 'Click me' which I don't 23

really need anymore. 24

So I'm going to delete that. 25

But what I do want, is I want our flat button to have a color. 26

So I'm going to give it a red color to begin with. 27

So this is gonna be our first button. 28

And now that I'm done with that flat button, I'm going to copy it and for time sake, I'm gonna paste it 29

in here six times. So we should have one, two, three, four, five, six and seven buttons. 30

And now we're going to go through this and update each of them. 31

So we're going to change the colors, so they each have a different color. And I'm just gonna go down the 32

rainbow. If you are more creative, then feel free to pick your color palette 33

All right. 34

So that's done for all of our buttons. 35

And now if we hit save and just check out the result to see if it looks, yes it looks pretty much like 36

what we saw in the demo. 37

We've got seven buttons, each with a different color. 38

Now flat buttons, by default, come with a width and a height. But we don't have to worry about that too 39

much for now. 40

We're just going to focus on making it play different sounds. Because at the moment, they all play note 41

1. And that is of course, we're telling it to play note1. 42

Remember that the player is kind of like a C.D. player, 43

right? 44

And the part that we're putting here is the C.D. We're telling it what to play. 45

So we want our first button to play note1. 46

The second to play note 2, 3, 4 and so on. 47

So now that we've updated all of our file names, telling each button to play a different sound, 48

let's hit save and let's see if that worked. 49

Perfect. 50

So that should have been pretty simple. But you can see that our code isn't very pretty because there's 51

a lot of repeated code in here, 52

right? 53

How can we get rid of the parts that are repeated so that we have less code on our screen which means 54

less things to go wrong and less places to look for bugs? 55

Well we're going to build a function. Remembering how we built functions in the Dicee module, we started 56

with the void keyword, 57

and then we gave our function a name. So let's call this one playSound. 58

And inside this function, we're going to transplant our two lines of repeated code. And I'm going to simply 59

cut it out from our onPressed for our flat button, and I'm going to paste it here to move that 60

functionality over. And then, instead of having to type out two lines of code here, I'm simply going to 61

call playSound. And let's go ahead and do the same for all the other places. I'm going to copy this function 62

playSound and I'm going to replace all the places where I need that functionality namely creating a 63

new audio player and playing a sound with this new function that I just created. 64

Now some of you already realizing that there's a bit of a problem because we wanted each of the buttons 65

to play a different sound, and not for all of them to play the same sound, note1. In Dicee, 66

the only type of function that we learned about was the most basic type of function, 67

and it looks like this. 68

It simply has a name and it allows you to reduce repeated code by bundling code together into a block 69

of code, and giving that entire block of code a name to refer to. 70

So that means when it's needed, then you can call the function by its name, and it will search out where 71

that function was created to execute all the lines of code inside the curly braces of that block of 72

code. 73

Now we're coming up against a bit of a problem here, because I want this button to play note1 and 74

this one to play note2, and 3, and 4, and so on and so forth. 75

So we actually need these two lines of code but we need one thing to be different about them. 76

We need this to be either 1 or 2 or 3. 77

So how can we do this? 78

Well this is where input arguments to functions come in handy, because we can simply specify in these 79

parentheses or round braces, which we've never used before we've always kept it empty. 80

We kept it empty when we called it and 81

we kept it empty when we created it. But now is their moment to shine. Inside the parentheses, 82

we can specify that this function requires an input, and we specify the data type that the input has 83

to be. 84

So in this case if we're going from note1 to note7, then that input has to be an integer, 85

right? 86

It has to be a whole number either 1 or 3 or 7 and whatever it is that we need to replace this particular 87

number. 88

Now in addition to the data type, we have to give it a name because we can have multiple inputs and we 89

need to be able to refer to it inside the function. 90

So let's give this one a name of sound 91

Number. It's the note number that we want to play. 92

Now this is completely arbitrary. 93

You can call it anything you want here. But this is what makes sense to me in this moment. 94

So right now inside this function, we now have access to that input whatever it may be in the future. 95

And we're going to say that instead of hard coding the file name that we're going to tell our player 96

to play, we're going to instead replace it with a dollar sign and the name of that input. 97

So now depending on what we pass in here, it will be replaced inside here and we'll play the sound that 98

we specified in the input. 99

So now you can see we've got some red squiggly lines around here because it's saying there's actually 100

an input or a argument that's expected, but zero found. 101

So let's provide that argument, let's put 1 and 2 and 3 and 4 and 5 and 6 and 7. 102

OK. 103

So now let's hit save. And we have exactly the same functionality as before. Our sound files are all different 104

that's being played. 105

But we've reduced the number of lines of code dramatically by using a function to group together the 106

functionality that's repeatedly used in our code. In the next lesson, 107

for those you guys who are new to programming and you want to learn about how these functions with inputs 108

work in more detail, 109

that's what I'm going to cover. Now if you're an experienced programmer and you want to skip ahead to 110

learn more about Flutter development, then feel free to skip that lesson and continue to the next one. 111

So make your choices, and I'll see you on your next lesson.