Placeholder Image

字幕表 動画を再生する

  • Hey, everyone.

  • 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.

  • Siri's.

  • So it's this detail page with the nice banner image at the top and some text sections.

  • So what we've done is we've laid the groundwork for the tech sessions.

  • We just shows some lines which we will implement in the next video with the text and all the formatting.

  • But for now, let's add an image to the top and keep it simple.

  • So it's at an image of we're gonna be basically going through the block post for this video.

  • So if you want to look at the notes, I will be showing the notes as we go along so you can read along.

  • Uh, we're gonna create a new directory called assets Images So assets is anything like font files, images, any anything of that sort.

  • And they're all gonna be in one directory.

  • So that's how we're gonna organize things.

  • And we're gonna use J pegs.

  • Um, and yeah, that's it.

  • So you can follow along if you want to check out.

  • Um, this branch of the code, uh, where you can code from step to on your own.

  • So what I'm going to do is off to the side here.

  • I haven't image already that I'm gonna copy.

  • And the image I got a copy.

  • If you check out step three of the code, anything from step three onward has this image.

  • So I'm just gonna copy it here, and it's off screen here.

  • You're not going to see it.

  • Um, but I'm going to copy it to the following directory.

  • So in my code here I have my main root directory.

  • So I'm gonna hit this button at the top new folder, and I'm gonna create a new folder in the root of the projects called assets groups of me here.

  • So assets is gonna be alongside the android directory in the IOS directory, and then I'm gonna create a new folder called Images, and we'll have other folders there later.

  • And then, um, off in the video, I'm gonna, um, in another screen here, I'm just copying the actual, um uh, actual image file.

  • So I'm getting it from my code on branch on the branch that I have at the RICO.

  • The link to the repair was here in the block post.

  • Um, and it's in step three.

  • So I've already copied it and let me show you the fact that it is copied.

  • So since this is a tourism map, it's gonna be of all Japanese locations.

  • Just I just decided to pick that randomly.

  • So this is a location in Japan, and this is the image file.

  • So later we're gonna load it from a server.

  • So now that I have my image is there, I can't just use it straight away.

  • I have to, um, go into my pub spec.

  • Yeah, no file.

  • And then we hide the code here.

  • And so the pups of camel file is like a configuration for your project.

  • It's in the root of the project.

  • Could see the final name there, and you get the list.

  • Like what?

  • Uh, packages you're going to use in all of that.

  • We haven't added any packages yet.

  • We will get to that in another video.

  • But if you scroll down here, you'll see that there's some example configurations you can enable.

  • So in dart to come and something out there.

  • They use this, uh, pound symbol, right.

  • It's the number symbol here.

  • So if you just commented out, you'll actually be able to use that conflict.

  • And so the important part is to, um, configure this correctly so that a work or else if the formatting is messed up, it may not work.

  • So what we're gonna do is say it says here in the description toe, add assets to your application at an assets section.

  • So we have to have this line here, and it has to be indented properly.

  • So the parent of this is flutter, and then assets is here, so it's indented by, um, it's indented here.

  • So, like that you can't do this has to be like this, and then we're not gonna include specific images.

  • We're going to just include the entire directory.

  • So we're going to say for all the assets were using, um, we're going to say what?

  • The past to the actual, uh, images directories.

  • And then that is assets slash images and then make sure to include the slash at the end.

  • That way, Flutter knows that you can include all the images there.

  • So it's gonna look like this.

  • This is the block post.

  • You could see the notes were gonna want it looking like this.

  • Another gotcha is you want to make sure that this is indented as well.

  • So the actual directive here is indented properly.

  • So we're going to save that, um, and then let's implement the actual image.

  • So, uh, let's see, we have the code here.

  • Um, so last time we have are we had our location, details, screen.

  • So this location details screen had just three tech sections.

  • We're gonna fill that out in the next video, but we're gonna want to do is add an actual image banner at the top of the screen.

  • So it's going to be one of our Children of our column.

  • So let's add that now, Um, let me look at what we want to do here.

  • So because we want this to be its own widget, we're gonna create a new widget the same way we like.

  • We created the text section, which it So I'm gonna call this new widget Image banner.

  • So this is a widget we're gonna create in just a second.

  • And before we even implemented, we're going to just code what?

  • How we want to customize it.

  • So what do we want to pass in to the inn stance e ation of this witch?

  • It which is on leave, basically the file name.

  • So that's what we're going to do.

  • We're going to say, include the path to the image.

  • So we're gonna say assets slash images slash and then the name of the file.

  • It's kind of weird because it's Japanese, of course.

  • So if you don't speak Japanese, it look weird to you.

  • But that's the name of the file.

  • That's the name that's gonna be the name of our location when we showed the text corresponding text with that image and know that later we're gonna change this app to be dynamic.

  • So we're not gonna hard code the image.

  • We're gonna pull it from a Web service.

  • A p I.

  • Right.

  • Um, for now, we're just gonna hard coded just just get it to work.

  • So next we're gonna include the widget that we haven't even implemented yet.

  • And I'm just doing this for brevity here, so I'm gonna say image underscored banners.

  • That's going to be the name of the file we're about to create.

  • Remember that in darts.

  • If you don't know already, the import should be in alphabetical order.

  • So, uh, I'm gonna make sure that this is before this and that its underlying red because we haven't created it yet, so let's create it.

  • Now.

  • We're gonna go into our location detail folder here, and because this widget is only gonna be used by location detail, uh, we're not gonna have it live anywhere else.

  • It's a widget that's local to location detail.

  • If it was shared across the app, we would put it in a separate place.

  • So let's call the let's name the file the same name of the widget image Underscore banner and make sure it's all lower case.

  • And then, since this is a stateless widget and we're gonna implement it much like we did the text section, which it we did in the last video.

  • So I'm just gonna copy this code here just as a template and no dead visual studio code also gives you some options.

  • And there's extensions to kind of use a hot key to auto generate stateless widget really quickly.

  • But that's not what we're not gonna cover that that's something more advanced.

  • So let's name it to our image better.

  • And this is the name of our, um, widget here, and we're not gonna want to customize the color.

  • But, um, what we're gonna do is be able to customize the path to the asset.

  • So we're gonna have ah, private member here, and it's gonna be a string called Asset Path.

  • So it's private again because there's an underscore here.

  • Second, we're gonna pass in acid path.

  • So this is gonna be a ah ah positional parameter to our constructor.

  • So that means that when the person wants that use this widget, the first argument they provide to the constructor will be the asset path and this dark.

  • If you didn't follow this in last video, when we use, um this positional parameter and we use this dot and then the name of our private member, it automatically assigns the value so really quick if you didn't see it last time, If we just have something like this, this would be the long way of doing it.

  • So this acid pass acid path So this is kind of the long way of doing it.

  • But we can't work.

  • This is just better to do it this way.

  • So, um, let's implement our, uh, image banner now.

  • So what we're gonna do is we're gonna display used the flutter widget of the image widget, but we're gonna wrap it in a container.

  • What that allows us to do is provide some options, other options, like padding or the height and all that.

  • So you're gonna want to wrap your images in a container or some other.

  • Uh uh, which it like that, Um So let's get started on that.

  • Uh, so there's gonna be if you look at the screen shot, there's gonna be a certain height to the image, so we're gonna want to expand the image all the way from to the maximum.

  • You can go in the container, but we want to still constrained the container of the image to a specific heights.

  • And to do that, we're gonna use something called constraints.

  • And that's a parameter on the container widget and, um, much like decoration that you know.

  • There's also something called You know there's box decoration, but there's also box constraints, and what box constraints does is it lets us provide all these other options for how it the content in that container is constrained.

  • So the most common names constructor for this is called expand.

  • And what that does is, it says, Let me expand everything all the content in my container as long as the height stays at 200 pixels.

  • So to specify the height and flutter or dark we're going to use a double and a double is a certain data type.

  • You could see it here that just basically, it has a decimal point, that's all.

  • That's all you have to know, so you can say 200 like this, but sometimes the visual studio code will give you a warning.

  • You don't also do like this, but using a decimal like a proper decimal even if it's 2000.0, was probably better.

  • Um, and that's constraints, So that's we'll see how it works in a second.

  • But constraints is going to say expands all the content until the height is 200 we're gonna have a decoration, and we're going to give it a decoration of, ah, background color.

  • We've already covered this and the other video.

  • We could just say great here.

  • Um, the reason why we're giving the container of background color is because later when we loaded as from a girl If that you're all fails to load the image, we still want to show some kind of placeholder.

  • Um, not just white space.

  • So that's just the decision I made.

  • Um, you don't have to do that.

  • So the child now is going to be the image widget.

  • So we just say image and to use the image widget we're gonna use also a named constructor and remember and named Constructor is goes like the name of the widget and then dot and then the name of that constructor.

  • So there's, As you can see here, there's different ways Thio name the use that different named constructors.

  • You can use one of them's asset, which we're gonna use.

  • There's also file memory and network, so we'll use network later.

  • Let's use asset for now.

  • That's basically taking any asset you've specified in your pub spec camel file.

  • So we can now just provide it the name of the asset paths are gonna say Pass it pass.

  • And the last thing we wanted to cover in this video Last main thing is how image wants to expand and behave based on the screen size or the container that it's in so much like HTML or CSS.

  • You can specify how it expands and all that.

  • And the way you do that in flutter is we use this fits parameter, and we use this, um, kind of value called box fit cover.

  • So box fit like box decoration box constraints, uh, box if it gives you additional options like that.

  • So fit hide fit with cover, Phil contain.

  • You can use these in your free time and click into them and read about them in the documentation.

  • The documentation will explain how to use these, but in this video, we're just gonna use cover and cover.

  • Does is it fills the image all the way as much as it can within the container that it's in.

  • Ah, cool.

  • They have something similar in CSS as well.

  • So let's save this.

  • Um there is some syntax error.

  • So we're gonna make sure that we have the image asset finished here, and then the container finished.

  • And let's see what else we didn't.

  • Okay, Like like this.

  • Make sure this is finished.

  • And what else?

  • I need a semicolon here.

  • That's what it was, the semicolon.

  • So I'm gonna restart it.

  • And there we go.

  • The image loads, and it's exactly 200 pixels high.

  • And now we can get started on the text of our app.

  • So that was the tutorial here.

  • Um, And again, if you want to read through the block post, it has all the code, and you can read through it in your free time.

  • Um and yeah, that's it.

  • So thanks for watching.

  • Hey, everyone.

  • So in this video, we're gonna be covering how to use custom fonts and flutter, and we're gonna be building out our screen here where we already out of the image of the top.

  • But we're gonna start adding text sections here, so a text section will have, as you see here, where it says summary, they'll have the title and I'll have a body.

  • So we're gonna implement that widget and then we're finally going to cover tech steaming and flutter.

  • So text gaming allows you to define all your style in one place for different types of elements in your act.

  • And then that way you're code is very clean because it knows what kind of style to pull from.

  • So let's get started.

  • Um, if you want to follow along, I have the block post here.

  • And to get the font files that we're gonna be using those font assets, simply check out step slash step 04 branch of this.

  • The code depository on the link is in the block post.

  • So let's get started.

  • We're gonna implement first.

  • We're not gonna quite follow a step by step the block post in the block posts order.

  • We're just gonna implement the actual text section first because then I can apply the fun, and it'll just look like nicer.

  • Um, be more understandable.

  • So the first thing we're gonna do is implement Maur features of this text section because right now it's very contrived.

  • It just shows colors.

  • That's it.

  • What we want to do is remove this color and be able to show a title and a body So let's implement that now.

  • So instead of color we're gonna implement to private members won his title and one in his body, we're gonna update the constructor and this So this, uh dot body.

  • So whatever you pass it in, pass in here as a positional parameters will be assigned to these members.

  • And then let's basically define how we want our which it to be structured so this each widget can have its own layout.

  • So in the location details screen, we do use something called a column.

  • We already covered that in the layout to video, but each text section will have its own column because content is laid out from top to bottom in a column format.

  • So it's gonna be summary and then this body of text.

  • So instead of container here, let's implement a column.

  • Its gonna be its own column.

  • Main axis alignments is going to be Start meeting wth E.

  • Each child is gonna be laid out from top to bottom sequentially without any pattern across axis alignment will be stretch, So I wanted to stretch to the full width of the container.

  • What we're gonna do is remove decoration.

  • We don't need that, um, and for child, I'm going to have some texts here.

  • Um, well, we have to stay Children because it's going to be a column.

  • And it's gonna be a list of items here we're just gonna have titled and then the other one is body.

  • Then we're gonna end our column number already did here and and our Children here hit save, and then we're going to There's an air because we have to update our location Details screen to use this.

  • So we already have text section imported here.

  • We don't need to do that.

  • And now we're just going to say, Well, hard coats and values in here.

  • So it's a summary, something one and then something to end something free.

  • So later we're gonna make all this text dynamic it's gonna pull from a Web server, a p i M p I running on a Web server somewhere, And, uh, we're not gonna hard coat anything like the image names and all that so cool.

  • It looks really born because there's no formatting to it.

  • So let's cover that next first thing we want to do is add padding to each of our widgets.

  • so to add padding to each text bit of text here, we're going to wrap each text widget in a container which it the container widget lets us define that that the text doesn't so to add padding to a container.

  • Uh, because we want to control the different padding scheme.

  • So we want to control patting on the left and right and the top and bottom, and it's gonna be different for each were going to say constant, which is a constant edge insects and then from lt R b.

  • So that's a special names constructor for EJ insets and lets you granular really define all that padding.

  • So because this each this text section, which it is going to share the same left and right padding, I'm going to, for simplicity's sake, define a constant up here.

  • And it's well, it's gonna be a static constant, Um, and I'll get to that Why has be static in a second, but we're gonna call it horizontal padding and from just brevity.

  • Because I use this lot, I'm going to say h pad and people usually will figure out what that means.

  • The reason why it's static is because since I'm using a concert here.

  • It just has to be static.

  • I can't.

  • I can't.

  • You see, if I remove it here, I can't define a constant a cz a member of a class here.

  • It has to be static.

  • That's just the rules of dark.

  • Yeah.

  • So for the left and the right padding, it's gonna have that value.

  • Um, for the top of the bottom, I'm just going to use a custom values interviews 32 4 You don't really need to specify the decimal point, but I just like to, because it's a double and just more consistent that way.

  • Um, so then we define the padding here, I'm gonna end uh, see text on my container, and then I'm gonna add, uh, let me have my child, and then I'm gonna add the other container.

  • And it's just gonna have different padding because because of the fact that it is a just based on the design of the APP is gonna have different type of padding so that padding will be Let me look at my notes.

  • It's gonna be 10 and just use the same value as horizontal padding Here, Save it so cool Now we have, uh, the things, like, nicely padded.

  • And I'll add some or text years so you could see it, like, kind of looking a little more realistic in the next video we're gonna add in riel text here.

  • Uh, so let me just peace that in cool.

  • So that's just really, really ugly looking text, but it shows you that, um it's gonna flow nicely.

  • And the padding looks okay.

  • Okay, So let's cover thes style of the app.

  • Before we do that, though, the style that we're gonna implement uses a custom fart.

  • And so we can implement that style without it failing until we add our font files.

  • So let's go at a custom thought.

  • So to get the custom font file we're gonna need and let me show you the screenshot that the front looks really nice, it's this font Montserrat.

  • Um, I'm gonna I've checked out the Step four branch of the code, and I'm just gonna copy the assets that already have.

  • I'm gonna do that offscreen here because it's just easier.

  • Um, and what we're gonna do is in the assets directory.

  • We're gonna have a child called fonts, So that's gonna be a sibling of the images directory, and then I'm gonna just paste it in here off screen and boom.

  • Okay, so the funds got added.

  • So each font file I downloaded these from Google Fonts.

  • Each font file has a special, like family name.

  • And what we're gonna do is in our pubs.

  • Becky, ammo file.

  • As you remember, the pubs, like the animal file, lets you define packages that we're gonna cover that what?

  • We haven't used a custom package yet.

  • It lets you define where your image assets are.

  • So here, assets such images.

  • But for this video, I've implemented this already, which you're gonna have to type in yourself or copy from the example code.

  • We can define a section called Fonts, and it has to be invented properly.

  • So you just do one indentation because it lives under the flutter section.

  • That's very important.

  • We're gonna call it Montserrat.

  • So the family name you define here is the family name you'll refer to in your style when you define styles.

  • So for each font file, Aiken, specify the wait I want to use.

  • So for this file, it's gonna be 300 which is kind of like, regular light slash regular wait and then 600 is kind of a bold wait.

  • So we're gonna have two different weights, so make sure you save that, Um, and the indentation is all proper.

  • It's like using two spaces for each section.

  • That's how yellow that format, you Melisse defining indentation.

  • So how do we use thes fonts?

  • But one thing we can do is in our text section.

  • We can define in each text widget just to get something toe work.

  • We can just say style, and then we can define text style.

  • And then we can define all kinds of Kramer's for that style.

  • But for just for cleaner, simpler code, we don't need to do that verbose way of doing things, because that's going to get very repetitive.

  • What we want to do is to find one single style throughout the app, and it kind of works like CSS as well and to define this style throughout the app because we're using a material app widget, the material average, it gives us these shortcuts.

  • And one thing when we look at my notes here, um, one thing we can do here is define something called a steam.

  • So this is how we use themes in flutter.

  • So a theme is something general, and there's different types of theme.

  • So we're going to say Theme and then seeing data and themed data lets us to find various how various widgets are styled in the APP.

  • So the first thing we're gonna define is the APP bar theme.

  • So the at bar is a material designed terminology for the navigation bar at the top.

  • So for IOS users, it's called the Navigation Bar.

  • So we say at Bar Theme and you and Stan State and at bar scene class exactly, and so that at 14 class is going to give you certain parameters.

  • One is the just basic text theme of the navigation bar at the top.

  • So let's define a text team and the text team.

  • We instead see it here and for the title of that texting.

  • There's different.

  • There's different options you can use for a text team.

  • You can go over it in your free time, but these are the different thes air.

  • Basically, all the main options for a general tech steam and I won't get into is too much, but for the sake of brevity in this video, I'm going to find the texting that I want to use.

  • And instead of hard coating into my file here, I'm going to define the text team in a separate file.

  • So it's nicely organized, but for now, I'm just gonna type in what I want to implement, and that's gonna be at bar text style.

  • This is going to be something I define as a custom thing.

  • Uh, in just a moment I'm gonna now I'm going to implement it.

  • So to organize your style properly, what I personally took we do is I create a file called Style Doc Dart and that style that Dark is going to define all the style of my app.

  • And what I'm gonna do is in for its material.

  • And I'm gonna define some constants at the top because I'm just gonna paste it in here and what this does.

  • It lets me keep my style file very succinct and clear.

  • So I'm defining specific different categories of text size is and then the name of the farm I want to use.

  • This is the core family name I defined in my pub spec e m o phile.

  • So I'm gonna pace this in here.

  • This is going to meet my app bar style.

  • It's gonna be it again.

  • And it's a text style and it works again.

  • It works a lot like CSS, so it's very easy to follow.

  • Has a font family.

  • So refers to my Fontaine, Montserrat A Wait.

  • So for font wait in flutter.

  • You can define different front waits so they all go from 100 to 900.

  • And because I defined one that's called 300 in my pub spec ammo file, See here I can use that.

  • Wait.

  • So that's the front.

  • Wait.

  • And then the font size, it's medium.

  • It's 20 and then the colors.

  • It's just gonna be kind of white because the fact that I have a colored knave bar up here, So I'm going to save that.

  • And then I'm gonna import in my, um after dark, styled out dark.

  • I'm gonna save it and cool Now are naff bar is styled with custom front.

  • You see, it's kind of like lightweight here, Um, and we'll we'll style it more later because that's not this is not quite the final design we want to use, but we'll continue with this later.

  • So let's finish up the style of our app.

  • So now that we have the at Bar Steen, the interpretation is a bit strange looking here because of the way auto formats it.

  • But for me do this so that you could read it better.

  • Um, and the last style we're gonna define here is our style for just basically the text section.

  • So I'm gonna go look at my notes here.

  • So for the text theme we're gonna define, there's various texting that throughout the app that we can define here, so text team could be for various different components.

  • So one is for just that.

  • Lose something loosely named called Title.

  • You can.

  • I'll show you how to use it in a second, but it's basically for any title you use.

  • Um, so we're gonna call it a title textile.

  • We're gonna implement this in a second because this style same with the APP our textile will come from our style file, and then we're gonna say body one.

  • So body one is just another name.

  • We're gonna refer to it later in our code.

  • And that's for any body text body start.

  • We're gonna call it body one textile.

  • So let's implement this now in our style file.

  • So in our style dot dark, I'm gonna paste these in.

  • First off, I'm gonna paste in the title textile and the title sex style is gonna be looking like the same thing, but it's just gonna have a black color, and that's gonna be large.

  • The next one is body one textile, same thing, but it's just gonna have a, uh, different text size So body text size of 16.

  • So now they paced the dozen.

  • Andi, I have these defined here.

  • Uh, the general style for all of the text on the APP now has changed.

  • So it's going to use the basic font of wth e style.

  • But there's certain elements about it that are not gonna be used.

  • So for let's say, the title textile, it's not gonna use this, uh, certain elements of this So it's not gonna be large yet, so to to kind of deliberately say hey for this title here lets a summary one I want to use the title textile I have to deliver Lee go into my text section widget and we're gonna have to update that.

  • So how we're gonna update that is for here.

  • We're going to say for the text widget style, and then we're gonna say steam, use the name constructor off.

  • We're gonna pass it our context.

  • And again, our context is something we pass around in the app and it just is a way for flutter to kind of, uh uh, no certain of certain contextual information about the rendering treaty, the widget tree.

  • And now we can refer to any style that we have defined here so we can refer to text style texting rather.

  • So because of the fact we defined a text steam, I'll go back to here here.

  • So in our theme data widget here we defined a text team.

  • So now we can use it so I could say theme of context, text theme.

  • And now I can specify exactly what subset of my texting s O.

  • Because I defined a title text steam again, going back to app that dart.

  • See, I had to find a title text team.

  • I can use that now, so I say title here and I'm going to save it.

  • And now it's using the actual text theme.

  • I want it.

  • It's the exact text size that I wanted to use all along.

  • I'm going to do the same thing for my body.

  • So I'm gonna paste this in here, and I'm gonna say body one.

  • So, um, basically, it's not gonna be I don't have to do this because it's already taking the style of that because this is just normal text.

  • If I have to find a text team of body one, all that just general text of the act is gonna be stopped like this.

  • But I'm still defying this style here, and I'm using explicitly body one because it's just more explicit that way.

  • It's clear.

  • And, um, but you don't have to do it like that.

  • Um, so, yeah, that's that's how you style, text and flutter.

  • I think that wraps it up for this lesson.

  • Um, yeah, and we're gonna, you know, style this more later.

  • And then the next episode we're gonna actually use dynamic texts.

  • So we're not gonna hard code anything in.

  • Um, but yeah, that's it.

  • So thanks for watching.

  • Hey, everyone, Nick here.

  • So in this episode, we're going to talk about three things.

  • One is how to use models to represent data and functionality.

  • Um, and we're gonna update our code to make our screens dynamic and not hard code.

  • Any data in there on doll?

  • So we're gonna be covering dark concepts such as generics, the matte function, anonymous functions and cascades.

  • So if you wanna fall along, I'm gonna be going through this block post as I go to the lesson.

  • And you could find the block post on flutter crash course dot com and then go down to the episode working with models here.

  • If you want the code, the links in the block post right here, you have to just check out this branch here.

  • I have highlighted to have actually have the code we're gonna be implementing.

  • So let's talk about the significance of the apse data model.

  • So a data model is something very, very generic to any kind of app.

  • It's not only flutter APS, it could be, Ah, Web app.

  • Just the traditional software application or could be a mobile app doesn't matter.

  • So a model is basically a glorified class in darts.

  • So when we have an app that we're gonna write the AP usually has input and output.

  • So like any software program.

  • So the input of the data is going to be probably some data we fetch from an A P I somewhere.

  • So it could be ah, firebase a p I or a normal traditional http based rest ful ap I So that's the input, or at because the date is coming into our app.

  • But the problem is, we need.

  • So when we take that data into our app, we need to represent it somehow in memory.

  • And that data might be complex.

  • That might have different types of data with different types of fields to it and properties, and also that data might relate to each other in different ways.

  • So let's say we have our tourism and cho app here.

  • The input of the data would be a list of locations that can be shown to the user, and each location could have a list of fax of that location, like fun, interesting things that you want to show to the user.

  • So if we want to represent that data in our app, we're going to create two classes, a location class and a location.

  • Fact class, and we're gonna have a relationship between them.

  • So, um, the model also represents the relationships between different pieces of data.

  • So the location, model or class, if you will, will have a list item a member.

  • That's a list The dart list.

  • That's gonna be a list of fax.

  • So there's a one too many relationship between location and location.

  • Fact.

  • So all of this data, taxonomy and all that stuff we're gonna represent in classes and we're gonna call them models.

  • That's just like a terminology that a lot of people use.

  • So when we fetch the data from the A.

  • P, I were gonna write certain code that creates instances of the location class.

  • And when we want to use that data in our app, lets say we load a given screen.

  • Let's say reload a location, detail screen.

  • We can easily work with that data if we have them cleanly separated into separate model files.

  • So, um, so again, scrolling down here, we have the models, location and location fact that we're gonna create in the lesson.

  • And again, it's going to be a one too many relationships.

  • So that's more coming from database design terminology.

  • One too many and all that stuff.

  • But that's just like stuff that you should know as well.

  • You could use that not only for databases, but also for how your models relate to each other in your flutter app.

  • Um, so this is how we're gonna use our models.

  • I'm scrolling down here.

  • This is how just there's a given use case of how we're going to use our models.

  • So our app loads and then, since we don't have multiple screens yet in our app, we're going to do that in the next lesson.

  • We have a single location, details screen, it's gonna load.

  • We're gonna say, Hey, just give me, like, from a list of given locations based on a location, identify her or i D.

  • We're gonna also add that in this lesson, give us the name of the location and then render it in the navigation bar and then for each location fact again, it's a one too many relationship between location, location, fact render a given text section on our screen.

  • So right now, as you can see in my simulator, I have three text sections.

Hey, everyone.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

フラッターコース - 初心者のための完全チュートリアル (iOSとAndroidアプリのビルド) (Flutter Course - Full Tutorial for Beginners (Build iOS and Android Apps))

  • 4 1
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語