All language subtitles for 3. Scaffolding a Flutter App

All right.
1

Now in the last lesson, we created a brand new Material App, which is going to be the basis for all the
2

other widgets that we're going to construct on-screen. And by including the Material App,
3

we also get to tap into all of the components or widgets that the Material apps come with, such as a
4

text or an image widget.
5

But in this lesson, we're going to look at creating a scaffold in this Material app, so that we can have
6

an app bar, we can have a body where most of our app is going to go, or we can have a floating button if
7

we wanted to.
8

And the scaffold widget is pretty much exactly that. You can use it to place common items onto your screen.
9

I recommend reading the scaffold class documentation and seeing what it allows you to do.
10

So inside our app, instead of having a centered piece of text, we're going to go ahead and delete all
11

of that.
12

So select everything up to the closing comment for the center widget, and you can go ahead and delete
13

that.
14

Now notice that these comments get created automatically, and it shows you for example,
15

this is the end of the center widget.
16

This is the end of the Material app widget.
17

And if I added a comma here, and hit save, it separates out the text widget and shows me that this is
18

the final closing brace. And this makes it easy for us to be able to, for example, take this part out, which
19

is the text widget, or take this part out, which is the center widget just to be able to see where that's
20

coming from.
21

Now if it bothers you having a lot of this extra stuff that gets written on the screen, making your code
22

look more wordy, you can also go into the preferences and going to the editor section, then general, then
23

appearance, and you can either enable or disable this if you want.
24

I'm going to leave it in.
25

Just to make it easier for you to see where each part ends.
26

But it's again up to you as a personal preference.
27

So we were going to go and delete the center widget from here.
28

So we're going to leave the part where it says home, but we're going to delete the center widget which we set as
29

the home of our Material app.
30

Well, it's going to be a scaffold widget. And a scaffold widget,
31

you can see, can have a lot of different properties or different things that you can set.
32

And that includes adding in a floating action button or changing what's inside the body of the app, adding
33

in an app bar and a whole bunch of other things that you can do. In our case,
34

we're going to firstly, add a comma at the end of every new parentheses we create.
35

And inside the parentheses for our scaffold, we're going to add an app bar, by writing the words appBar.
36

We're setting one of the properties of our scaffold. We're telling it that in the position where it expects
37

to have an AppBar,
38

we're going to put an AppBar widget there.
39

Now an AppBar widget is simply a bit of pre-built material design, and it adds a top up bar to your app.
40

And if we take a look at the AppBar class, it tells us there's all sorts of things that you can change
41

about the AppBar.
42

For example, it could have a title, or it could have a button on the left, or it could have multiple buttons
43

on the right, or could have a bottom or a flexible space.
44

So we're not gonna make our AppBar that complicated.
45

And it also has a whole bunch of properties that you can change. Such as it's background color, or its
46

brightness.
47

Let's go ahead and first add a title to our AppBar.
48

So we're going to happen to the title property, and we're going to give it a title. And our title is going
49

to be made up of a text widget. And we're simply going to write the title for our app, which is 'I Am
50

Rich'
51

So now let's go ahead and run our app. And you can see, we have something that looks a little bit more
52

like a real app now.
53

It's got a real AppBar, it's got a title for the AppBar, and it's got a body, that's kind of just blank
54

at the moment. On the top right corner,
55

you see this little banner here.
56

And it says debug. It's basically telling you that whatever is running at the moment, is not the final
57

version of the app.
58

And when you finally build your app and run it on a real device, then that little banner will go away.
59

But when it's in the debug mode, it's there to tell you that this is not the fastest version of the app.
60

It might have a few lags.
61

It's not optimized. It's just for development and debugging.
62

Now if that little banner bothers you, a really quick way of getting rid of it is by going into the Flutter
63

Inspector, while your app is running, and going into the more actions button, and you can click on hide
64

debug mode banner. And it will just make that disappear for you, like some sort of mafia boss. Now that
65

we've got our app bar,
66

And in the docs, you can see that the app bar has a whole bunch of things that we can change about it.
67

For example it's title, and we did in fact give it a title.
68

You can also add buttons to it. But you can also scroll down to see all of the possible properties that
69

you can change.
70

And one of the ones that I'm quite keen on changing is the background color of my app bar.
71

I don't really want it to be blue.
72

I kind of want it to be a fancier blue. And very often, your client will say things like, "That color doesn't
73

feel classy enough.
74

Give me a classy color."
75

So let's give them a classy color.
76

So in order to change the background color of our app bar, we can take a look at its properties.
77

And one of those properties looks suspiciously like it's going to do exactly what it is that we want.
78

And we can read the description or it says this is the color that's going to be used for the app bar's
79

material.
80

So that seems pretty much like what we need to change the background color,
81

right?
82

So let's go ahead and do that. Now for the app bar,
83

you can see at the moment, it's got one property set, which is the title property. And the title property
84

expects a widget. Some sort of widget that will be displayed in that position of the title in the app bar.
85

But the property that we want to add is called backgroundColor.
86

And this particular property expects something that is a color.
87

So how can we put a color in here?
88

Well, when you're creating a material app, as I mentioned, you get access to a whole bunch of material
89

widgets, but you also get access to all of the material colors.
90

So when Google came up with the material design system, they also came up with a color palette for you
91

to use.
92

And if you take a look at this page you can see all of the material colors. And they have different shades,
93

darker or lighter or accent tones that look just a little bit brighter, and a little bit more catchy.
94

And you have access to all of these colors straight away, by making your app a material app. If you want
95

to go and change the color,
96

you can tap into colors, and this will tap into all of the material colors. And then you add a '.' and
97

you get to choose which color you want.
98

So in our case, I'm going to make the app bar a blue-grey color. And this looks kind of like this.
99

And I want it to be a kind of dark shade of blue grey.
100

So I quite fancy this blueGrey 900.
101

So that's what I'm going to type in here.
102

I'm going to type blueGrey, and then inside some square brackets, I'm going to write 900.
103

So now, if I run my app again you'll notice that the background of the app are changes to a dark blue
104

color.
105

And it looks a lot classier.
106

I hope you might agree.
107

Now we've got our app bar and it's looking pretty nice.
108

The next thing to change is the main body of our app. Going back to our scaffold class,
109

you can see that the app bar is one of the things that we can change about it.
110

But it's also got the body, which is the primary content of the scaffold.
111

It's everything that's going to go in here pretty much.
112

Let's go ahead and provide a widget for it, so that we can actually show something there.
113

Now inside are scaffold,
114

we have a single property that we've said, which is the apple.
115

And for the app bar position of our scaffold, we've created an actual app bar widget. Inside that widget,
116

we've changed two of its properties.
117

1. We've given it a title to say, "I Am Rich" as a piece of text widget.
118

2. And we've also set the background color of our app bar widget, to a dark blue gray color.
119

What if I wanted to change the entire background of my scaffold, so that this is no longer white but
120

a nice sort of standard blue grey color?
121

How can I do that?
122

So as a challenge, I want you to look through the documentation of the scaffold widget, and see if you
123

can figure out how to change the background color of our scaffold. Pause the video, and try to complete this
124

challenge.
125

All right. So let's first try and find the scaffold class in the documentation. And we can read a little
126

bit about what it does.
127

But more importantly, if we scroll down we can see that there's a whole bunch of properties or things
128

that we can change and customize for our particular scaffold.
129

Now we've already added an app bar, but we now want a background color.
130

So this is going to change the entire scaffold background color. And we can do that by simply adding
131

it as another property that we set.
132

If we collapse the app bar part, you can see that in our scaffold widget, we've set a single property
133

could AppBar.
134

But, what if we wanted to add another property. Let's add the background color property in here. And we
135

can provide a color using Colors.blueGrey
136

And now, if I hit run, you can see that the entirety of my background has turned into this blue-grey color,
137

because I've changed that property called background color for my scaffold widget.
138

It's through the use of different widgets, different types of widgets, such as layout widgets or components
139

such as app bars, and then by setting the properties for each of these widgets, that we start to customize
140

the appearance and the functionality of our apps.
141

Now all we need is to actually have some content in our app. Right?
142

There's currently nothing in app, other than an app bar, and a blank background.
143

If we look at the scaffold class again, you can see that in the example code, the example shows a scaffold
144

with an AppBar, BottomAppBar and a FloatingActionButton. And then it talks about the body.
145

Now the body, is where the primary content of the scaffold is gonna go.
146

And that refers to this area right here. And you can see that when you set the body property, it's expecting
147

a widget to be set there.
148

Let's go ahead and do that.
149

Let's firstly add a property, that's the body property, and we're going to provide a widget right here.
150

The widget that I'm gonna use is going to be an image widget, and you can creat it by writing the word
151

image and a set of parentheses.
152

And inside the parentheses, we get to define what type of image we're going to show.
153

So for the body of my scaffold, I'm going to add a image widget, and the image widget is almost like a
154

picture frame. You create it and it starts out blank. But you can change one of its properties.
155

Now when we search for the documentation for the image class, for example if I type it in here, you'll
156

notice that there's actually two different images that we could be tapping into.
157

One, is an image from Dart,
158

and another is an image from widgets.
159

Now because we want an actual image widget, because it will show up on screen, then we want to look at
160

the documentation for that particular selection.
161

So this is just the tip to remember that when you're searching in the search box for the documentation,
162

there might be multiple things that are named the same, but they come from different libraries of code.
163

And if you're putting something on screen that's gonna show up, it's always going to be a widget. In our
164

image class,
165

you can see that there's a whole bunch of different ways of creating a new image.
166

And we can either create an image from our asset bundle, or we can create an image from a file, or we
167

can create an image from the network.
168

So the image class is actually just a placeholder.
169

It's like a picture frame that we put onto the screen, and it doesn't come with an image by default.
170

Instead, we have to use one of its properties. For example the image property to tell it what image it
171

should display.
172

Here is all image widget, and we're going to set it's image property.
173

Now there's different types of images that we can display.
174

We can either display an asset image, that's an image that comes from our project folders, or we can display
175

a network image that comes from the Internet.
176

So let's try this one first you can see that this particular widget expects a URL, and this has to
177

be a URL that corresponds to an image, so that it will show up inside our image picture frame.
178

If we go on to Google and we just search for image, we go in to images. Then let's pick one of these images,
179

let's say this one some northern lights to go into an app.
180

If we right click on the image and we say open image in new tab, then it will open it with URL
181

that we need to fetch this particular image.
182

Notice that there's nothing else on screen.
183

This is just where the image resides.
184

So let's copy that URL, and paste it inside here.
185

In order to use text, not code, but actual strings, we have to add some single quotes around the text. so
186

we will paste
187

our URL inside two single quotes.
188

And while in other programming languages, such as Swift or Java, we'll be using double quotes. When we're
189

writing Dart code,
190

by convention, we should work always with single quotes at the end and at the beginning.
191

Now we're telling our app that it should display an image in the main body of our scaffold, and the image
192

that it should display is going to be one that's fetched from the Internet.
193

And the place where that image resides is right here.
194

So now if we hit play, and we run our app, then you can see it shows up our image right in there in the
195

body of our app. Here's a challenge, at the moment,
196

our image is right at the top of our app.
197

Can you make it such that the image is centered inside the body of our scaffold?
198

You've seen this before. Pause the video and try to complete this challenge. As we saw before,
199

if we want to center a widget inside another widget, we can use the center widget.
200

And in order to do that, we would have to wrap the image widget inside a center widget.
201

Now we can either do that by, what we did before, which is where we cut out that widget put in the center
202

widget, and then inside the center widget we told it what's going to be the child or the thing that's
203

going to be centered.
204

And then we paste it in, the thing that needed to be in the center.
205

Now there's a much easier way that I want to show you. I've reversed the code back to what we had before.
206

And if you click on the widget that you want to embed in another widget, and you either click on the
207

little yellow light bulb that shows up, or hold down ALT on Windows, or OPTION on Mac, and hit ENTER. You'll
208

see a little menu pop up. And this will menu makes it really convenient for you to embed the current
209

thing that's selected inside something else.
210

So we can wrap it with a column, wrap it with a row, put it in a new container and also put it in a center
211

widget. And that automatically puts in the center widget, adds in a child property, and puts our previous
212

widget that we had selected, inside there.
213

So now when we run our app again, you'll see that our image gets automatically centered in the body of
214

our scaffold, which is exactly what we told it to do. So we now have a really simple app that's written
215

with very few lines of code. But it actually does quite a lot of powerful stuff.
216

It's laid out and created a new app structure for us using the scaffold.
217

We provided an app bar and set the background color of our apple to a color that comes from the material
218

palette which is this dark blue-grey color.
219

We gave it a title using a text widget and then we added a body property to our scaffold to tell it
220

what it should display in the main body of the app.
221

And here we have an image that's fetched from the Internet using a URL, where that image lives.
222

And then we centered that widget using our convenient menu, and we now have an app that does pretty complicated
223

things especially for how few lines of code we've written. So it's a good time to review the structure
224

of our current app.
225

And I'm gonna go onto a website called draw.io which makes it really easy to create flow charts
226

and diagrams. And I'm going to create a diagram for my 'I Am Rich' app. Let's start from the beginning. We
227

have a Material App, right at the top of the tree. So let's drag in a rounded rectangle, and let's call
228

it Material App.
229

Now that material app has a single item that's embedded inside it, and that's a scaffold.
230

So let's add that as a descendant, and that's going to be our scaffold. And inside the scaffold,
231

we've got a couple of things. We've got a app bar,
232

we've got a body, and we've got a background color. so the background color is a color widget. Let's
233

add that here.
234

We've got a color widget and we've got an app bar widget,
235

and finally we've got a center widget.
236

These are the three children or descendants of our scaffold.
237

And then these widgets each have their own children.
238

So the center widget has an image as a child,
239

so let's add that.
240

And remember we said that the image widget is kind of just like a picture frame.
241

And it has to have some content for it to actually display something.
242

So the image widget actually has a child that is a network image, because it has to fetch the image from
243

the Internet.
244

And the app bar has two children, a title that's a text widget, and a background color,
245

that's another color widget.
246

So let's add that in there as well.
247

So we've got a text widget and a color widget. And this is all widget tree. By embedding widgets inside
248

other widgets, and setting the properties of each of these widgets,
249

we've ended up creating an app that actually looks like it's almost ready for the app store.
250

There's certainly a lot simpler apps that I've seen, and all that we've written is just twenty two lines
251

of code. But we've effectively created an iOS app and an Android app that has an image, that has an app
252

bar, that has backgrounds, that has a whole lot of things.
253

All because we're leveraging the power of these pre-built widgets from Flutter. And in the next lesson,
254

we're going to learn about another type of widget that will allow us to load images from our assets
255

folder in our project, and display it inside our app.
256

So for all of that and more, I see on the next lesson.