My name is Nick Manning, and I'm a flutter engineer, so I create flutter APS in my free time, and I kind of also create tutorial videos about it.

So I am the creator of Flutter Crash course dot com.

Thanks very much to free code camped out work for sponsoring this video and let's get started.

Hey, everyone, my name's Nick Manning, and this is my flutter crash course.

So I'm really excited to offer this to you because I've taken about six or eight months of filming and content creation, and I've boiled it down into this course, and what it's meant to do is save you time learning flutter.

So what you see here is my show notes, and as every video I'm gonna do, I'm gonna walk through my show notes so you can read along and take notes on your own.

And, ah, in terms of my background, I've been writing software for about 20 years, five of those as an IOS engineer, So to follow along, some of you might not want to follow along.

You just wanna watch.

That's fine, but you're going to need everything that the flutter website says so any kind of main operating system popular operating system, latest version of flutter and an Iowa simulator or android emulator.

So make sure you have that installed and all set up.

So if you want Thio, uh, if you don't know howto set that up, you're having problems.

You can go to my website or the YouTube channel that I have.

And I have specific videos on how to set up flutter step by step for Windows and OS X.

So experience over acquired.

So, um, you need to have experience with one existing programming language and also something that you've coded like a website or Web app or even a mobile app.

You don't need to, but something that you've done in the past so that you know, some basic programming.

You have some basic programming skills, so let's get started here.

If you wantto again, go see other videos, check out flood a crash course dot com but we're going to now start our first lesson, which is Chapter one, which is creating a basic screen.

So stay tuned.

Hey, everyone.

So, in this lesson, we're gonna cover layout in flutter.

So, um, we're gonna be using a widget called column.

And what column does it lets us layout widgets from top to bottom?

So let me show you what we're gonna be eventually coating.

Um, this is the location, detail, screen of our app.

It's called the Tourism Cho app, and the location details screen shows a number of things, and you can tell that we can use this column widget because things Air Ridge it's here are laid out from top to bottom.

So there's another widget called Row and Row lets you lay out stuff from left to right, for example.

So, um, but you're pretty much most of time going to use this column widget because a lot of content on a mobile app is all is eyes, a column style layup.

So in this video, we're gonna cover implementing three text section so text sections let us define the area for Let's say, Let's say we want to show summary and then this snippet of text.

That's what a text section will be.

So let's get coding.

So last time we have this we left off with this home page, and we're gonna rename it to location detail.

So let's do that really quick and this directory location detail.

Because that's the convention of the code order organization we're gonna use, Um, so we have a number of screens and each directory is the name of the screen, and then the name of the file, the main file that defines that screen is also that name.

So let's define that, um, and I'm going to now stop my app and restarted.

I can't use the hot reload because, um, I am changing the file name, so sometimes we can't use hot reload.

So while that's starting, let's go over column.

So I'm gonna render three tech sections.

But I'm not going to just display text.

I'm gonna display colored boxes.

So colored boxes they're gonna show us how that content is the bounding areas for each piece of content.

So, um, one way we can define a colored box is using a widget in flutter called container, So container is kind of like the div, um of flutter.

It's a Devyn.

Html is just a bounding area that's flexible.

You have different parameters you can define.

One of those parameters is color, so I could just say container and define some color I can use a property called decoration.

So there's different types of decorations.

One is a box decoration is just a generic way to define a box.

Um, uh, some sort and Aiken style that box using the color parameter.

So I'm gonna say color and under state colors dot rhett.

So this in dart means colors that red red is a static member, meaning you don't need to instance eat the colors class to refer to it.

So that's why you have class name dot and then the value here.

So lastly, container will take a child, so we're gonna save child text and then whatever, and then we're going to save it.

Um, and one thing we didn't do is to find our column, forgot to do that.

So column has a parameter called Children and Children is and it's a list.

It's not a single widget.

So, um, and it is a list because you could have multiple items in your list.

So we're going to find three containers here s so I'm gonna just copy and paste this and one's gonna be red.

One's gonna have background of green, and we're gonna is gonna have a background of blue.

Now nothing's happening here because we want to define some parameters here.

I can define some texts.

That's fine.

I'll just do that real quick.

But, you know, look at the screen.

I mean, nothing really is happening.

That's interesting.

It's just defining these little tiny boxes here.

You can't even see the text.

So what I want to do is define something called main axis alignment.

And what main axis alignment does is it lets us control how each child is vertically spaced on the screen or how it's laid out.

And when I say vertically for column, it's vertically, so main access is something generic, so I'll take a step back.

So main access is the main access of the widget that you're using.

So if you're using a column, the main access will be a vertical line on the screen from top to bottom.

If you're using the row widgets, the main access will be a horizontal line from left to right, so the main access says something that's loosely defined on it depends on the widget that you're using.

So so the main access alignment controls how continents laid out on from top to bottom.

I have the following options.

I have, um, space evenly.

So let's try that.

I'll just go ahead and you'll see that the each box is spaced evenly on the screen.

Pretty simple.

Uh, I can also say Let's say end.

So if I say end, each item will be rendered from the very bottom of my column and column occupies the entire screen.

There's other options.

I don't need Thio cover right now, but the most common one is start.

So we're gonna stick to that the second parameter for column or bro, we're not gonna cover row in this video.

But it's also parameter for Roe is cross access alignment and cross axis alignment is the exact opposite of the main access.

It's the kind of the, uh, kind of, ah virtual horizontal line on the screen.

So if the main access goes from top to bottom, the cross access goes from left to right on the screen.

And let me show you what options you have here.

So I've cross us, says access, alignment, baseline center and start stretched.

So we're not gonna cover all of these.

But one of the most common ones is stretch.

So it's making sure that each item off my column is stretched from left to right.

So let's say that and I'll show you.

Now each item is stretched from left to right.

Um and cool.

Um, that's it.

So this code looks pretty ugly, but at least we have some containers where we can store text.

So once we do continue on implementing the screen will have a nice bounding area.

And, uh, content will flow nicely from top to bottom, and it will also be stretched.

So let's clean up the code.

That's the last step of this video.

And since these air reasonable kind of pieces of code here, we're gonna make this into a widget.

So I'm gonna, uh, take the template of this file like all the import, the class here, the build method, and I'm going to copy it, and I'm gonna create a new file called Text Section.

So the reason why we're defining the file here in the location details screen is because we're not gonna reuse this widget.

We're going to define anywhere else in the app so we can keep it local to this screen is going to paste this in and we have a nice template for our stateless widget we're gonna build which is defining a text section.

We're gonna name it like that, Um, and then in the location, details screen, I can copy or cut the content we want to show.

I'm gonna say container, and I'm gonna say return here and now we can just update this so we could say text section on weaken Define Let's say let's say three of these it later.

It's gonna be dynamic based on the types of text sections that we have.

But for now, we'll just define a finite list and we're gonna say imports text section Cool.

So this defines three red box is pretty useless.

So what we want to be able to do is, for now, customized the background color even though we're not gonna use it in our final screen.

This background color property, I just want to show you how you can define parameters.

So had a parameter rise, a stateless widget or really any widget.

So if we want to pass in a color first off, I define a private member private, meaning it shouldn't be accessed outside of this widget.

It's just something that, uh, this widget should know about.

And to do that, I say the type of member it is, which is a color.

And I have an underscore for the name of the member because that underscore means that it's gonna be private eso gonna say color and to customize it, I'm gonna create a custom constructor.

So a constructor lets me customize how I am.

Stan, see this class?

So I'm gonna say text section because that's the name of the class.

This is how you define a constructor.

And, well, what I could do is there's.

There's two types of parameters for constructors.

There's an inn dart, there's optional parameters, and there's named Parameters.

So, um, uh, Optional names, ones and positional.

Sorry.

So we're gonna find to keep it simple.

Positional parameters.

Meaning if I say color here, um, you know, we all will.

Basically, how we use it is in location detail.

I'm understood.

Say colors, red colors, screen on color, Stop blue.

And it's positional meaning based on the you know, this is the first argument.

It knows that it's gonna associate it with this parameter simple.

And then I could say this dot underscore color equals color.

So this means it's kind of like same thing in JavaScript where this means it's referring to the instance of this class.

So I'm gonna say this underscore color and it's gonna give me the value that parameter is going to sign it to this.

So in dark, there's a shortcut to this, this per positional parameter.

And I don't have to define the, um, method body here.

I could just say this dot underscore color, and what that does is for a positional parameter.

It's going to take that value, and it's just gonna automatically make an assignment to the member here.

This value.

So whatever a passing as the first argument here, it's gonna sign immediately to this dot color.

So that's pretty cool.

So finally, we're gonna refer to our member here, so it's customized.

We're gonna hit, save, and let's see what happens here.

Uh, cool.

It worked.

Um, what else we want to cover?

Yeah, that's presented glamour.

I mean, the last thing that you should do is say that this private member is final.

And what final means is that once you said it, you can't change it.

And that's really nice because it makes anyone reading the code.

No, that they shouldn't change it.

They can't because the compiler will give you an error and we don't need to change it.

After that.

Simon's been made, so I just a final here, and that's just like a best practice.

So that's it.

Later, we're gonna add some real text.

We're going to style it.

We're going to see now how the layout is defining how the text is constrained.

But for now, it's pretty simple.

And I hope you have a good idea of main access lamb across Axis alignment.

And, um, if you want to do like some bonus work, changes to a row and try that out or play out with the different options you have here.

So let's continue on Hey, everyone.

So in this video, we're gonna cover how to add images to your app, and it's pretty simple.

There's two main ways to do it.

One is to use an image asset or a Eurail oven image.

So in this video we're gonna first import an actual image asset like a file like a JPEG file to our app, and we're going to include it in our pub spec, the ammo file, and then we're gonna implement it later.

We're gonna pull the image from a u R l So there should be pretty simple, but we're gonna cover some things you probably don't know about yet, like constraints and how to lay out the image.

So in the last video, we covered layout.

Let's just ah, kind of cover what we're review, what we're gonna go over and implement in the whole video.