All language subtitles for 008 Showing a Scaffold_en

In the last section, we got some content to display on the screen of our device, but yeah, it doesn't

look that great.

So in this section, we're going to start looking at a lot of flutter documentation and get a better

idea of how we can build out a nice looking up like the one that we're trying to build.

So let's get to it.

I'm going to first get started by going back over to my main dart file.

Now, just to keep the code inside of here a little bit more legible, I'm going to delete the comments

that I had added.

So if you want to keep your comments around totally fine, I'm just going to remove them so that you

can see the code that I'm writing a little bit more easily.

OK, and there we go.

It's now ready to add some more code to this file.

All right, before we do, I want to take one more quick look at our mock up over here.

So inside of our mock up, we've got this sort of heter thing at the top and then we've got that kind

of floating action button down here and then we at some point time.

So show some content on the bottom of the screen.

So like I had said earlier, when we try to build flutter apps, we spend a lot of time looking at the

flutter documentation, more and more specifically, the documentation around the default widgets that

we get for free when we make use of flutter.

So let's go take another look at the flutter documentation around all those included widgets.

And we'll see if there's not some widget out there that is going to help us achieve this kind of layout

where we have this header at the top and the button down here.

So I'm going to, again, pull up my flutter documentation.

Which I can reach at Flutters Widgets, this is the widgets catalog, which we looked at just a couple

of videos ago, I'm going to open up the material components section again.

And as you might guess, we're going to again look at this scaffold widget.

So on the scaffold widget, I'm going to open up documentation and we'll get a better sense of how to

put this thing together.

So if we want to show a scaffold widget on the screen, we can create a new scaffold and then pass in

some of these different other widgets.

And I'm going to zoom in here for just a moment so we can see is more easily.

I know that this list of widgets right here probably looks very, very overwhelming at first glance.

And I'll tell you, one of the hardest parts of getting used to flutter is just the sheer number of

widgets and different classes that are made available to you.

There's an absolute learning curve here as you're going to have to spend some of your own time looking

at the official documentation and building apps and making use of all these different classes to get

a better idea of what is available to you.

Definitely this flutter catalogue of widgets is helpful, but it only goes so far.

So it's going to take a little bit of practice on our part.

So essentially to build out this sort of layout that we're going after where we've got the header up

top and the button down here, we're going to create an instance of our scaffolded class and then we're

going to create an app bar, which is going to represent that horizontal bar at the very top of our

app.

And then we're also going to create a floating action button, which is a circular button shown on the

bottom right corner of the app.

So we're going to essentially create three widgets in total, we're going to make an instance of the

scaffold, an instance of an APAs, an instance of a floating action button, and then we're going to

wire them all up together.

So let's flip back over to our code editor and get started on this process.

OK, let's back over here at present, our application is showing a text widget now we probably don't

want to show the text widget at all times, so I'm going to remove that to start.

I am going to leave behind our material app because we definitely want all that very basic functionality

that is included in a material app such as what we mentioned before, the ability to navigate between

different screens.

Now, our application in particular doesn't require any navigation, but in general, you're going to

end up using a material app anyways for any app that needs any amount of navigation.

Some is going to leave this in here for now.

Then inside of this named home perimeter, you remember, whatever we pass in here, it's going to be

the first widget that is shown on the screen.

I'm going to create a new scaffold widget.

Now, as we just saw, we're going to have to create and pass a couple of different widgets to the scaffold,

and so I'm going to put a new line inside of here to give myself a little bit of space.

Then we're going to create an app bar.

And if I go to my constructor's section again and find my scaffolded section, we can see that if we

create an app far, we can assign that to the named parameter of app bar on the scaffold itself.

So in short, we want to write out Inside the Scaffold App Bar, and that's going to be an app bar component.

And then I'll put a comma at the end of the line so that I can save this file and the code will not

collapse.

Remember, if I omit these commas, then the code is going to collapse when I save the file, although

that does depend upon your code editor.

OK, so there's our app bar, so let's not save this oops with the comment there one more time.

Now, come on.

There we go, so I'm not going to save this file.

We're going to refresh our emulator one more time and see what we get on the screen now.

So I'm going to first pull up my emulator.

I'm going to pull up my terminal and remember to refresh our app.

We can press shift our on our keyboard, so I'll hit shifta.

That will restart my application.

And that's the result of our scaffolded component to the scaffold component gets this nice white background

on the screen and then the app component or the app, our widget gets this blue bar up here at the very

top.

Now present the blue bar is totally empty and it doesn't appear that there is any text inside of here.

So let's take a quick break.

We'll come back to the next section and we'll figure out how we can add some text to that app var.