Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,570 --> 00:00:06,960
So now that we've got our app, which currently has a single button, to be able to play a single sound
1
2
00:00:07,080 --> 00:00:11,730
namely note1, how can we have lots of buttons?
2
3
00:00:11,730 --> 00:00:18,210
More specifically, seven buttons. So that each of them plays a different sound. As a challenge,
3
4
00:00:18,210 --> 00:00:24,840
I want you to build seven buttons on the screen. And they should play the sound from note1 through
4
5
00:00:24,840 --> 00:00:26,330
to note7.
5
6
00:00:26,490 --> 00:00:29,530
Once you're done, this is what you should have.
6
7
00:00:29,610 --> 00:00:35,160
You should have seven buttons, each with a different color so you can tell them apart. And going from
7
8
00:00:35,160 --> 00:00:36,530
the top to the bottom,
8
9
00:00:36,600 --> 00:00:39,870
when you click on them, you should hear a different sound.
9
10
00:00:44,840 --> 00:00:49,220
So seven sounds, seven buttons, each having a different color.
10
11
00:00:49,250 --> 00:00:51,970
Don't worry too much about the layout for now.
11
12
00:00:52,100 --> 00:00:54,120
We're going to stretch it out a little bit later on.
12
13
00:00:54,170 --> 00:00:57,320
But for now, let's just concentrate on the functionality.
13
14
00:00:57,440 --> 00:01:03,400
So pause the video, and try to complete this challenge.
14
15
00:01:03,470 --> 00:01:03,770
All right.
15
16
00:01:03,800 --> 00:01:06,140
So this shouldn't be anything too difficult here.
16
17
00:01:06,170 --> 00:01:08,600
But we do have to write quite a bit of code.
17
18
00:01:08,630 --> 00:01:09,590
First things first.
18
19
00:01:09,590 --> 00:01:14,900
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
20
00:01:14,900 --> 00:01:18,510
ENTER and remove widgets.
20
21
00:01:18,530 --> 00:01:23,060
Now instead, I want my flat button to be inside a column.
21
22
00:01:23,060 --> 00:01:26,050
So I'm going to wrap it with a column.
22
23
00:01:26,060 --> 00:01:33,560
Now I have a column with a single flat button which simply has the text that says 'Click me' which I don't
23
24
00:01:33,560 --> 00:01:34,550
really need anymore.
24
25
00:01:34,580 --> 00:01:35,940
So I'm going to delete that.
25
26
00:01:36,080 --> 00:01:40,180
But what I do want, is I want our flat button to have a color.
26
27
00:01:40,250 --> 00:01:44,180
So I'm going to give it a red color to begin with.
27
28
00:01:44,180 --> 00:01:47,040
So this is gonna be our first button.
28
29
00:01:47,360 --> 00:01:54,230
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
30
00:01:54,230 --> 00:02:02,760
in here six times. So we should have one, two, three, four, five, six and seven buttons.
30
31
00:02:02,760 --> 00:02:06,360
And now we're going to go through this and update each of them.
31
32
00:02:06,360 --> 00:02:13,970
So we're going to change the colors, so they each have a different color. And I'm just gonna go down the
32
33
00:02:13,970 --> 00:02:20,060
rainbow. If you are more creative, then feel free to pick your color palette
33
34
00:02:28,010 --> 00:02:28,280
All right.
34
35
00:02:28,310 --> 00:02:31,200
So that's done for all of our buttons.
35
36
00:02:31,230 --> 00:02:38,790
And now if we hit save and just check out the result to see if it looks, yes it looks pretty much like
36
37
00:02:38,790 --> 00:02:40,270
what we saw in the demo.
37
38
00:02:40,290 --> 00:02:43,160
We've got seven buttons, each with a different color.
38
39
00:02:43,260 --> 00:02:49,710
Now flat buttons, by default, come with a width and a height. But we don't have to worry about that too
39
40
00:02:49,710 --> 00:02:50,450
much for now.
40
41
00:02:50,490 --> 00:02:55,620
We're just going to focus on making it play different sounds. Because at the moment, they all play note
41
42
00:02:55,620 --> 00:03:00,130
1. And that is of course, we're telling it to play note1.
42
43
00:03:00,210 --> 00:03:03,780
Remember that the player is kind of like a C.D. player,
43
44
00:03:03,780 --> 00:03:04,110
right?
44
45
00:03:04,590 --> 00:03:09,960
And the part that we're putting here is the C.D. We're telling it what to play.
45
46
00:03:09,960 --> 00:03:12,380
So we want our first button to play note1.
46
47
00:03:12,390 --> 00:03:17,270
The second to play note 2, 3, 4 and so on.
47
48
00:03:20,360 --> 00:03:26,570
So now that we've updated all of our file names, telling each button to play a different sound,
48
49
00:03:26,750 --> 00:03:33,050
let's hit save and let's see if that worked.
49
50
00:03:33,880 --> 00:03:34,510
Perfect.
50
51
00:03:35,860 --> 00:03:42,190
So that should have been pretty simple. But you can see that our code isn't very pretty because there's
51
52
00:03:42,190 --> 00:03:44,220
a lot of repeated code in here,
52
53
00:03:44,220 --> 00:03:45,060
right?
53
54
00:03:45,070 --> 00:03:52,090
How can we get rid of the parts that are repeated so that we have less code on our screen which means
54
55
00:03:52,090 --> 00:03:55,720
less things to go wrong and less places to look for bugs?
55
56
00:03:56,350 --> 00:04:03,100
Well we're going to build a function. Remembering how we built functions in the Dicee module, we started
56
57
00:04:03,100 --> 00:04:04,810
with the void keyword,
57
58
00:04:05,020 --> 00:04:09,970
and then we gave our function a name. So let's call this one playSound.
58
59
00:04:10,660 --> 00:04:19,750
And inside this function, we're going to transplant our two lines of repeated code. And I'm going to simply
59
60
00:04:20,050 --> 00:04:26,080
cut it out from our onPressed for our flat button, and I'm going to paste it here to move that
60
61
00:04:26,080 --> 00:04:32,230
functionality over. And then, instead of having to type out two lines of code here, I'm simply going to
61
62
00:04:32,260 --> 00:04:41,480
call playSound. And let's go ahead and do the same for all the other places. I'm going to copy this function
62
63
00:04:41,480 --> 00:04:48,410
playSound and I'm going to replace all the places where I need that functionality namely creating a
63
64
00:04:48,410 --> 00:04:55,460
new audio player and playing a sound with this new function that I just created.
64
65
00:04:55,460 --> 00:05:02,420
Now some of you already realizing that there's a bit of a problem because we wanted each of the buttons
65
66
00:05:02,420 --> 00:05:10,260
to play a different sound, and not for all of them to play the same sound, note1. In Dicee,
66
67
00:05:10,400 --> 00:05:15,020
the only type of function that we learned about was the most basic type of function,
67
68
00:05:15,230 --> 00:05:16,590
and it looks like this.
68
69
00:05:16,730 --> 00:05:25,130
It simply has a name and it allows you to reduce repeated code by bundling code together into a block
69
70
00:05:25,130 --> 00:05:30,380
of code, and giving that entire block of code a name to refer to.
70
71
00:05:30,380 --> 00:05:37,010
So that means when it's needed, then you can call the function by its name, and it will search out where
71
72
00:05:37,010 --> 00:05:43,790
that function was created to execute all the lines of code inside the curly braces of that block of
72
73
00:05:43,790 --> 00:05:44,840
code.
73
74
00:05:44,840 --> 00:05:52,130
Now we're coming up against a bit of a problem here, because I want this button to play note1 and
74
75
00:05:52,130 --> 00:05:56,200
this one to play note2, and 3, and 4, and so on and so forth.
75
76
00:05:56,540 --> 00:06:02,330
So we actually need these two lines of code but we need one thing to be different about them.
76
77
00:06:02,330 --> 00:06:05,600
We need this to be either 1 or 2 or 3.
77
78
00:06:06,170 --> 00:06:08,480
So how can we do this?
78
79
00:06:08,480 --> 00:06:16,040
Well this is where input arguments to functions come in handy, because we can simply specify in these
79
80
00:06:16,130 --> 00:06:21,520
parentheses or round braces, which we've never used before we've always kept it empty.
80
81
00:06:21,590 --> 00:06:23,420
We kept it empty when we called it and
81
82
00:06:23,460 --> 00:06:29,860
we kept it empty when we created it. But now is their moment to shine. Inside the parentheses,
82
83
00:06:29,930 --> 00:06:37,730
we can specify that this function requires an input, and we specify the data type that the input has
83
84
00:06:37,730 --> 00:06:38,510
to be.
84
85
00:06:38,510 --> 00:06:43,870
So in this case if we're going from note1 to note7, then that input has to be an integer,
85
86
00:06:43,880 --> 00:06:44,180
right?
86
87
00:06:44,180 --> 00:06:52,250
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
88
00:06:52,250 --> 00:06:53,130
number.
88
89
00:06:53,180 --> 00:06:59,720
Now in addition to the data type, we have to give it a name because we can have multiple inputs and we
89
90
00:06:59,720 --> 00:07:03,000
need to be able to refer to it inside the function.
90
91
00:07:03,020 --> 00:07:06,670
So let's give this one a name of sound
91
92
00:07:06,680 --> 00:07:10,570
Number. It's the note number that we want to play.
92
93
00:07:11,120 --> 00:07:12,830
Now this is completely arbitrary.
93
94
00:07:12,860 --> 00:07:18,610
You can call it anything you want here. But this is what makes sense to me in this moment.
94
95
00:07:18,620 --> 00:07:26,600
So right now inside this function, we now have access to that input whatever it may be in the future.
95
96
00:07:27,170 --> 00:07:33,500
And we're going to say that instead of hard coding the file name that we're going to tell our player
96
97
00:07:33,500 --> 00:07:41,590
to play, we're going to instead replace it with a dollar sign and the name of that input.
97
98
00:07:41,600 --> 00:07:48,260
So now depending on what we pass in here, it will be replaced inside here and we'll play the sound that
98
99
00:07:48,260 --> 00:07:50,710
we specified in the input.
99
100
00:07:50,720 --> 00:07:55,910
So now you can see we've got some red squiggly lines around here because it's saying there's actually
100
101
00:07:55,910 --> 00:08:01,070
an input or a argument that's expected, but zero found.
101
102
00:08:01,070 --> 00:08:11,870
So let's provide that argument, let's put 1 and 2 and 3 and 4 and 5 and 6 and 7.
102
103
00:08:12,340 --> 00:08:12,680
OK.
103
104
00:08:12,710 --> 00:08:22,130
So now let's hit save. And we have exactly the same functionality as before. Our sound files are all different
104
105
00:08:22,130 --> 00:08:23,570
that's being played.
105
106
00:08:23,570 --> 00:08:30,740
But we've reduced the number of lines of code dramatically by using a function to group together the
106
107
00:08:30,740 --> 00:08:36,650
functionality that's repeatedly used in our code. In the next lesson,
107
108
00:08:36,680 --> 00:08:42,860
for those you guys who are new to programming and you want to learn about how these functions with inputs
108
109
00:08:43,190 --> 00:08:45,040
work in more detail,
109
110
00:08:45,140 --> 00:08:50,300
that's what I'm going to cover. Now if you're an experienced programmer and you want to skip ahead to
110
111
00:08:50,300 --> 00:08:56,510
learn more about Flutter development, then feel free to skip that lesson and continue to the next one.
111
112
00:08:56,630 --> 00:09:00,380
So make your choices, and I'll see you on your next lesson.
12041
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.