All language subtitles for 6. Updating the UI of Our App

So currently, this is what our app looks like.
1

We've got seven keys, one in each color, and they all manage to play different sounds. But at the moment,
2

the layout isn't great, right?
3

It's only taking up a small proportion of the screen. And it doesn't really look like a Xylophone app
4

yet.
5

So how can we get it to look like this instead? Where we have a black background so that any part that's
6

not a key is blank.
7

And we also have a full width keys that take up all of the available space in the horizontal axis and
8

all the vertical space is evenly divided by these seven keys.
9

Now there shouldn't be anything new here because we've covered all of this when we explored layouts
10

in the Mi card app.
11

So I want to set this to you as a challenge to see if you can make the user interface look like this.
12

Pause the video and try to complete the challenge.
13

All right.
14

So here's the solution.
15

First let's change the background color of our scaffold to black.
16

So we're going to go into our scaffold widget.
17

We're gonna add a property that's changing the background color to colors.black.
18

There we go.
19

And let's just confirmd to make sure that it worked.
20

All right.
21

So here's what we've got so far. The white background has turned into a black background, and it's blended
22

seamlessly with the edges.
23

So now let's go ahead and try to expand our buttons.
24

So the keys will distribute themselves along the main axis of our column.
25

And to do that, if you remember, we had to use the expanded widget. So we would wrap whatever we want to
26

expand inside an expanded widget, and we're going to use the OPTION + ENTER to bring up that light bulb
27

menu, and we're going to wrap with a new widget that's going to be an expanded widget.
28

Now at this point if you only have a single expanded widget that will try to take up all of the space
29

that's available to it.
30

So it looks something like this, which is not what we want.
31

We want all of these keys to divide the amount of height that's available by themselves so that they each
32

take up the same amount of space.
33

So to do that, we have to add all of these other buttons inside the expanded widget.
34

Now this is a good point to mention that when you notice any of these widgets enclosed in a red box,
35

at this point, if you go to another widget say the next flat button that you want to embed in a expanded
36

widget and you use that same trick of doing ALT + ENTER or OPTION + ENTER, then it doesn't really work because
37

it's still held on to this widget.
38

So this is a quirk of Android Studio and you can simply get rid of the red box by just hitting the TAB
39

key anywhere where there's some empty space.
40

And that gets rid of the selection and we can now again use our OPTION + ENTER or ALT + ENTER.
41

So let's go through our file and let's add expanded to all of our flat buttons.
42

So now that we've wrapped all of our flat buttons inside an expanded widget,
43

now all of our buttons should now expand to the amount of height they can possibly have.
44

So now all our buttons should have the same height and it should be evenly distributed in our column.
45

And you can see, our flat buttons are now evenly distributed in terms of height, at least, in our column.
46

But the only thing is the width that each button is taking up is still the default amount that they're
47

told to take up.
48

So in order for it to go all the way to the edge, we have to change the cross axis alignment of our column.
49

So we find our column widget and we're going to add a cross axis alignment and we're going to make it
50

stretch so that it takes up the entire width of the screen, or as much width as possible basically.
51

So this is the solution to our mini challenge, and I hope that was a good review of some of the concepts
52

that you learnt in the Mi card module
53

where we did mostly things such as layouts and axis alignments et cetera.
54

So now we've basically completed our user interface. It looks pretty much the way that we want it to.
55

But if we take a look at our code, you can see that it's incredibly repetitive.
56

There's so many lines of repeated code.
57

And if you look at these little sections of expanded widgets, they're extremely similar to each other.
58

They're all expanded widgets.
59

They each have a child of a flat button. The flat buttons each have a color.
60

And when they get pressed, they all call the play sound method up here.
61

So, it's not great to have all of this code
62

that's the same, because let's say that we wanted to, I don't know, change something about our buttons,
63

for example if we wanted to give it, you know, some piece of text that says 'This is a button',
64

then we would have to do this to every single one of our buttons for this to be carried out everywhere.
65

And as you saw even previously when we were just adding the expanded widget around all the flat buttons,
66

it was painful enough.
67

So how can we reduce all of this code redundancy and try to get our code just a bit tighter?
68

Well we can probably extract a single one of our widgets,
69

right?
70

What if instead of creating this thing many many times over,
71

what if we tried to use a function to create this instead?
72

And we call that function seven times, instead of creating it from scratch every single time.
73

Isn't that what functions are for, right?
74

So in order to do that we're going to remove a single expanded widget, and I'm going to use COMMAND + X
75

or CONTROL + X to cut it out of my column. And up here just below playSound,
76

I'm going to create a new function called buildKey.
77

And this function is meant to help me build this expanded widget. And I want to be able to, instead of
78

having to have all of this repeated code, I'm going to delete everything right up until the final expanded.
79

So just before it says widgets, and I'm gonna delete all of that.
80

Instead I want to be able to call my method buildKey seven times, and this should build my widget each
81

time.
82

So let's just check to make sure I've got enough
83

1, 2, 3, 4, 5, 6 & 7 so perfect.
84

So once this starts working, every single widget will be built using our new function called buildKey.
85

And it will build an expanded widget with a flat button inside with a color and also a sound that gets
86

played.
87

Now there's just a couple of fixes that we have to make here.
88

Firstly, at the end of each line of code in a function, we know it has to end with a semicolon. And that's
89

just the grammar of functions. As in English language
90

we have the full stop, in programming when we have a function and we get it to do something or execute
91

something, we have to tell it where it's the end of that line of instruction.
92

But our code still have some errors. And all the errors are down here, and they all say the same thing.
93

The expression here has a type of void, and therefore cannot be used.
94

What is this void that they're referring to?
95

Well it's because each of our build key functions have that void keyword here that we've so far tried
96

to avoid talking about.
97

And the reason is because this will involve learning about the third type of functions, which is function
98

that not only have a body, as in some instructions that it needs to carry out when it gets triggered, but
99

also it can have a input, as we've seen, by putting in a argument inside the parentheses.
100

And finally the third type of functions that we want to talk about are the type where it can actually have
101

an output. So something can come out of this function once it is called.
102

And right now, this function, our buildKey function, doesn't actually have an output.
103

It's basically a type 1 function right?
104

It doesn't even take any input.
105

So if you are somebody who already have experience programming in other languages, you can solve this
106

problem and you can get rid of this error and get it to produce seven buttons on screen that all play
107

the same sound that all have the color red, then you can skip the next lesson. But if you can't, then I
108

recommend heading over to the next lesson where we're going to talk about the third type of functions
109

in Dart, functions that can have an output. Whichever path you choose,
110

I will see you on the next lesson.