All language subtitles for 014 Adding Custom Widgets_en

In the last section, we replaced our icon ad with Icon Clear, I'm going to revert this back over to

icons, that ad again, because it's definitely the actual icon we want to show inside of here.

We want that plus icon.

OK, so now our application looks pretty good.

We've got the app at the top and we've got our floating action button at the bottom right hand side.

But there's two little issues I want to point out with our current application, at least as far as

the source code goes right now, all of our app logic or everything that contains information about

what we want to display on the screen is all contained within our main function.

As you might imagine, this is not how we normally design flutter applications.

Traditionally, we'll create separate files inside of our live directory, and each separate file will

contain one widget that you and I will put together.

So I think that we should start thinking about how we might extract all of this logic from the main

function right here into a new separate file.

And that separate file will contain a widget that you and I are going to put together whose sole purpose

is to show all these other widgets.

So to get started, I'm going to first create a new directory inside of my live folder called.

S r. s. short for source.

Then inside the Sarsae directory, I'll make a new file called App Dot Dart.

So inside this file, we're going to create a new custom widget called App Widget, and that app widget

is going to have the sole purpose right now of showing all these other widgets that we just added to

our main function.

Now, this is the first time that we've created our own custom widget up to this point, we've been

reusing all these other widgets that are implemented by Flutter.

So to guide us in putting together our first custom widget, we're going to write out a couple of different

comments.

So the first thing we need to do inside of here is import flutter, helper library, essentially the

same thing that we just did inside of me.

Dart we're going to add an import statement for that material dot dart file.

After that, we're going to create a class.

That will be our custom widget.

Now, this is kind of a two parter, we're going to create a class that's going to be our custom widget

and one special requirement of that class is that we have to extend.

Let's actually kind of write out the full comment here will say This class must extend the state lists

widget based class.

So we'll talk about what that means in just a moment.

But for right now, let's just leave that comment in.

Then inside of our actual class definition, the only requirement that we have is that we must define

a build method that returns the widgets that this.

Widget will show.

OK, so that's our three big items, let's get started right now with item number one at the top because

we pretty much already know how to take care of this one.

So underneath the first comment, I'm going to add in my import statement now, we're importing a package.

We're importing a third party library.

So we're going to write out the word package that will write out the library that we're trying to import,

which is flutter.

And then the name of the file that we want to import, which is material dot dart.

OK, so that was the easy part.

Now let's take a quick pause right here.

We're going to come back the next section and we'll have a quick discussion on what all this extending

the stateless widget based class means.

So quick break and I'll see you in just a minute.