Flutter Zero to Professional: cross platform development for iOS Android | DevTechie Interactive | Skillshare

Flutter Zero to Professional: cross platform development for iOS Android

DevTechie Interactive, Learn new everyday

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
60 Lessons (11h 15m)
    • 1. Intro

    • 2. What is Flutter

    • 3. Installation & Environment Configuration

    • 4. Hello World App in Flutter

    • 5. Understanding Flutter Classes and Main Method

    • 6. Stateless VS Stateful Widgets

    • 7. Dart Programming Language Tour

    • 8. Create First Rich UI App in Flutter Part 1

    • 9. Create First Rich UI App in Flutter Part 2

    • 10. Create First Rich UI App in Flutter Part 3

    • 11. Create First Rich UI App in Flutter Final

    • 12. Using Themes in Flutter

    • 13. Create SnackBar

    • 14. TabView and TabBar

    • 15. Animated Drawer Menu

    • 16. Orientation Detection

    • 17. Downloading Images from Internet

    • 18. Fade In Animation on Downloaded Images

    • 19. Caching Images

    • 20. Basic ListView

    • 21. Horizontal ListView

    • 22. Handling Long ListView Items

    • 23. Creating mixed item listview

    • 24. Creating mixed item listview 2

    • 25. GridView

    • 26. Gesture Detector & Tap Gesture

    • 27. Ripple effect on tap with InkWell

    • 28. Swipe To Dismiss Gesture

    • 29. Navigating Between Pages

    • 30. Passing data between pages: Master Detail

    • 31. Returning Data From Selection Screen

    • 32. Hero Animation

    • 33. Fade In Animation with Stateful Widget

    • 34. Container Class

    • 35. Row Class

    • 36. Column Class

    • 37. Working with local images

    • 38. Text class

    • 39. FlatButton Class

    • 40. Raised Button Class

    • 41. Floating Action Button Class

    • 42. Icon Button Class

    • 43. AppBar Action Buttons

    • 44. Button Bar Class

    • 45. Text Field Class

    • 46. Stack

    • 47. Stateful GridView

    • 48. Stateful AppBar

    • 49. Stateful AppBar

    • 50. Stateful Checkbox

    • 51. Stateful TextField

    • 52. Stateful Slider

    • 53. New: Flutter BusinessCard

    • 54. New: Flutter DiceGame

    • 55. New: Animated Age Calculator

    • 56. New: Tic Tac Toe Game

    • 57. New: Social App

    • 58. New: Social App Animation Components

    • 59. New: Social App Conversation Widget and Data

    • 60. New: Social App Chat Bubble View

46 students are watching this class

About This Class

What is Flutter?

Flutter is a mobile app SDK, complete with framework, widgets, and tools, that gives developers an easy and productive way to build and deploy beautiful mobile apps on both Android and iOS.

What does Flutter do?

For users, Flutter makes beautiful app UIs come to life.

For developers, Flutter lowers the bar to entry for building mobile apps. It speeds up development of mobile apps and reduces the cost and complexity of app production across iOS and Android.

For designers, Flutter helps deliver the original design vision, without loss of fidelity or compromises. It also acts as a productive prototyping tool.

Who is Flutter for?

Flutter is for developers that want a faster way to build beautiful mobile apps, or a way to reach more users with a single investment.

Flutter is also for engineering managers that need to lead mobile development teams. Flutter allows eng managers to create a single mobile app dev team, unifying their development investments to ship more features faster, ship the same feature set to iOS and Android at the same time, and lower maintenance costs.

While not the initial target audience, Flutter is also for designers that want their original design visions delivered consistently, with high fidelity, to all users on mobile.

Fundamentally, Flutter is for users that want beautiful apps, with delightful motion and animation, and UIs with character and an identity all their own.

How experienced of a programmer/developer do I have to be to use Flutter?

Flutter is approachable to programmers familiar with object-oriented concepts (classes, methods, variables, etc) and imperative programming concepts (loops, conditionals, etc).

No prior mobile experience is required in order to learn and use Flutter.

We have seen people with very little programming experience learn and use Flutter for prototyping and app development.


1. Intro: Hello. I want hope you're doing great. And I'm very excited to present to you this, uh, new, uh, video series on flutter flutter is a new her black mobile platform. That or my moral framework that Google announced how we recently and it is now in beta too . And basically, what it does is it lets you create a very dynamic and beautiful you I based on Google's material design very, very easily in one single language. So all you need to do is basically no up it about dark our programming language, which is the language choice, hard to develop, flutter, and then you can actually develop both for Android and Iowa's. And in this coast, we're going to explore, dart and see like, you know how easy it is to un seen and write your code in it. But what can you do in flutter? Well, sort of rise to a fast development. So, as you can see in this example right here that you're changing code like, you know, on the edit on the editor side, and you can just do ah, heart reload. And then all your changes are reflected right then and there. So this gifts. You know, uh, this gives you an opportunity to basically save a lot of time launching, relaunching and stuff. So, as you know, like, you know, for ah, you I development. This is who wanted the mean made problem where you make changes. But you don't know how they're gonna look on the device itself. Well, in this case, ah, you need to do if you make changes here and then you just hit heart recode in Your changes are already on your in your app, all right. And, uh, you can do as you can see, You can actually create a really beautiful uh, you guys, how? That's like, you know, you look at, like, how how they have actually created this table view or list view here. And there are some beautiful graphs and design, and everything here that you see is material designed based piney fault. It's it's material design based, but you can actually change it. Um, how are you? Like to be okay? And it is Martin Envy active, So it's basically based on reactive programming, so I don't know if you've heard, but reactive programming is a new way off programming where You don't have to do all the blocks and easing programming, but it's actually all about after worst and author bring changes and stuff like that and you're change your code adopt to the chase that it has actually listened to. And then it would actually make those new updates available. Do you like, you know, as a subsequent Jane. So I would definitely recommend checking out reactive from programming. But flutter already does that for you, and you can access all or most of the native features and s Seagate's using floater library . And basically, hey, can reuse your Joe a swifter, objective c code to do all those right and or the most defining feature is that it is optimized. It is up nice for, um, for not only for testing and integration and everything, but it is actually optimized for generating do de GPU. Excellent ADP eyes reacting Framework Animations has fluent coding experience and it is fast. It actually really, really fast. It's as fast as your native native basically APs all right. And one of the thing that you're gonna notice, actually that there's a lot of support now for floater, and they're a lot off our packages that were getting released every single day, and it is open source so anyone can contribute to it. But even, actually, literally, Come on this, bub dot dot language start or and flutter and basically search for plugging that you're looking for and drop it and just started using it. And they give you, like, you know, nice examples. So you don't have to worry about how to how to basically use it or how to, like, you know, dig up the documentation, your stuff and stuff like that. It is very well documented. Um, so this is actually this is a huge change with flutter getting into the market in, like, you know, with all the other cloth graft from, uh, frameworks out there like a react native and stuff. Florida is definitely making a lot of difference. And, uh, I'm hoping that Ghoul is gonna announce it is final release candidate pretty soon, but right now they're in beta, and they're going produce successful and pretty strong. So I hope you guys are excited, and if you are listen rolled into discourse and we will learn how to create Ah, flutter APS. And over time, I'll be updating this content to include more and more examples that will show you different things. How to do it. So this is a constantly updating content. Basically, you coast. So I hope you enjoy. Enjoy the course and I will see you in the car. Thank you. 2. What is Flutter: lower. But my name is Anoop. And I'm very excited to present to you how this new video series on flutter and this video series name is Flor zero to professional. So basically, what we're gonna be doing in this video series, basically, it's we're gonna be exploring each and every aspect off flutter in how you can create so to really cool APS cross platform. Basically both want Android and Iowa is with just one cent of court base. And are we going to be looking at steps from installations do all the way, creating a few APS on our own? Basically from scratch. All right, So hey, must be asking what is flutter? So Florida is a human while its decay on and it's a new way to build fast, reliable, beautiful cross. But from APS how Google has launched her flutter in beta two right now, and they basically describe it as flutter. It's a Google's mobile you I framework that can be leveraged to create high quality native interfaces for both IOS and android, and it's free and open source. The best part is that despite of being a cross platform, it has perform is like native APS. So what is the history behind cross with plus platform frameworks? Well, I'm glad you asked how across the road from, uh, frameworks have been around for a long time now, and they were mainly based on javascript in reviews. That's all the frameworks are like phone gap, Apache Cordova, which is, like, you know, the based became base for, ah, lot many other cross platform frameworks in that I do that I think as well. And then there was update. Update him. Um, a titanium, actually. Um, eso uh, yeah, I might not remember the exact the company who owned that. But actually tatting iwas another framework. Um, but this is the general architecture that they followed. So you had your platform, which was, like, Iowa's our android. And the platform had, like, views in cameras in events and this all belong on javascript side. And then he have platform services, huh? Which are, like, locations are It's approved. How do you service sensors, cameras. It's And, uh, your app would be written in javascript. And then when it needs to Dr. Basically your app is gonna be hosted on Web you and shown on Web. You off the platform and it can use anything related to canvass for external cameras and event Basically estimate Tom event a tree and everything related to it, so it can do all that without any problem. But the real problem came when it needed to talk to how the mobile services like location service or blue dude. Um, and this moment location tracking is sort of inbuilt with STM out five. But this was not the case before. So you still write this home and you would still have this Ah, little piece of God called bridge. And this would be specific to the platform, and it would actually be packaged along with your app. And this bridge had responsible to communicate between javascript and the platform. So there was like, you know, javascript. You Arhab region. Jalisco will send some signals to bridge and then bridges gonna basically convert it into the native language and then forwarded to the platform and then received the response back and pass it back in JavaScript Understandable manner back to Europe. Sit down with the general architecture that that followed. Then came how react native and reactive was good. I mean it. It Actually, a lot of people who were using form Gap are ionic. Even some of the native app developers moved into react. Native float and reactionary was essentially the same thing I was again. You write things on javascript in order to run it and make it available across the board. But you would also right native components. And those native conformance would live behind this on the platform side. And like you guessed, native native components would be returned a native language like for IOS. It would be written either and left or ineffective. See, And for Android, it would be written in Java. Courtland. Um But, um, your app is still gonna be in javascript, so but the difference is basically early. And you had, like, bridge talking just for the just from the services that it had to use for the platform. In this case, there was a big block off bridge for anything that you need to talk to. Basically gonna talk to the platform, you're gonna go through the bridge, and, uh, that bridge basically converts. See her code into the native hole and native put back to the back to the back TD javascript code. This caused the main formation performance issue for like, you know, various different cases. I mean, some cases that you would see react native works actually faster than native. But there are a lot of cases like, you know, where your heavily dependent upon your platform and platform services. Then it would actually slow down. And one of the main reason waas this conversion between JavaScript and the native what's happening at the wrong time that added up a lot of cost and basically a fear app grew and complexity. Then it became more more performance impact on your app because of Deacon because of the translation that is going on back and forth. All right, so we had to find a way. How then game flutter now further is just like react. Native basically provides a reactive style off reactive style views. So basically, if you type anything, you have to like, you know, hit anarchy or wait for event to happen, it actually observed that So that's the reactive style of programming and actually floated actually follows that in a lot of ways, but it takes a different approach. Our tow avoid performance issues, Um, and basically There is no need for Jalisco bridging anymore has its own s ticket that sits within your app and actually deals everything in anything that he need Basically, from that perspective so and the indios ing is flutters written in dart. So you write your program endured not in telescope, which is a compiler language. Now Dart has a head off time language compiler which actually convert your dark cold into native code for multiple platforms. And right off the bat actually starts to create a runner for IOS Aim for Android. So you would see that code basically being present there all the time. And when you're actually writing your only writing and start now compiling your code into native, improved app start up time and that performers now start of time with important because you want to make sure you keep your sort of time as minimum as possible. And this actually helps a lot with that on a floater is a mobile as decay and it comes with a framework as the has bridge. Instant tools gives you as a developer and easy and productive way to build and deploy mobile APS both for Android and IOS Now, at this point, these are the only two major platforms are available on eye on mobile side how there's windows. But its presence is really, really small. And for that reason, sort, it does not cover that side. Um, So what we're gonna be doing, basically, it's how we are going to be a first. Let's take a look. How do you stop, flutter and configure your environment basically to get ready? How for to to create these from perhaps. And then we're going to start from very basic caps. And then we'll explore each and every aspect off ab development within Florida. All right, so hope you guys enjoyed the studio, and I will see you guys next to deal. Thank you. 3. Installation & Environment Configuration: Hello and welcome back. And in this service, you were going to be looking at setting up setting up our, uh, environments are basically doing some downloads and stuff so we can get ready to set up our Norment for floater development. Right? So, fasting on a show you is, uh, this place that you should bookmark. It's called a flooded road. I'll desist of website. And if you notice basically flutter has Google docks about floor like, you know what it is and everything, but they also show you a quick demo and the shows you like. You know how fast development days basically, you just, uh, modify your code click on, uh, the refresh button and you're changes are there reflected. And it may seem like, you know, there's a lot going on here, but, ah, as the move forward into this, you gonna understand that it's actually very, very easy to write APS in front or okay. And these are some of the examples that they have given. Actually, you can browse them around basically to see, like, you know how rich content we can create with the of its letter. And then he talks about like reactive framework and reactive programming the way it works and a basically ducks public. You know how you can access the native features within flutter as well. Okay, so there's a lot of information here s o I would actually recommend course you going through that in, uh, time to time. Come back and check on the updates. Turner is right now, Peter to, um and Google is, I think, planning to release it before glow, um, off this year. So hopefully we're going to see much more, much more traction in this and doing Google Iowa's Well, okay, so, uh, alright, How solicitous started and, uh, Down, Lord. Clever. So if you don't do the if you click on this blue button get started, you're gonna fall in on the screen. And this green has three types of install seeking the storm windows. Mac os or Lennix. Of course, for this world, should I have used our my quest, but even choose depending upon your OS type? All right, Once you click on Mac OS, it's actually gonna take you to the screen where it talks about, like, you know what? The requirements are basically for basic insulation and then you download this further acidic A zip file. Now, this is a pretty big file. It's like about five very 70 megabytes, so half rgb off size, so it may take some time, depending upon your network. Bend it. I've already downloaded this hard drive and, uh, basically your TV to do it, you know, each downloaded and then extract it out, um, to a folder. So when he extracted out, it's gonna be to create gonna create a folder called Flutter. And then once you have that, you can simply add flavors tools to your path and the stars like temporary paths that seeking literally copied this and paste in your terminal, and it's gonna set your path for you. Now you can set your path and it gives you, like, you know how to set your path for, like, you know, on this folder, but for temporarily but like, permanently so you can actually follow along here. Um, now, once you have done, once you have done that, basically gonna run this command flutter, doctor, and this command is going to show you basically look at your environment. Look at your machine and see, like in order the things that you have already installed. A lot of things that you need to install. Albert Brookman, Tom Morning. Enjoy. That's decay and enjoyed studio Do basically use that and extracted Keep it because it's gonna actually look for that. And once it find it's actually gonna continue forward, like, you know, if it's already installed, Okay, now, now, one of the good thing is they have made their super easy. So they give you all the things that you need basically on your machine, and they give you, like instructions on how they installed those that stuff. Now we are going to be using iris plant from Like I said, it's ah right ones and use both on IOS and Android. But you can pick like you know which one you gonna run. Because I already have Xcor configured on this machine and I was simulator available. I'm problem. I'm gonna use I set up. But you might, as all the use android tear up which is are basically shown right here. And once you have done piece of set up, it's pretty much same. So automatically floater, actually compile. See accord in both Android and IOS. So You don't have to, like, you know, choose one or the other. This this set up thing a highly depends upon like, You know what you already have available. So it takes less time for you to configure your environment sour. Recommend whatever you have configured. Just move forward with that end. Follow these steps. According toe it. Okay, so once you have those, you can actually I mean, I have excluding started already. So, like, you know, everything is healthy. Said what? He can run these commands, and it'll actually show you what your states are If you're, like in IOS developer and looking into flutter right now, Um, no. One of the thing actually gonna notice when you run a flutter doctor and it doesn't talk about it here. It's gonna say missing devices, it's going to report this error. So when you resolve every single area that you have, you're gonna have one missing error and it's gonna be missing device. And the reason that missing device shows up because there's no device connected. Now you don't have to have a physical device connected. What into is you can run a simulator. So if I won Iowa similar own machine then, um, s soon as I run it and this launching and ready and available. Then if I go back in and run for little doctor again, it would actually find the device. And it would say, OK, everything is good. All right. So I did They take me a little bit like to figure out because I didn't reach to this. Ah, step And their documentation is, like, you know, all over the place for this reason. So I did some googling and find out that this is how you can result that Okay, so for for that, like, you know, I mean, there are a few few more steps about membership and stuff, and then you just start you up by your foot to run, and it lower on the basic up, but yeah, in the next one. Now we cannot confirm unity. Which one we need to use. Which kind of what kind of needed to be 30 years? Because obviously we're not gonna be using excluded doesn't support start. So let's take a look at that. So our I would say you can install, like, you know, intelligent or android studio, and you can actually work with with intelligent, actually not interested audio mentality or Web storm. Um, but our recommend how we just to decode reason is it is very, very light. And it has a great support. And even if you notice even the floor a reptilian actually use, it's either entered studio. Are we just wrinkled? And if you this visual studio code, it has every single, even screenshots and everything available in the obstruction for you. Okay, So, um so, yeah, so you can actually go ahead and install Yes, coat. And then it actually talks about, like, you know, creating, downloading, plugging. So you simply open your we just area code and, um, type these commands and get yourself set up for dart. Okay, So once you have, once you have done all this, our environment is configured. I already have figured my word. So what we're gonna be doing basically, in the next video, we're going to start looking from B just code so we can look at minister code, how to create your new app and basically, how to run that app and then go from there. Okay. Ah, Well, um I will see you guys in next would in that case. And if you have any questions, feel free to message me. And I'll actually try to respond those as soon as possible. Right? Thanks again for watching. I'll see as an extra diem. 4. Hello World App in Flutter: Hello, everyone. Welcome back. And in this video we'll start looking at how to create a new flutter project. So what I'm gonna do is, uh I'm going to have a visual studio code open, and I have Ah, I mean, this is just an old project, so I would say save, but what we need to do in order to create in new project, it's basically you simply go to view and click on command palette. And, uh uh, when you click on it, basically this window is going to show up, and when you can do here is you can stay flutter new project, and this entry is gonna show up. So you just like that. Give your project in name, for example, you can say my but first app and, uh, cause it should be lower case. All right, so we can say my first app and click enter, and basically you can select a location and and save it basically there. So I'm gonna select this location and save the project ing. Now, you you wanna make sure that this location is not inside the flutter sdk folder, so because it's not going toe work, so Basically, you have to choose a location like your documents or something where you can create this project. So I'm going to select him, and, uh, then how further is going to create a new project for me? And it's basically working here to create some files. So I'm going to close this, and, uh, I'm gonna maximize this one, all right? And when we are, when we are done, basically you're going to see this main dot dart file. Now we can do right off here is you can actually go to debug and click on to start debugging. Now, one thing you want to make sure that you have your now your simulator running so you can see Ah, the execution. And as you can see here, it's starting the build process. And, um, it's gonna basically launch the app very, very soon. I said, is it finishes that all right, taking up your time, Probably because it's the first time it sexually do it. As you can see, it has not created a folder yet. Oh, while it is loading, let me actually talk off about few things. So in flutter how everything within the flooded application is a regent. Um, and that includes simple text buttons are screen layouts. So all these are called widgets Now, these videos are can be arranged in for hierarchical orders to display on the screen. So basically, you can create one rigid, and underneath that, you're gonna start by creating ah, hole bunch of others. Now, Richards, which hold we just within, like, you know, basically, we just let's hold another wizard. Visits inside it are called container religions, and most of the layout Richards are actually container rejects. Except for the video. It's that does, like, very minimal ter. Basically like a text widget for you showing just the text. All right, so I hope that is actually, uh, that makes a little sense, but we are going to be actually starting to put all this together, and you're going to see basically what I am talking about. Okay, So, uh, let's see. Well, it's still working for some reason, and, uh, saying it's stalling in launching, and I don't see that that being launched anywhere. So let's give it a few more minutes and, uh, let me click. Stop and, uh, basically kill my simulator and simulator. Let's relaunch it. All right. I think it's launching right now. Okay, so we'll give it a minute. Okay, Cool. And now let's click on Debug one more time. And, uh, let's wait. We're going to lead Southeast ups till the time this one. Cool. It's starting. I might. How they go, it's loading that something must have happened with the connection so that I had to restarted. Okay, cool. So this is your demo app that actually comes out of the box. And as you can see, hey says, like, you know, you have pushed this button many times Any click on this button and shows you how many times you have quit. Now, one of the coolest thing is that you don't have to, uh, rerun this. So if I'm gonna go and change it, if I change this to say your clicks and just click on this reload button, it just changes it right there. And as you remember, like, you know, started from 11 instead, off starting from zero. That means that's that's what they call hot reload. Basically it real, or is it really, really quickly? So that's one of the main advantage of like you know, seeing flavor as you work on it. He just refresh the patient and your changes are over there. So there's a whole bunch of things going on here. We are going to do a simple thing. We are going to delete everything. Yeah. Alright, how about that? Okay, so let's start reading from the top. Uh, so what is going on? So first thing is, we import packages in flutter, and these packed this package. We're importing material design now. What is material designed? Basically, all these things that you see and the effect off, like, you know, this clicking and the bubble effect that is actually much. And Google has been basically making changes to all or most of the most of their APs to conformed to this material. And it has flat you, I and colors and some really cool animations. So So that's the sort it is. There's a lot of opportunities. I'm so Google material design and look it up. But by default, dark actually imports that this package called material don't start. All right. And next line is basically your main function. Like you gets every other programming language starts with mate. So they sound that's too on. And like we discussed last time Dart is a compiled language of all. OK, so it follows all the standers, So s so this means is actually what calls you're happened. What we're doing here is the same wide main and then we run the app and run up. This is where you pass your class that you have created. And if you notice my class has an editor and we're gonna come back to that But this class extends stateless behavior. Now eso stayed less fidget, which is which is called stateless for a reason. We're gonna come back to that, I thought, Alright, the first thing we're gonna do is we're gonna really quickly jump in, right? Some basic code. Okay, So let's make let's see what the center says. They said missing concrete implementation for stateless widget dot build. Okay, so every single class in Vigen or every single widget in flutter basically requires a build method, So simply type build and let visual studio figure out what that going to be, and you just click the one that says build context and that's the one we want. So let's do some very simple things. So basically, what we're gonna do is we're gonna display hello, flutter on mobile app, and we'll use a container fidget called directionality. And within that we are going to use a text widget to display the text on the screen. And here is what it's gonna look like they're gonna say return new directionality, Okay. And, uh, it required the same because they're gonna put it in there. Now, next thing is how we can hover over and see one of the parameters. So if you notice we have key here next direction and a Bridget Children So we're going to use text direction and Children. So next direction it basically how your app reads. Basically, um, this defiance your left to right and right to left, like, you know, languages And how your layout is gonna be Trond. And we can select lt are left, right. And then you're gonna say, child child is another parameter, and this is where we're gonna define what we want to show. And in this case, we just want to show it text. So we're gonna say new text and we're gonna give it a string here. Call. Hello? Flutter All right, So that's our first app. And that is it that fought for you to do so. If I stop and we build it because they have made some significant changes Heart reload may sometimes not work. And you may see that we are you. I hasn't changed because most of time hot reload only works when you have your changing within the class Like some minor changes related to you, I your extra functionality and stuff. And sometimes it just keeps your you I same if you have made several, like, you know, major changes for that to work If that ever happens to you because it has happened to me. Ah, lot. So if that ever happens to you, just kill, basically hit the stop button and start one more time, like, you know, from the scratch. So reboot are are re launched. The app. Okay. All right. So here we have our app running hand. I notice we have hello floater here. But it's not where we wanted to be. A mere scared. It's like a minimal code, but it actually is. Is at the at the left complication both be one. What? If you want it to be on the center. Oh, a z s. Oh, it happens like you know that your your floater comes with a rigid called center. So what we're gonna do is self. We are going to replace our child with that new center. Okay, I should have cut that. So I'm gonna cut it. And Stipe new center and center, takes a parameter called child, and I'm gonna put my court back in. Okay, That's Teoh Heart renal. And check out if that made any difference. And it did. As you can see, our, um our text is now centered on the page. Okay. So hope that actually gives you a good start in the next video you're gonna do is basically we are going to create ah, a new app and start exploring and learning new things about material design and application bars and stuff like that. All right, So, uh, I cool. Um, So I will actually see you guys in the next video. Thanks again for watching 5. Understanding Flutter Classes and Main Method: Hello and welcome back. And, uh, now we're going to continue our app basically to do some cool design. So this is a very basic out, like, you know, but none of the applications and real world really have just plain text. Hello? Showing on the screen consent. They have a two least a navigation part, a body and some navigation functionalities. Correct. So what we'll do is says we're already important this material. We gonna start looking at material design, basically revere, like, you know, start using some scaffold and scaffold. Bridget, what it's called that actually gives us all these functionality right out the box. So what I'm gonna do is I am going to remove all these, okay? And then I'm gonna start writing it again. Return. And this time we're gonna say new material ap have you got and this material help has a few properties. So it has titled This is the APP Title. So we're gonna say my sample, then it has home, which is a page and gets a new scaffold. Maybe, huh? In the scaffold against a apple are This is the navigation bar, the top bar that we're gonna show and gets a new app bar like some, and we're gonna give it a title in this title. It's going to be when you text, so anything that you wanna show in label or like you know, you label and stuff like that. Ah, use text for that so you can save your text and then say my first or my second flutter app . Okay, Now, there are some other things that you can do in that bar, and we're gonna come back to that. But we are going to create the populate, the next property, which is body so body and come. And this is again going to be something that you wanna show in center. So you have already learned how to center are objects in U. S. A new center and say child. But this is going to be new text and hello. Thank you. So that's very hard. Hard freeload and see there. Yep, This time report. And as you can see, it's no longer just a blank black screen with the white text. But it has a really nice, um, top navigation bar. And then there's a white background. You can see some shadowing everything going on here and the steeper. Actually, I'm going to show you how you can turn this up, but this is actually showing because we're running our app in debug mode, and that's what this is. Okay, so don't worry about that right now, but But yet our text is showing right in the center and everything. So, uh, so if you look at our AP hierarchy, we have material app at the top. It has to child notes. One is titled Number one is home. Okay. And then, uh, your home has a scaffold. Now, your scaffold basically holds a delegation. So it's it's holds an application app bar, which had the title, and it has a test. Average it inside and you're a to the same level as a scaffold. You have body and body contents, center element and next. Right. So, in material design, the body can hold only one widget, which is not what we want. So a general the screen can contain our multiple Bridget's now, in order to achieve that, we need to have how we need to use a rigid as a child which can hold array off. Richards are basically collection off digits and there are multiple way just in Florida that can hold collection off videos has child now row or column is one of them. And, um, we are what we're going to be looking at next is basically adding a role and we can add a couple off text item in there. So let's go ahead and modify our, um, modify our body and for the child instead of feeling text, we are gonna what we're gonna show or what we're gonna create if a new row, okay. And, uh, then we can say Children, and I can see it is a widget type away. And they said they were gonna define new text. And we're gonna give it, um, hello and new text world that now, if I go ahead and do a hot refresh, you can see how we have this hello world showing up here. Now I can change this two columns. So I continued to call him in. Let's see if that works. I because he it's actually working. And it's created two columns. There is hello and the result. Okay, so that's that's basically how you can create a whole bunch off multiple multiple elements within every day. Okay, now nothing. How honest. See, is how you can pass custom parameters to the digit. So your your class, my app basically is a reject. This right here is a video, as it states here stateless budget. And we can also pass parameters to this ridge It Now, this is something that is done by creating a constructor, basically, for your particular app. Now it is not military, but a common practice to declare a prompter provided inside a constructor has final. Okay, so in the next car code, what we're gonna do is we're going to create a A text in Egypt, and we can actually provide what is known as, like, you know, supplying parameters. And we're gonna see how we can supply parameters to our my app. Ah, budget, which is the popular legend that we have at the moment. Okay, so let's go ahead, and I'm gonna remove everything and reason. I won't do that because I just want to do right everything. Like from threat. That gives me more practice. So my ep and then we can extend again Stateless. We did it in here. We going to say we're gonna create my app. And this is a constructor that takes this dot Oh, next input. Now, what is that? Texans, football. We can create one if they find reject text input like that. All right, so we have final video text input. Now, this text input eyes what we're taking in as a constructor. So Constructor Brown. So we're going to hear is modified the main and say as a constructive brown. We're gonna pass text input like so, and you're gonna say next new text and we're gonna supply hello from May. All right. And it's giving the error again because you don't have or build. So I'm just gonna put back in there and really quickly type return new material app so and put a cynical in here and, uh all right, um, next thing acting we did. You need a title and title is my app, And we need basically home. And that's his new scaffold. AP bar New APP. Bar entitled, um, you text. And this is hello platter. Okay. And next thing body and this body is going to be new center and gonna have a child note, Basically a new column and this column is going to contain Children, which is going to be the text input, like so All right, so less hot. Reload and, uh, take it out. Oh, is giving some hair still say stop. And we built so we can see there's an error. There is no error. All right, let's wait for it to build and compile, all right? Just taking every time I felt. What? They're okay. So there we go. We have our hello from Maine. Printed their cool. So this is, uh this is, uh this brings to the Hindarto video happen today. And we learned how to create constructors in in your flow wrap and supplies some default leaves, basically as a constructor from the main. Now, in the next week, we're going to start talking about stateless and state full of idiots like the one that we see right here. Okay. All right. So thanks again for watching Elsie against a next video 6. Stateless VS Stateful Widgets: Hello and welcome back. And today how we are going to talk about state state less in state, full widgets now, stateless. How widgets or something that you been actually creating? Yeah, like in us up in a deal so far. And, uh, basically a stateless Bridget can only be drawn at once of like, only ones when the widget is loaded, which means they cannot be rerun unless you actually relaunched them. Eso basically will begin to, if we are are going to be creating a very simple AP that's going to show you how stateless actually shows just a steady content and the content. Even if it is something that can respond to events and stuff like that, it won't be able to. So that's what, like, you know, are we going to see? And then how are we gonna actually update it to create a state ful our widget, which is going to basically respond to your are to your events the first less jane out by creating a stateless rejects. So what I'm going to you is, uh, we have all these how we're gonna create a new baby boat and we're gonna call display type Julian vertical this check box Bali. And it's like the death. Both and then, uh, sorry, then what we're gonna do is we are going to add a new tack box. So new check box, have you go? And we are going to say value. It's going to be checked box, Have you and, uh, on change that that's the event we're looking for. How are we going to supply a function and dysfunction takes bullion new value, All right? And it's such that so we're gonna say check box value tickle toe. So, ideally, what happened is SNL. You, um you basically check the box? It should turn this true, false and false. False to true, depending upon check box a check box of state. All right, so let's real hard, you see. So if you notice I'm trying to click theme checkbooks, but it's not. It's not doing anything. And that is what a stateless. We just so state less. Fridges are basically there to display static content or pages that needs to be reloaded multiple times within an application. Alright, so that's what stateless witches are now. State full visits overcome this real deficiency off stateless and a state ful, which it can be loaded many times by calling set state. Now, this old sugar? Um, um yeah. So this will trigger the build method, this one right here, And, uh, then I would be called again. Eso basically the creation off state will visit. It's a little bit different than creating status, which is as we will be creating as you're going to see in the next cold weaken. Right? Basically, you're gonna be creating two classes, and one of those classes will do derive from state full widget, and another one is going to derive from generic state. Okay. And in every state full reject, we override the Create state method to create the instance off our state fullness. Okay, so here's how our state ful widget is going to look like So we're gonna do is that we are going to probably I'll leave this house. So I said, yeah, final Bridget text widget. And we have my app, and it basically takes this as a constructor input. We're going to create a new my app state communicate state a better, right? And, uh, this method is going to be new. My APP state Now What is this? My APP? State. All right, so we should um Yeah, we should actually, uh, we need to know what is this new? My APP State is so basically, this is a second class that is going to extend from state. So we're gonna see class my app state. However, and this is going to extend Staked my right. And then here, we're gonna say, Bullion jack box, probably you is equal to false. Okay. And, uh, you gonna say build and in return, new material, huh? Material. Here you go. And, uh, this material app is going to have a tangle. Um, so my app. All right. And then it's gonna have home again. This is gonna be scat folded AP bar New APP bar, and be very wide title to this new text entitled It's Going to Me. Hello. And, uh, then we're gonna say body, you don you center and inside the center. No, we are going to create Children. What child? He's gonna have a new column. There's gonna be a column layout, and, uh, we will basically need to create So for this, All right. And how to re access this text input. Right? So the Texan foot right here. How do we get that? We call it using Bridget. Doctor, Texan. Like so. Okay, so this is going to provide it. So, Texan put whatever have actually provided isn't. And then we gets a new check box of this fantastic control, and you say value is check box value and on change. Uh, this is going to be this is all right. So what's going on? Okay, he's in a two. Okay? Own change is going to have a function created, so it's kind of cool. New value. All right. And Carnegie, open and close. Set state. Okay. And, uh, this is going to be immediately executing function. And because check box Well, it's equal to you, Victor. All right, so if I heart reload, he and, uh, try to go back. I strong in there because we'll have to launch it and see OK. Oh, this needs to be state state full, Would it? Alright, let's try it again. My app is already to find state visit. No, the issue. Okay, so let's see what we get. Uh, I think it's still long. Team, for some reason, is taking a little bit more time than expected. So stop this and relaunch it. And, uh, gonna wait a minute and basically the bill processes triggering. Okay, so until the time is basically launching, let's talk about, like, you know, the next I don't like, we're gonna be handling eso, uh, what we're gonna be doing, that's basically we're gonna be creating or adding the app bar actions. So basically, the bar that you saw in the APP we're basically going to be adding some buttons on it. And the app are constructor itself provides options to add actions that we can actually create actionable items on that. And just like a row or column, it takes a ray of midget, which allows us to create multiple actionable items so you can have, like, in a multiple buttons show up, like on that on that action bar. Okay, um, so that's what we are going to be doing next, But for some reason, it's still looking at launching. So I feel like I should actually killed a simulator, and, uh, maybe we launch it. I guess that now remember, actually just flew her right now is still in beta, so they might be some issues here and there. And I'm hoping, actually by Google io they can actually announce Yeah, the full version. Basically, um, something, uh, release candidate now that that can be used, But right now way have. So we'll try to make this and put it in our best to use. Alright. Starting the build process again and liking Hopefully don't watch this time. Yeah, OK, I see some activity. All right. Has looks good. That looks promising. Better go. OK, so we have we have Finally, we have our app running and every can see. We have, like, you know, the state parks. And if you check and uncheck it, actually response two year changes. There you go. How nice. Okay, so that is get on now less update our APP bar basically to have some actions. So I'm gonna add actions, and it takes a collection off widgets. So what we're gonna do is we're going to use a new type called Icon, but okay in this icon, but has you property? It's icon and you say new icon. And this icons, basically you get, like, a set of icons that we can use. So let's say you use ad, Okay. Oh, are add alert, I think. And it's good. Okay. And we can define its behavior so we can say on press we are going to basically se set state. Okay. And, uh, forget to Senegal and single and then gonna stay action text if he called him new text. Okay, so this action text is something that we're gonna create right here. So you gotta say, stream action text is equal to default decks. All right, so we're gonna give it, like, new text here and now we're the icon. Button end something. Add another one. Some. That's a new icon button. So it's her typing it all out. Let's copy from here to here, OK? And paste it and then we want to make this doctor removed and you can say default. Okay, So what's we have that what we will do is we will somehow show this new value that that you have actually said So what? We're going to you say new text and we're gonna show this action text like so in that right ? As to heart, reload and try to see. Okay, So we have hello from May default texts and check boxes checked. Begin still. Object that. But look at this. We have two buttons here. Now, if I click plus, it changes to new text. And if I go it minus it changes to default text. And look at this. You also have icons available, basically all the pictures. So that means that basically, you can have, like, you know, a whole bunch of there's a whole bunch of a list of icons, and then you can use it. It's stuff like, you know, including little images and emoji that stuff like that you can actually use pre existing set off icons for your app. So, um, Kobe guys enjoyed this, would you? And in the next video, we're gonna be exploring a little bit more about flutter. So I will actually see you guys in the next video. Thank you. 7. Dart Programming Language Tour: Hello and welcome back. And, uh, this video I saw that you can take a quick tour off dark language itself. And the reason is we are going to be using dark so much that I thought, like, you know, it's a good idea that you would actually go head and learn some basics about about the language itself. Now, if you already know no, how dark works and what's the syntax and everything? Please feel free to skip to studio, because that's oh, we're gonna talk in this video, but for those who are hanging around to see it, uh, less temp right in. Okay, so I met. Um, at this location, dark lang dot ork is the official website for dark language. And the, uh, the left actually start here, and they show a really cool example off computing by and the value of the pie. And basically, they show how to import Thanks so important. Like different modules. So here importing hey, sink for parallel computing and asynchronous programming. Important math library for computations and stuff like that. And then, as you can see, there's a think await, which is a common better. So basically what do you do is you say your main function is now a think await, which means it's gonna a synchronously execute this this piece of code and it's gonna a wait for the results to come back. And basically, when that happens, it's actually gonna print that. Okay, in the computer by is is the method because it's running on, like, you know, within the await, and they think it's actually going to run on the back girlfriend. Okay, All right. Um oh, this is some. Or, like, you know, there's a traitor for generate random numbers and stuff like that. And this is how they're showing you can create a class and you can have, like, a final value, which is like a constant and like, you know, final is like a constant, but not a constant constant. And you have a constant, which is constant as the constant is like, you know that you change that you defined and you do not change ever. Finally, it's something that he actually defined it until it's actually you declare. But until it is actually defined, um, I can change it. So I mean, you can put a value. So, for example, we can say that, you know, double X and Y and X and Y values are going to be final values once they're set. Okay, so that's that's tortoises. And the develops I actually talks about, like, you know, different different patterns started falls like here, so reactive, way off programming. It's an approachable, exportable fast and its production ready language. It's here. You're free to put ground, but we're going to go into this section right here. Language door. Okay, so let's go right in and honest girl down Because this all stuff, they actually talk. I've been started Keywords. So these are some reserved keywords that you are not allowed to use because compiler, you system for their own purposes. Okay, Now, how do you declare a variable will simply create a war and you give it that name basically very building, and then you give it value, okay? And, uh, that's how you can create a war. Now there's a new diaper that's actually called dynamic. OK, so I says here the name of the type of the name variable in for to be a string because it's actually a string that we're signing. It's inferred that in a string. But he can change that type by specifying yet, Okay. So you can simply specify like this against a string name and the heartstring Well, you that's gonna hold. Now, if in object, isn't restricted to a single type, he can't specified object or s dynamic following the design guideline. And here's design guideline the day of giving basically doing do then domes for objects and time mix and stuff like that. So feel free to leave whenever you have time. But what is actually what they're saying is, if you don't know ahead of time, what type of what type of the object is going to be and it might be a different type depending upon the situation, you can actually use optic whore dynamic type, so you can say dynamic name Bob. Okay, cool. So the default value, the initial un initialized may both have an initial, you know? Okay, so even in is is no. So even the variables with numeric types are initially now because numbers like everything else in dark, our object and that is a key. So if you notice in Java are served, you have value types which are defined which are initiated how or when they're in changing their initial values, something concrete and they're not object. So aimed double float. All these are all the values. All these variables are not objects. I mean, they have their objects off their classes, but those air different. There's a capital I capital T capital F capital, iPhone camp for integer camp ability from double capital for float. But if you're using in regular aimed, then you are actually using variable time. Now that is different. In Castleford art Dark uses everything, cause you just everything as an object, which is why whenever you actually create and end, he was still committed. Hamish lives with a no. Okay, now this is the is the so that they're talking about final in constant. So if you have never intended to change very well, we can We can declare it as a final or constant either instant off using far or in addition to a type. Okay? And this is where it talks about. Ah, finally able can be sat only once. And the constant variable is a compile time. Constant, I told justice was a clear distinction. This was a clear the central and alien. But yes, the final can only be said once and in the compile time a constant basically compiled them . So const available are implicitly final. So there eventually final implicitly. Okay, and final top level or class level is initialized the first time in NC used. That is actually the key when it's used, it's actually it's actually initializing find. Okay, cool. So how to see what else? What else? State are parts of the robot like creating a final name. They give making to various. It's so you can have a final name, Bob, Or you can have final string. Huh? Uh, Babel, Bobby. Okay. And you can have constant and you can have bounced in double. Okay, How now costs keyword isn't just for declaring constant very well. You can also use constant can also create constant values and the less declare constructors that create constant values. So that's actually the key. Now, if you create, if you create a constructor that accesses the constant so it's like static members like, you know, study probably So if you have, like in a static properties, because they are compiled while they're at the class level or Cynthia object level out there if you have a function that uses static people than those vehicles have to be static . So if the method of static very well it has to be static, that's the simple distinction between them. So still what they're saying sex, same goals with the constant. All right, now built in types of these are the boots on the building types like number string bullion , lest I'll also more than Ray maps. And this is a new one. Release is for expressing, uh, characters in string and symbols. Okay, so let's see how number selects the numbers are and double and then you have Yeah, internal are the only two types that they have don't have slowed and stuff like that. So basically, they're distinct. They're differentiating between the whole number and a fraction number. That's all it is on. Then you have strings in string seeking apply, like, seem operated just like in the other language, plus up concatenation equal equal for comparison and stuff like that. They have bullion, play for gold bullion basically true and false values. Um, and you can check for is any end so I mean, some of the things. If you look like you know, it's it looks like they have inherited or they have actually adopted from generals. Come pick. It is not. Number is actually from Palestine, and I have not seen so far in any other language that uses his not remember. Okay, So lists are race, That's important thing. So how do you create it? Basically, it's create Let's in square bracket and you put families there. You can check it slanty and access it by the index, and you can compare its index. They can create a constant lift that cannot be changed and they haven't list. Mainly have handy matter for manipulating list. Danareksa collections are still listed. You can go and more about it. Um, okay, maps Now maps are object association key value. So basically they're like talking about dictionaries, and they have adopted the name from Java. So job has maps. Basically, hash map and stuff like that does actually not that that name and maps are sensationally key value pairs. Starkey and something. Okay. All right. This is how you create a map? A. And you said it's values so protected out like you know how to do like, you know, even insertion. You can just say gifts first and it's going to create. It's going to consider that first in the key in the equal part in the Valley and stuff like that basically populated for you. But forward and then we got two moons are Ronnie's, are however you are. Pronounce it basically store emoji unified Unicode characters and stuff like that. So it's a string, but but a little bit louder. Larger range office. Fred. Okay, symbols that is. Actually they knew the symbols is an optic for percent and operator are identified. Declared in the dark program. You might never need to use symbols, but they're invaluable for AP eyes that refer to identify spine names. So rednecks are bar. Okay, All right, so we're gonna have to come back to it are probably my want to live in research and symbols like how symbols are have not seen symbols basically somewhere immune so far in my floater exploration. So I can't actually talk about him, but yeah, I would. I encourage you to actually go in, do some research about it if you're planning to use it, but it's not. It's probably not necessary. So functions How do you create function? So he actually defined the return type. Give that give the function and name and create a parameter list. And that's about it. Then here were turned Taipei. Take me. Should be Should should return the same thing that is staying. It's going okay, they can have a wide certain type, but by just a meeting of a turn type And, uh, effective tournaments still works if you'll meet. So I still works the film with dykes taken still recurrent things. Now this is actually inner in other compile time programming languages that you have to have a return type specified. If you're not, if you're returning and inadvertently any centric turned avoid. Okay, um and this looks like functions are just expressions. Okay, so this is basically, well, like a closure strip years, like just going to call fat arrow and you create functioning in you created Pharaoh and give it like a one liner expression and that actually relished on and get those those back . That's how you can create a function in the line. Okay, optional Well, use optional. Browder's basically optional parameters are something that that you can create and calling . You can specify named Browder's using ground and name value like this Set bold, hidden are you can say string from string message String that and, uh, and it's basically going to be just like this optional. Otherwise, it's gonna be You have to go. You have to give the names off the parameters. Right. Uh, has continue. Okay. The default value. So you can define default values for your parameter list. And you can say that basically, the default if user does not provide that valued. And here's a default value. All right. Others of application note old Gordon might use Colin is two people sent in default value, new parameter. The reason a surgeon the only coldness supported within the parameters that supported likely to be replicated anywhere when you used to use equal. Okay, so So they're saying, like, you know, here used equal step making colon because they are actually gonna get rid of it in future leaders. All right, um, so, uh, X example sets the default value for the positional parameters. All right, So you just a ray and sex and descending devalues for these, okay? And, uh, and this is how he can use this, which is very clever, actually. Define from and, uh, and like, you see this and that and, uh oh, this is the one, actually end. Bob says just a taste, But it's gonna actually return all these things and it on the result. I main function main function every half every app, like we discussed, have to have a main function. And that's their your program. Execution starts. So this you can create, um, infection. It means can take basically input. Like, come on, land out. Doing so our arguments that he provided, um, sort of like this one right here. And, uh, that's sexually Yeah, that's it for me. That's actually how I can pass custom valleys. Come on. Okay, um, functions are first, last optics. That means everything is striking origin and function. Most thinking past function around. You can use functions and the closer and you can have anonymous functions and stuff like that. There you go. I start with a functional said says I create hand. I think this next Run it and Shadia gold right here, right. And a logical scoping. Basically, it's gonna talk about like, you know how your A levels have scoped when you create them at the global level, they're actually scope at the global level. Babel sculpt at the block level are actually limited to the scope. Assume is that block ends the variable existence ends there. Okay. And, uh, closures and return about us. Okay, so that's actually returned. Ready? You can simply return it. There is no return. Basically, it returns. No, Just like See, um, And two, there's some of the operations. Okay, so you have, like, plus plus minus minus, and you have mine. It's not in all these Exxon operators that there's a much deeper creative, so like multiplication division en percent, Andy Shen and all these things. So basic met as our printer. Sorry. Useful eras all. And since I use some of the expressions, parentheses actually improve, the readability as well s basically creates the distinction, Which mean, like, you know what's gonna execute it first. Well, if you don't an upper two presidents, it's gonna taking place, which is Yeah, they should be talking somewhere. Yeah, they should have operated operator President's list somewhere. Which one takes the president? So what? But usually I bowed mass is the is the key. So look it up, Operator. Presidents, you're gonna find it. Okay? They are athletic, operator of speculations, infraction and all these things they apply. So they're pretty pretty common like in other languages. Big technique in pretty increment, post increment predicament. Post commit dusters, Xiang, it's showing here. And, uh, then you have equality, so you have a legal not equal test greater than equal to listen equal to Okay, I think in a playoff teeth, as is the typecast basically so casting your variable for one to the other. So let's say you have an object. You know, it's in type steak and say passes. So this object like name as and that's gonna be actually typecast to end It is absolute turns infant eighth type that object. So they have an object up type and FC is a object. Is independence gonna return true or false? Other ways that you knew what time it is. And this is like, you know how you can say if e m. P is a person, so that's a check. Basically, this they are showing. So this is the example that we're using, like in case, but this is showing you the class. If employee is a person than Brenda, first name, then it would know how to cause that. Okay, um, now these air, let's talk about some assignment operators, some default values and stuff like that biological operation and and are automatically short circuiting your else some big lies operators conditional. So yeah, condition like if else. And it also actually supports the try Conditional block where you have, like, a question mark in the colon and you have the local double question mark. That's all. Okay, so I think those are, like, most okay force which writing that looks like in exactly thing. So you have if statements regular, you have a for loop, just like her regular other languages. And I have fallen in so for readable in collection. And that's how you knew for in your treat. Or and then you have a while and do well. That's pretty much the same as other languages switch cases exactly saying there is no different parts that were here asserted something that you assert to disrupt a non execution sexually. It's good when you're debating yet being and actually assert things to make sure it is what you're expecting. It s night, and it throws exceptions like in our throne and catch them with the try. Catch, block, dry, unblock that sort them site, try on catch. So this is the exception they're talking about. And finally, is the block that executes every single time. Um so basically chills. Thank you. How you can actually close your connections and stuff like that, I think to talk about classes and received an example. Diego. So this is a class. They're creating a point glass with three variables. Number X, Y and Z. And they're cutting class putting like, you know, that you showed class in the main and asserting that if those venues are set or not, Okay, this is how we had a constructive for a class that this is how you create making class limo ables and stuff like that. There's a default constructor that has created out. Might be if you don't create one. But if you create one than that's actually the one that's being called and there's a little bit of cold here that actually shows you now the show in hurting so he can actually inherit from one class to the other, and you can call it's super methods to basically initialize those, uh, property hinted in the super classes. So I guess that's the mostly most of the common functions. So common things that we're gonna be focusing on. But I would actually recommend going through the whole thing and just exploring it out. What? We have looked so far, it's gonna be good enough for our exercise. But like, if you want explore more, I would recommend, actually do explore to do more things on the flu, understand? Because gonna be using most of these. But what we have seen so far, those are going to meet that think that we're gonna be looking at an out of focus keep my focus on the floater site. I just wanted to show this for the completion sake. So that's why here you're looking at this, But outside this vigna accident mostly talk about flutter and how to do things in floater. Okay, so I hope he hasn't during this video. And I will see you guys in the next video. You 8. Create First Rich UI App in Flutter Part 1: Hello and welcome back in their drink. Now we are going to be starting basically starting to explore flutter from scratch. So in the last section, we saw how do really quickly create a floater nap. We also saw how dark programming works. And what are some basic language? Constructs off dart are Okay, so starting from this video, following sections are mainly focusing on flutter and basically talking about flutter and different things to do or different ways to do and floated basically create you I and create a softy APS right in this section of what we're gonna be basically exploring there were going to be exploring our basic structure off letter up. Are we going to be learning how to find an ad dependencies over packages we're going to see ? Ah, heart reload on How does heart heart reload actually loads the the changes really quickly into your device? We're gonna also implement state full reject, um and we're going to see how we can actually apply infinities calling a basically in for tea schooling scalable list. So we're gonna create that and we're going to create a navigation to the second screen. So master detail kind off like like a view. That's what we're gonna create and last part Fast least How are we gonna learn how to change? Look off the app using seems all right. So, uh, let's get started. I have the I had the last how version that we were working on open and actually and I have a few things, so I'm gonna actually remove that e I'm gonna show you. Basically start from scratch. Okay? So let's just right maimed, so avoid mean This is our entry point, and we are going to use shorthand a potion, notation and guess they run app and my new my app. Now, we haven't created this yet, So this command throwing her But that is fine, because that's what we're gonna be doing next. So we're gonna create a class called my Hap, and we can extend state less widget, okay? And hear how we are going to be overriding built. All right, now then, this gold we're going to return material happen, and, uh, then we're gonna give it a title. Welcome. Do letter. Excuse me. And then I'm going to say home and we're gonna give a scaffold to home and Now this scaffold is going to contain at bar, which is going to be new at Bar. And this is gonna have a title on your text. And the title is going to be welcome to thank. And then we're gonna create body and this body is going to have a center element in Central is gonna have a child with new text and say hello like so Okay, now list. Um, so you and see if there's any problem, okay, Can find so cynical in here, and it's good started by you. All right? I have my savior open. So it should basically launch the app in in it and this building. And, uh, here's he can hear you see on the locks on. Okay. And you can see what's going on here. Okay. All right. Now, so we have welcome to fire. And how long? Floater. Okay, so some of the things how we can talk from this example. So this example creates a material app. Now, material is a visual design language that is a standard specifically on android mobile devices and web sites that Google creates, and Google actually promotes material. Sign on has bean. I think it has been launched. It was lying setting couple of years ago or something. And Google has changed pretty much all of their content and Web sites basically to follow a little sign. It is actually very it's based on, like, flat design. But, like, you know, user infractions are shown in a animation way and stuff like that. So I recommend if you want to know more about material design, um, you can go ahead and Google and find more information about it. It's really interesting. We can read if you know more about material. All right, Now flicker on first, which set off material widgets are built in. Okay. And we're gonna be seeing some of those. The main method right here. It uses this fat arrow notation. They call it fat arrow notation, which is a shorthand for writing. One line functions. So this auction we could have I think we convergent like this and we could have done something like our doesn't type. Don't think it returns to see the problem. Constructor, It's gotta make up. You don't draw. I'm sorry to say this. I expect a unexpected okay. And if you do reload, let's see if that works. Yeah. So it is working. I'm gonna put it back because, uh, I like the other only a little bit better, So Okay, cool. Now the itself extends thes stateless budget, which, uh, like, you know, some most of the videos in flutter are basically stateless, own or state full time. You have already seen the differences between those two, huh? In the previous examples enter basically, almost everything. That its president and Florida is a budget that includes any kind of alignment. Any kind of branding or any kind of lee out. So everything basically is referred as a digit. Okay, now, scaffold rigid. Right here, um, is from material library. And it provides a default app bar basically at bar and its title and the body property that holds a digit tree for the home screen. Now, Bridget sub tree can be quite complex, and you can actually build nested elements and stuff like that. And we have seen one example in one of the previous apse where we created Rose and added number off Children onto that crows are number of pictures down to that rules. Okay, Now, Richards main job is to provide this building method that describes how to display the ridge. It in turns off other lower level Richards. So that's why you have. Whenever you create class, you always have. You always write it built and he can write other functions. That stuff, it's all but built, has to be there. If that AB is your main entry app. Alright, if that is the one that's actually taken care off Executing and displaying all your content for the mobile app that build has to be there, OK, and basically the other stellar distinction it if it extends the stateless, visit your state full of idiot, then it has to have a build. If you're creating a regular class, you don't have to follow the same pattern where you're gonna have You're not gonna have basically a build. You can create your own little function. It's not gonna be seen as this build function right here. Okay, now the widget tree. How, for example, out this case consists off a center reject that contains a text child now center midget alliance. It's rigid sub tree to the center off the screen, which is why you see this flutter. Ah flutter I hope for all right here in the middle of the screen. And and, uh, basically, you have center, a limit end and then child and then text wrapped into it. Okay. All right. And now what we're gonna do is that we are going to learn how to create how to include dependencies off external packages, how to basically bring or import external packages into your project. Now, um, Flutter uses a different city manager. And if you go in bub Specs, Doc, GMO pile, What you can do is under dependency. He can define a song. Dependencies. I have added this CSS color one of them. And this up this scary. It basically shows that we want anything higher than 1.0 point zero. Okay, so you gonna do is we're gonna add Mother one. I am dishonest English and English words. Basically, I would coercion higher than 3.1 dot zero. That so it's gonna basically a salon test. English words package contained, if basically open source package that contains a few 1000 off English words. Blessed some utility functions. And how do you find how these packages now, How did I find this package? Basically, if you go on bub dot darkling dot org's slash flor, this is there. You can actually search for further packages in If I search for English English words, it's gonna be right here. And this is basically how it looks. Seek and see the usage, and you can see the change log. You can see the example and that he can see how basically can install it. All right, so the benefit of using original studio gold is essentially save. You're your code is going to basically call this floater package cat, and it's gonna load old independency basically is gonna make them available for you. So uh so yeah. So basically, this is how you will you will know. And this is how you get the no external packages included in your in your project. Ok, cool. So next thing we're gonna do is we are going to import suspect now, So we're gonna see import, and, uh, it started back into like it's suggesting. Okay, let's say English. Underscore words slash english underscore words dot dark. Okay, there you go. Attack right at the completion and gonna put a simple now reason the screen lighten is there going school Reliance there because we're not using any of the functionality for death, which is light showing us that air, but, well, we're gonna just use it right now. So this copy this and I'm gonna comment to slight and going to say child is going to be new text, and, uh, we need some text here. Now, how do we get a written index? Basically, we go up top, and we say final final word pair and we say new word, Pan, We don't have tapped a pass any Anything we say got friend. Okay, so this is going to get us a random next game. We're going to say word hair dark as that's a camel case. Our baby has Paschal case, all right? And if I if you go ahead and reload, are happy, um OK, so definitely is gonna sort. And I don't because hard reload may not work because we have added some dependency. You're Abney's to basically include those dependencies into your project and basically in your a p k or I be a file and then lose it again into the into the simulator or device. So that is why we were actually getting the better. So hopefully how if we do a relaunch, we should be able to see are changes. There we go. And he have grain man already showing up there. Okay, so that is a example. Now it just do a hardly time. You're gonna see it Basically generates a random next for us. Okay, so that is basically how you can include external libraries. Okay. Into your project. Now the stop book. A state. Full widgets without state ful. Stateless, but just a little bit. So maybe some information might be repeated here, but let's talk about those. Let's make that that distinction clear. Okay, So stateless. Stateless widgets are statelets. Widgets are immutable, meaning that their properties cannot be changed. So everything that defines a stateless which it all the values are final now. State full. Did it maintains state that change during the lifetime out of Egypt. And we saw that with the check box example, But we're checking it off. It was showing a different text and was showing the text box being changed and state being updated. Okay. Implementing state full ridge. It requires at least two classes. So one is a state. Full class state, full class. That creates an instance. And 2nd 1 is a state class, A state full reject class itself is immutable. But state last persists over the lifetime of a midget. Now, next we are going to basically we're gonna go and create some state ful rigid how we call it a random words. And we're going to create a state class for when the world state and the state will eventually maintain and proposed the favorite world Bear for the midget. Okay, so, uh, let's add a class here. You call this friend Words extends state full. What is it? Okay. And then how are we gonna say create state and it's gonna basically all right, that and it actually expects a return really returned in the random words state. Now, you don't have that yet. And we are going to be creating that next protector. Discreet class, and we'll say that extends state. I went when them worse. Okay. And baby got. Now, um, says it cannot be actually, so the return time isn't same. Uh, basically. So you can say it's, uh, extends heading. You can say the same thing here. We're gonna say this didn't go missing, Conquered implementation for build, like said how we need a somewhere. We're gonna need a build. Basically. So this is where we can actually define that seven gonna state build and just eight enter so we can actually get the default implementation. And this is the final word. There is equal to new work. They're not random Excel and standing s a return new text. And this is just going to be weren't better dot has Haskell case. Okay, so from the Afghan neutrality up, we no longer need this. So we can actually they move that and, uh, here we can say instead, off text, we can say we get new random words. Let's try to reload and see if that does anything. And, uh, if you notice, our results are still showing up. Um, that means that our implementation actually hurt so and is giving us different, different words here. So this is how you can see, like, you know, we can combine. Ah, whole point of classes. Two teams of from shouting to be created. And what you've done here is you have actually created. Basically, you have created your own rigid here. And then you have used that which it. So instead of using text, which is like another rigid you actually creating your own started using that. All right, so that is that is about, like, you know how you can create your own reject and apply those regions in place off like standard. We're there to create to achieve some kind of functionality that you want. Okay. So, hope. I think this is gonna be a little bit more clear to you how to basically create your own in the next. How video? How we are going to be weird when I start looking into how to create infinity scrolling list for you and we're gonna go from there. Thanks again for watching. I'll see again the next week. 9. Create First Rich UI App in Flutter Part 2: Hello and welcome back and investigate. We are going to be continuing to build our app. And basically, in this video, we're going to be starting to look at Infinity school Lubo list for you. Okay, so we're gonna keep scrolling the list for you, and it's gonna keep adding items and we can scroll to the infinity. So Right, so that's what we're gonna build. So let's start by creating a new variable in our state random warrant state, and this a boat is going to be called. I know. And we are going to be keeping it this internal, basically a pirate available. So, um, underscore basically defiance and enforces the privacy and in dark language. So that's how you create your private label. Okay, so you can say so Just show, All right. And we're going to say a word air type away, Okay. And then we're gonna create another one, and this is going to be another the final, um, biggest fund. Okay. And has given it a const text style of it. And text travel takes fund as part size at this parameter against 18 points. Okay, now, the next thing that you do, basically being added function called Bill suggestion to this random words state class. And this method is going to build the list view that is going to be displaying the suggesting word bearing. Okay, what is list for you? Well, it's true. Class provides a property for item builders. It's so it's basically a, uh a A table of you can think off with a bunch of rules. That's what it is, I guess. An android? Yes, sir. Him in various called this for you in higher s case. It's called a table of you. And that's that's what That's what you're gonna be creating and basically has item builder , a factory builder on a callback specified as the anonymous function. Now, two parameters are passed to the function, the bill context and the role it aerator. Now it aerator begins with zero an increment east time. The function is called. Um, it's called once for every distant word bearing. Okay, this'll model allows three suggesting list do grow infinitely as the user schools. All right, so let's let's continue. So basically really good really is in the budget. Um, this, um so we can actually create you better. Uh, and it's gonna be again with it. And, uh, it's going to be build suggestion petitions. You're gonna say, return new list of you and this list of U I's gonna call this builder function, okay? And builder takes few things like padding. And yes, they cost on. This is basically batting around just like, oh, strings, like in a little bit, like, you know, spacing between the edges and stuff like that. So edges instead, all 16 points, you know? All right. And, uh, then the next matter is item builder. And this is the ability to your doctor about which is it sex and anonymous function, And actually, it rates over so context. And I, um, and since function and have a gonna see if I a thought is odd. Okay, then you get in return. New defied. Okay, So this is me returning a divider, reject as c e o of a branch sees right here. Should be good. Okay, Now we can say final index is equal to I, right, but to so I, uh, Tilda divide to is basically I by two and returns the indigent result. So? So for example, if you do, I want 2345 and becomes 011 to 2. All right, so this calculates the actual number off world bearing in the list for you minus the divide . A legit. Okay, so we can say if the index is greater than equal to underscore suggestions that lind then you can say and score suggestions. The end. Oh, and be like, get art, generate word pairing. I don't take 10 again. Generate. 10 were appearing at this time, and, uh, then we're going to return this Peter underscore. Build well, score suggestions. Oh, Index. Okay, so let's just give it. Yeah, that a cynical And, uh, now, basically, if you notice that there's a hair that build grow and how Benadryl function is not going, it's still gonna basically create that, um, this index is starting an error because expected to find how, of course, soup does not have these break brackets, but start does in every other language, usually does. So okay, against create dysfunction from feature. First you go see with it, and it's gonna build grow. And, uh, you know, can the word pair pair post It's why. All right, And then he gets a return new list dial, and this list style is gonna have title. And the title is going to be you new text. And, uh, data is going to be bear dot has Pascoe case and style. It's going to be underscore bigger font. Okay, so that is that. Now, one thing that we wanted to is how we're gonna go to our random word state. Oh, uh, not Forget this. And let's go to, um yeah, the random words state file. And basically, what we're gonna do is we are going to be, uh, returning. Where is there a bill that's our together? Okay. Saying the bend context, we're going to say they turned its Hey, thanks s a return Return. New scaffold. This scaffold is going to have a title. Why is there okay? So return New cap hold. I fell. Oh, at a bar at Seidel. Sorry about that. App bar. Okay. Inepar has title, and the title is new text. Um, name generator. Okay. And then it has it has body, and this body is build suggestions. Now let's update the build method for my app and we can remove the scaffold in the Akbar instance for my app and and then we will manage that. Using random words state class, which makes it easier for us to tease the name for the route as it appears on the AP are as how the user never gets from one screen to the other, and that is going to be in the next step from going to see it. Okay, so in the my app bar, um, what we can do, it's how they gonna see your material. And the title is going to be the name generator, and then home is where just got and right here to save you works. Okay, so let's hope everything is getting in this. Please run and see it. Okay, Cool. So you can see you ever less showing up. And if I keep schooling is gonna keeps going, and it's gonna keep generating. Do you names for us. Okay. So yeah. So that actually brings us, um ah to the end of this video. And as you can see, we can actually, we just created a very cool, scalable table view askew. Call it in your IOS haps in this fuse in your android eso in the next video, we are going to basically creating some adding some interactivity. So we're gonna add some capable icons and on the metro And when user actually tap those, we can have marked them as their favorite name. And then we'll create another page where we are going to basically show all their favorite names and stuff like Okay, so hope you guys enjoyed sister do and I'll see you guys next video. Thank you. 10. Create First Rich UI App in Flutter Part 3: I go back and, uh, we're gonna continue building our app for the names and real. And in this video, we are going to be adding some interactive lee to the APP. So be we're basically going to create a little hardships next to these growth. And when user actually taps on those, how are we gonna basically say them as there favorite? I said, let's get started. Basically, first thing we're gonna do it's every going to go to our random words state class. And I guess right underneath suggestions gonna add a new property called Final Saved. Um, and this is our same set. So we're gonna see a new set. And I said, is a pipe word. Yeah, and you slide that. All right. And then you're gonna go to our builder row section right here. You're gonna add the variable here. It's well, final, already saved is able to underscore same that contains there. Okay. So you can check if it contains repair. I'm gonna put that in already saved oflife, and that we're gonna do it's This is the place where we're generating this new list and are less actually essentially. So our text ends here. That's a new text. And you can say trailing here. That's the trading optic. And we can see a new icon. And I can't are another set of widgets that actually provides some beautiful icons built in . So you don't have to, like, you know, import images and stuff like that. You can simply call this rigid icon. And you can basically provide some folks Chaldean and those icons for shop, so already saved her Neri condition on that, you can say I can't dot favorite different. Otherwise Icahn sexually. So I comes now and dark favorites if and icon dot pay for it 100 score border, which is empty icon, right? And then we're gonna say I'm gonna also defined the color on ST already saying we're gonna check it over, and we're gonna say color, uh, colors dot Bren, Otherwise we're gonna say return No. So used to default color. Okay, so let's try to heart reload and see if we have something. Well, we definitely have something, and we cannot for some reason, we cannot interact with that so we'll see what is going on. Your break. Um, I can't stop favorite home and saved so He's a trailing new icon and, um, and then say Same in color color's I'm afraid that's the color property. Old safe cushion are Yeah, I still looking. All right, Uh, and OK, so I see you are the property that I can't steak. So it takes a name and extraction size and color. All right, so it's just past, not this worldview right here. I am, actually. Really? Did you just passed? Icons stopped Favorite stop in build. Dozen gates. Um, because what we're supposed to be seeing is empty heart shapes. They're supposed to be seen, but it looks like there's some issues on there. Still showing your question, Mark, Um, hi. That was very strange. Should be. Yeah, it's a new training and training is new icon, and, uh, it takes already saved question because I thought I say faith. It's not smile that ends. Just do that. Not add for icons, not I'm over. So let's check these out. Let's see if neither Okay, so I have thes Oh, you know what? I think I know the boat. So if I go, um, in my previous project, when I was actually experimenting this I said using material design false. I need to turn. That's true. And if I do it right now, let's hope Oh, this isn't build. So because this is a change, how you have to actually start building, and it should show because of what material design was disabled, That's why did not show the correct I got. So I'm gonna actually put her from Sheltie back here for Favorite and, uh, people all right. Boerner They call her a is equal to already. He saved. So the question Mark Kolner read all this stuff, right? And far. No. Okay, so let's do a heart reload that ago. That is my favour. Now, if you notice how we do not have interactive d just yet, So that's the next thing. Well, you will be. We will be doing I will be providing the interactivity now. In order provide the activity we need Teoh set state to notify the framework That state has been changed. So we can do is, uh we can say right along this you can say on tap. So basically there to safety is on on that or on long press. So are you gonna do set state and, uh it's set. State is a excellent, like, anonymous motion in this function. Basically say, if already saved. So if everything is already saved, then they say saved that removed pair gave you a double between between them as saved dot and better. Okay, so now if we do a heart, we should be able to step on this. And look at that. How are hearts are changing its color and we have a bit of animation off the selection that is going on here. Okay, cool. So we have added now some interactivity into this. And now in the next video, we are going to be exploring how we can navigate to a new screens. All right, so hope you guys enjoyed this video. Hubble to see you guys. Next idea. Thank you. 11. Create First Rich UI App in Flutter Final: all right. Hello and welcome back. And, uh, in this video, how we are going to be building a new screen, and we're gonna be never getting to that screen to see all of our saved. Basically favorite font names. So how what we'll be doing? Basically, we're going to be using something called Route R O U T route in flutter. And what is rock? Basically, route is a way to navigate between two different places. So we're gonna be learning how to never get between the home run and they knew. And the new route that you're gonna create. Um, and, uh, the navigator means a stack that continues APS route. So a whole bunch of routes that basically just holds and pushing her out onto a navigators stack basically updates the display to that rough. So basically, just bushes s. And as you push a new vote to the navigator, stack it. You're actually called into that screen. Now, when you pop Iraq from the nephew to stack, it actually returns to the previous screen. Okay, So what we're gonna do, basically we're gonna add a list. Aiken to the EP are in the build method for the random words state and really user is going to click on that icon. The new right near out that contains the favorite items is gonna be pushed to the navigator and it's going to display the icon. Right? So you're gonna know what we're talking about. Estimates we start building it. Okay, so let's go. Random words. State right here. And we're gonna go to our scaffold. However we are creating are skeptical mattered. So build suggestion, take. We have this in and we have a title. And them this app are also contains something called Actions. Okay, and actions is an array and basically, how we are going to providing some authority into that. Okay, So how what that social the would be? Hey, it's up. Basically, we can say, um, new, I go on, but, um, so we're gonna have a have a Nikon button. An icon button takes icon. So we're gonna say the icon that we need is a new icon. Um, I don't stop list. All right. And yes, a on pressed for a tad, we are going to be doing something now. What? That something is gonna push. Saved. Aha. Seven gonna be uh, calling this push saved method numbers. Well, it's not there yet. Hand. We are going to be just creating that. So let's clear that avoid on this card Bush saved. Okay? And in this death, basically our error should go away. And this is we can say here it's a navigator dot off context dot push. And we're gonna right before salty. Right. Okay, So what we going to basically, in this personal charity, we're gonna say new material page proud. There you go. In this material patri out how we are going to say a even to call a builder and, uh, this builder, it's going to take context. Uh, it's an anonymous function, basically, and U s a final by, uh, tiles he's been called to underscore steamed that map. This is a have a function that actually startling with your wife's, and it's gonna map for each pair. You know what's gonna do Basically gonna say, return a new list tile for this map family. So whatever you've passed a pair on basically created a list of value out of it with title as new text, like so and basically the new Texas going to prepare dot as asco case spent style underscore. Big fart or biggest fund. Okay, let's put a single in here. And, uh, once we have a right Sophia piss it closed. Okay, Um, then we're gonna basically divide this. So s e r. Texas clothing here. Our list is closing care chemical. Um, And then we have this closing care, so this is gonna say, defied, divided is equal to list Tiote don't fight, it tells. And in a pastie context and tiles two titles. So okay. And you call that to list into it. All right, now, basically what we're gonna be returning. So do this. And, uh, but we could be returning from here. It's gonna be returning a new scaffold. And at a bar seven are the table has in the text. Hey, uh, and, uh, saved. It's a chess chance and gonna have ah, content body. And this body is going to have a list for you. So the Children do you find it? All right, cook. So once they have done that, what I can do is we're gonna do hot reload and taking out. We have a icon here, and as you tap on that icon. We have a whole for items that we have saved here. Okay, so he and more items, unless that's actually move and just add one and just click on it. And then we go, We have jazz. Look, and again See, here we have selected jazz. Look, how cool is that? All right, cool. So last thing, actually, we should before we wrap up this one. Yeah. Let me really quickly show you how you can changed it seem for the app. So if you go up to your my app stateless. We did right here. How we can actually said team right here, I guess A theme. Um And this is going to be new team. Um, data? No, right. Team data? I think so. And this team data, we're gonna say primary color. He's going to be colors. Don't wait. Good. If I do heart reload, write them. There you go. You have just changed the theme and you can actually try out other colors like orange, orange exit. OK, do hot. We load and then we go. We have hot basically our index int. So as you can see ham, this is like super cool and very, very easy to do things in flutter. And it actually shows you a lot, many ways off, like, you know, doing things. So I hope you enjoyed quite a lot in this by creating this app. And that's in the hands on approach sentry gonna be taking in future videos, that's all. All right, eso just to wrap, like you know, this what you did in this video. Basically you created a fully functional sort of app from ground up. Okay, you wrote a dark cord. You leverage some external libraries of used hard to know to basically quickly see your changes in the rial running app implemented state full video and allowed interactivity. In your act, you created a lazy, loaded infinitive scrolling list which displays less views in less styles that I created route and added logic to move data between route, home route in the new about right, he also learned about changing the look and feel by using things. All right, so hope you guys enjoyed how this video and I really appreciate, like some good reviews. So please, please, please give me some good reviews and what I'm gonna be doing. Basically, I'm gonna be updating this content. So I'm gonna publish this, and I'm gonna actually creates the more content and keep uploading and keep updating this course. So stay tuned, and I will be providing Maurin more updates. Flair is news or takes a little bit time to do a lot of research. And I won't actually do a whole lot of research and then present to you guys a ready made solution so we can actually learn. Learn together. So that is what we are going to be doing. All right. Thanks again. And I'm gonna actually, uh, update the content very soon. So for now, I will see you guys in a few in a week or two. OK, go. Thank you so much. 12. Using Themes in Flutter: Hello and welcome back. You there today. Now we are going to be looking at a team saying flutter. So, basically, if you if you want to provide shared color, sir, foreign styles throughout Europe, we can take advantage of teams. Now, there are two wasted findings How you can do it up wide or you can use a thin budget. Basically, And this happen, we are going to be creating something called, uh, we're creating APP scene and basically team data and then now basically color basically provide a color scheme. You are All right. So let's get started. I have empty your project. Open hand on in court. Another package. We're clever slash foundation star go. All right. And I have material dot dot Already important. A skater Mean gone to severe. You're gonna be calling our ap basically running. So if you point my abs, it's not clear yet. Let's go get the class my stems State Klis yet something. And then what will you do? Basically override the build, so don't No. And here you go, you a happening It's the name is today and then we're gonna return. Uh, basically new material help and we're gonna try to title. Fine. It's happening, Mr Deline. It's a thing he knew seem data. This is that you can actually use pre defined things like dark fall back light and no, but we're going to create our own. So you say brightness is equal to Oh, brightness are dark and primary color. Well, two colors dot light blue with a shade. I mean, you can provide how much lighter you want, and I'm gonna use 800 valley here. An excellent color. It's another one you are dot i am 600. Okay, Clearly. Okay. And we're going to stay home. Is creating home page for the new my home. Gonna create this class in a minute and what we're gonna do basically, by this I see you do that title. Next thing you can do is we are going to be creating this class gold by called page skins. Stateless. Wait, It Okay? Yeah, I think that's a string. That's your title and my home page. Um, call the constructors key. It's clean. I required. They start that gold. The title is a choir with this. All right, it's a super super. That's exit is something that they have to call the super off to stateless, which basically good handwriting. So for that reason, and then from here, please building gold turn you scaffold and this bar bar and at bars title text And it's gonna be tidal Hey, and it's cynical, enhanced. And we can say, you know, body the center so underlined, channeled Dating her. Yeah, Koehler down there. Seen dark off context. So should go that context dot x and color Gonna get the X and color that you have to find here and here. Actually. Get that. Yeah, I was a child. It's going text. This is going to provide it a scream show, text grade, background color style is off context. Yeah. Cut. Next thing. Okay. Now, um, just for this one. For now, I also want creating button just to show you like floating action, but that you can create with very, very easy, So allergies are warnings. So worried, by the way now, right, it's filling. I think it's gonna launch now. Very cool. Soon as you can see, we have we created the steam their priest to find that retard. I'm gonna give finally colors to blue. So it's like number. And then we give back on core. And that Babylon that used what container? Um, right here at X and color. And then we print our text on that with the same color texting and which is, like, now gonna reward it like toe white color, basically to contract said, And, uh, and creating and creating a extra The background, Uh, look at something. So that's the one most thing actually take. Yeah, float. But And I'm defined that so impotent floor action button right here and continues Uh huh. And this is the example of, like, you know how you can have seen basically apply thing least park off, like off your APP context. What's one more time? Copy with Can you copy the X uncover se colors dot yellow. Then that's a child. It's morning action, but all right, they're gonna press you say no. Anything on breath and style is going to be, uh, an icon from icons. Not Okay. So it's hard to reload and take a look. So there we go. We have this button you are putting weapon that we have created. We actually go over it. Nixon color. So a safety would have. Like, I wanted a different color, like deal. Thank you. All right, cool. So that was it for, like, things. And I hope you guys enjoyed basically themes. That is something that that you can use to create. Let go a common looking field in one place. Do manage all your colors and styles. It is very, very helpful. And, uh, basically, I am acquainted, Like, you know, if you if you're using more check out thing did, uh, Bell commendation just to get more idea. But yeah, this is how basically we can use things well within our up. I hope you guys enjoyed the studio, and I will see you guys in mixing you. Thank you. 13. Create SnackBar: Hello and welcome back and dad today how we are going to be looking something called Snap are e entao. Well, what is the snack bar? Basically. So when you create APS that follow material to find, basically, if there is a, like, a short message or alert that you want to give to your user like some some action they have taken. Basically, I feel dog a form and saved successfully. Then you want to show them on the limerick saying, Hey, actually, uh, this will save or something like that. Right? Um, so in those cases can you can show a snack bar and with the snack bar, you can also give some excitable buttons and stuff, and they national All right, So the steps to create snake bar are raising you create a scaffold, and you basically display snipe are you provide in the actions you wanna be? Take right. So in this example, we are going to be building a complete example for a sniper, right? So less get started. I have a the import and the package already included, and we're gonna create my abs are gonna actually call this difference of the college a smock far. Okay, uh, this was our class of again as a class that our demo sends state less. Was it and se or I built that turn todo Teoh. Like Is that told? Gonna create home page. And how big is gonna have a scaffold gap Old basically out. Are you have? Yeah, this is kind of in the text. Thanks for. Okay, well, I but body now we can we create a new class? Oh, and, uh, we'll actually use that. So snack or back where we can actually segregate are responsible to do a different class class us neck. Our page extends date, reject, build one. And, uh, well, we wanna return. Return is new center. Uh, his child You raised mutton own press in the safe. Eso basically, uh, we're gonna put a button on this. Yeah, Dad, because they when you press that, but you wanna show these more. Okay, so you say fine. Lisnek bar, far equal to you. Snack bar? Yeah. Can say basically, I can supply some content. Deco too. Text. But some eso no se. Okay, then action that this is the action. It's a snack bar action label. Undo all right on press. He connects to the, uh, do something here to well, this exam believer. Thanks. Simple in here. And, um, you have here going here and, uh, right here. I say scaffold. Um, not on text show. Yeah, I see little here. And, uh, as a child who ride a child. Basically text show far. No. Right. Okay. Yes, actually. And take a look. I did. Are, um basically, what's gonna happen? That's the shore page. You know that base? We're gonna have a, uh, a button, which is gonna have text show. Thank bar. And we need click on that button. I'll begin the show they asked for at the bottom, and it's gonna have a, uh uh, under wooden other side. So let's see. Have a go. He had, uh, wait for a few minutes and you can actually click on undo, and they're making up perform anything else? All right, so that's it for this but this temple. And, uh, I'll see you guys in next video. Thank you. 14. TabView and TabBar: Hello, Mac. And how we are going to be exploring tabs. So we're gonna basically create tabs within our within our app And as, uh, like, you know, you may have seen this is a common pattern and take a touch. We makes your navigation very, very easy to have multiple tap. And that way you can actually segregate your content based upon different in Houston styles . A lot of text, Lee. I use a tabs quite a lot, so it makes sense. Oh, to have one in the floater. So what we don't do, basically we are going to be first creating a tab control. And within that type controller, we're gonna basically how to find how many deaths there going to be and then create tabs, and then we'll create content for each other's tubs. Okay, so, uh, let's get started. I'm gonna create main function here. Just so I'm to the point. Say one app. No tab bar. Come on. The Cold War class basically tab are stands state list. We don't. And then next thing you need to do with you, Okay, down here in return material have okay in this material. Probably gonna have home and this is your home bitch. Now, out for the top controller we can do. Is they even created your own tap controller then? Or he can use default that controller, which it? And if you use default, that control religion basically gives you simple options now, bad since it's already created from top controller and it actually gives you, like, you know, some abilities, basically, how you going to find? Lengthen the child in evidence so you don't have to start from scratch. OK, so that's what we're gonna use me as a new default dab told her that and, uh oh, here. We gonna basically give it to let how many taps you want. So I went to three. Then you're gonna say, child, and this is going to find out of step old. It's a bar is a bar sample. Are is going to have the bottom is gonna have dad bar tab bar that, you know. And this is a place where we're actually going to define. He stabs. So, uh, basically, it's another of the region and will be used his rigid basically, for for a tab for creating taps. Basically dab use. Okay, so this takes a parameter called tabs Isn't all right? Yes. A dab Yeah. Can say icon And you just can't have, like, icons for this. So icon, new icon and icons don't direction like you see that. See? Cool. So new. Yeah, Icahn, Icahn's direction Boat I come I cause dot direction bus I to want and, uh see. All right. You Yeah, missing one. Okay, All right. Home. So what? We have our visit in place, and, uh, we're gonna just idle for new text tab. Well, Obama, basically, we're gonna get body Body is going to be simple, Dad Bar and a bar view is it's that content area that define so basically, tab is associative tap our view and have, like, same number off tab our views as we have tabs s. So we have, like, you know, each you stand but will be having I see you. I call just gonna show icons here. So I caused correction. Let's copy this times. That's both us. Okay. No, make sure you my problem is okay. Cool, I said, and let's rebuild in launch. I see It's building trying to build. No, I call. That goes. So we have three deaths like we defined. And as you can see, we get this default animation and the CYP basically Disher for free, built in with the default tab controller. And, uh, you can either flight, are you? They should. That's thing. Have another one. They say the next item it's but you can control space to see a car. Kind of same thing here. Nice and hot works. Yeah. So you have are forced. Cool. So I guess it's because relaunch Oh, it's how nothing not to you, because okay, So sometimes your heart reload does not actually render all the elements properly. So in those cases, you may wanna kill the app and basically re logic if you notice in the last Tamil the last time we were trying it was only going up until here, but it was actually showing the content for the card as well. So this bar selection that shows which was selected was not moving properly and relaunching the app actually fixed the issue. I called. I hope you guys enjoyed to studio See you guys next week. 15. Animated Drawer Menu: Hello, everyone. Welcome back. And today we are going to be looking at side navigation or drawer what's called in and wriggled. So we're basically going to be creating a draw. Our, uh, that is gonna open menu from the side. All right. And basically, um, there are two types off navigations like that navigation that we explored last in the last video and the next one in our drawers. How? Which is we're gonna take a look today. Um, I So let's get started. Basically, how we are going to be creating a s s create you. Let's take it up one more time. Um, yes. So it gives us a good practice off having it so back age clever. And we need much jail, not start and go. And then we're gonna create white mane, all right? And they're gonna call her half, Um, me, My At this time, it's clear the class, my app extends state less waited, and, uh, next thing we need is a title. So let's create final string AP title is equal to Krauer. And what? Okay, and then we gonna see build. All right, and return. Um, new material. The anto basically in this material that we're gonna say Title. It's going to be apt title and home is going to be a new class, though. New my home page I You're gonna pass table to this after idol, right? Let's create this new class. So class hi, home Page extends. I think that it. And, uh then we're gonna say, final kind I go and as a i home page and it is their constructors. So basically key his map to the game and start title ok dot Super and, uh, not thought should be colon super and key. Yes, we're basically, and then you're gonna stay build and yeah, okay thing that should be okay. So I call those theater. Okay. So what? Do you know what is going to return perfectly? Oh, we are going to be creating a new scaffold, so Ah, that's great news. Careful. And this is that we're gonna create our Grauer, so we're going to save us. We're gonna to find the app are so new. App bar and title is going to be new text, new texts and basically going to use the title that we have a fight. Okay, Next thing we need is Ah, body. I was going to find the body and guess a new center. Um, and, uh, child is a new text next, and the day diets my rage in town. Then you're gonna say drawer is new trawler like so And this is how you gonna create now for recreate Trower? We can have a list of to the power and this insurers that user can scroll through the options. So basically, they're gonna get describable list which taken, select, like, you know, any many items. So basically, you can have, like, you know, as many, many items and as many Let's pardons himself on that list, which helps you create and manage better for your queer navigation. If you notice stabs off the tabs is related like you know how many times you can hold on the page. But this is an alternate way. If you have too many, many options that you got to be, put it in a drawer. Okay, So let's create or child knew this view, all right? And, uh, it's a business trip. Um, we're basically going to say us we're going to remove any padding having a safe riding edge inset. Um, agent steps is dark, dear. So rule any padding that have from the list just to you, and then we're gonna say Children. And if they knew Grauer Header. Okay, creators, child. And this is going to be new text. And, uh, it's this a header here, and, uh, decoration. We're going to give it new box decoration. And that's a color is colors talked. Okay, I want to have that. How Began, actually. Um, but comma here and new. So this is there are head her. It's ahead of saying this is what? Our header, the ending. And, uh, then we can create new list. I haven't list. I Okay, you can see table is in your text. I don't want I need, uh you stay on track, okay? And this is where you can give their functionality for cap. So we are going to say it takes enormous function. Navigator got, uh, context. And now you never pop, actually, is the is the option that you provide, or basically a function that you call to return back or close the drawer. Basically. So this is how you actually close the drawer and and and return to the main page and what we under? We're going to basically copy this, and I will say I have to Okay, in time, that should That should do it. So let's see. My have. Okay, so that's not it. Later. And, uh, the other thing that lost Oh, it's chicken. We're saying, OK, so it's just complaining about the the names. Basically, these are just warning so you can follow along all these, um, hold these past practices that go that just really accord is offering. Um, but there's no enter course ever. So we can actually just leave it like that. No. Okay, so I'm just gonna start executing and you can see it's basically up. This is the deep up love and actually tells you step by step. What is going on? Check out It will. Build is on. Okay. And, uh, there we go. So that's just the drawer that has been at it. And as you can see, three stacked bar icon is already showing automatically. When you click on it, you have a nice header. Well, where you can have what you know and imagine stuff like that is all, like, you know, and in some I think of this as a profile so that have profile image here and name and everything can have and take a look. So few I have select the item you can actually. Your basic low calling to close it back. Okay, so that's your drawer from Sheltie Complete. Now, Hope you found this on No useful. And, uh, we'll see you guys in next video with another. A cool way off developing your component. However, the influx thanks again for watching costing as an extra. 16. Orientation Detection: and today how we are going to be looking at orientation based you. I update. So we're gonna look at a grid of you and how you can create basically a grand view and detect orientation change. And depending upon the orientation change, we can update our you. I so don't do basically, in the portrait mode, I was going to create a list off about 100 elements and then begin a check into your intention is portrait mode that we're gonna show two items in a row. Otherwise, if it's Wednesday and we're going to show three items in right, so let's get started and get on, right? Right on. So we're gonna say import, um, package. But there flash material dart, and then we're gonna say white mane, All right. Oh, by this time you must. You guys must be getting used to this. But it's a good practice to type your type of your code every single time because that's gives you a really good practice. And you learn basically little nuances of the goat. I thought it was great class. My my app extends state less with it. Hi. And then we're gonna say Build it um, gonna give a date AP title. And, uh uh, this one again. We're going to create a separate last to handle the page. Toto have, like, you know, our great logic differently. A layout logic differently. Okay, so it's equal to orientation. Demo. Okay. And you say return. Basically. What do you return? New material app they go. Then we can say title is equal to apt title In home come is a new orientation list is a club that we're gonna create and title ap title bracket. All right, that's it. So let's create this class right here. I have a copy and say, class, this extends state less it Santa. And what we're gonna say is just gonna say, final string and, uh, orientation list must call the constructor. So again, saying thing key, Cain and they start, I will basically, these two parameters and then you called super like E there. All right, you're gonna think Go. I've been here in Alsace, return our new with capital. It's And within this capital, we're gonna have a pepper so far title its new text title. Good. You're gonna have body. Somebody is going to be new orientation builder. It's only gonna use. And this builder takes Basically, if you look at this help which shows builder takes context in orientations that you say older, the next leap passes context and orientation okay, and basically function. So we're gonna return in you Great. You and, uh when um this great of you thought count critically within this, Have you gonna say cross excess count, which is or yeah, orientation is equal to equal. We go to Korean station Dark portrait. If it's portrait, then returned two goals through three columns. All right. And then you say Children and the Children are gonna be new list and, uh, you're gonna say not generate and 100 is a length and generator eyes basically, um, going to be the This is their We are actually going to define our index, and we're gonna create a closure method se return you center and child is going to be new. Move text, and this text is going to be item and dollar. Um, index, So dollar sign is basically for string replacement eso you type anything within the code surgical coats, and if he is best buy dollar now index is basically taking the local label string concatenation. Basically, um, it's what's happening here. And then that's your text. And basically, it takes another parameter, which is style and is serving us a theme off context dot text theme. Not headlined that. So I see what you're saying. It this and the stigmatic issue. Okay, Can. So I see new good dot com Give me that count, and, uh, we take cross excess on that cross excess count, and then it's Children. I mean to say Children is new. List got generate 100 years. I think we have fantasies as much. No need that. So these entries ending so with it. Oh, so this needs to be because this is already a you know, right? Right. It does not need to be inside the race that this was gonna be a list generated when you generate in the right. Okay. Which is my we had at issue. Basically, it needs to be on its own. Not a not know, Roy. All right, so check it out. Building and, uh, building is done. And this now, basically launching. And, uh, here we go. All right? And we change the orientation as you can see, we have 23 items showing up. If I take your intention back, we have to, and I'm sure in the bar. All right, so this sit. And I hope you guys in doing the study also, you guys, the next idea. Thank you. 17. Downloading Images from Internet: Hello and welcome back. And today we are going to be looking at displaying images in flutter. So basically would is beginning down image from network because I want to show how, how easy there's hand lettered to basically downloaded image from the internet and then showing so that sort of them do. And we're also gonna later on replace that link. How would they be there? Jif or GIF Image and see, like you know how. Because Curtis supports it right on the box. Eso It would actually start animating right out of the box if you have used Native if you don't need it. Programming. You must know that. Like, you know it does. There are a few things that you have to do before you can make image or defoe showing within the native but further handles it right out of the box. Okay, so let's get started. So I'm going to basically do import package him. Look here like Gigio don't dark. All right. And, uh, us to would one app and a nap saying my at close mine, James Regent, then oh, return Teoh and basically sure its title Home news scaffold at a bar IHS. Basically, this is gonna use image. Something new. Unh! Yeah. You got to see where we can say doc Network. So when I actually get the image necker and here, we can expect you directly give our, uh, May Jr. So he used this one without not cynical. Alright. Doubts how bored slashes and save it on the base that started moving and down. Keep it up. All right. Almost hair starting the bill process. Now build us, John being just bashed and all right, So here we have the image and a city that I was using innately floaters, basically Google's image that they talk about how it compliant based on stuff like that rectal estate. This other image, that is the, uh, Jeff I'll minute of a place common. Okay, Just Yes. Hi. Yeah, that's hard to reload in time. They are. So, as you can say is, uh, showing rotating Nothing. We didn't have to do like, you know how much basically to get working. So this is it. This is the downloading network images from the Internet and displaying it. Pleasure. I so hope here together in the studio I am del Will See you guys in the next video. Thank you. 18. Fade In Animation on Downloaded Images: Hello and welcome back. And, uh, we are going to be looking at a place order images and ah, image animation when you're loading images from the internet. So in the last video, you saw that How we can basically download image from the network in this play it. But one of the problem that you might have noticed that, um, the image appears just all of a sudden. So basically there is No, um, there's no, um if it's super abrupt. So what do you order? Basically wanna ease in two. Showing the MIT whether it's being basically loaded from the memory are from one of the local assets are were downloading the image from the internet. Okay, so what we gonna do? It's a well used Now. We'll take a couple of a project. Ah, one first. But we gonna do this, we're gonna show a transparent image. Now. Pflueger has a package are called transparent. So let's go ahead and include that first. So I'm gonna go to pub. Ah, specs, Dark yellow pile. And, uh, right here, I'm gonna actually include under dependencies. I'm gonna include another dependency. Our called trance parent Underscoring which. Okay, we end up. Basically, what we're going to do is we want it to be worse in 1.0 dot Do you know, I believe that's what it is. Um, are okay. Says, I think you got one so transparent. Underscored image. Yes, that's it. Okay, cool. So this guy's going to enable us to basically put a placeholder transparent placeholder in place. And then what we're gonna do is the beginning. Use a cynical fade in image widget to basically ease in and providing an emission to our, um, to our image when we're showing that image. Okay, so So let's get started. I'm gonna actually start with import. And we can say, uh, package and, uh, flutter left material got dart, and then we're gonna do another import cage. In this time is gonna be France errant. No score. Image clash. Friends very could escort, right, So it should resolved. Um, this is, uh Let's see, d r a and you're a m s b a r e nt. Yeah. It's spelled correct. Then that's right away. Start, start in the 70 young. This same. Oh, yeah. So we needed to say that so flutter can basically run and, uh, get that package also dealt with the issue. And as you can see, it's a result not right. So let's credit create our main function and we're gonna have a run app. And with this we are going to create new my Yep. Who did create a glass? My app extends state less with it Hand out. Basically, this is going to overwrite the build, and this build is going to have turn. Let's create a create local valuable hold car title. So because it is okay, not just your material todo I said returning material app. And in this first be do it's a black eye gold supply. That and next we're gonna provide home and in the home we're going to say new a scaffold. But in this careful gonna say that bar basically to create a top are far. And, uh, this bar is going to have a title text. And this is going to be data war you created. How likely are we gonna create a body? Okay. And in this we are going to be using a new we just call stack. How basically is gonna stack a show. Our image in the stack Basically. So, like one talk together. So and if you see like, you know, the documentation said by default, non position Children's are off the stack, are lined by their top left corner so they're actually going to stand at the top off the top. So we're gonna provide Children and their Children have a very jittery and even that provide a couple of them. So you center and what we're gonna show So this is eso say, like, you know, you want to show a circular like progress about right, you can actually create a circular progress indicator and its and its ability big, rigid so we can actually use it right out of box against a circular problems and eager. And we're so they said we show a Did he say a waiting our problem star, if something is happening and then we're gonna say you center, basically, you don't say, Um um new center a child. And this is gonna be new feigned in image and its undefeated image dot memory network. So you could basically downward from the network are place holder. The text is going to be a placeholder is going to be OK Krantz parent image. The Pakistan we have actually, Donald. All right, and, uh, singing. Oh, I don't know where. Okay, Ask it. Um, que transfer and image. And the image itself is Yeah. Yeah. Like that. Um, So what's gonna happen? Basically, we're gonna show the progress far. In essence, these are images looted. We gonna stick our image on the top of that. So it's gonna hide the problem far, although it's gonna be there, but it's not going to be so that's how stat work. So things stand on the top of each other. True. So a c and it's gonna me compiling right now. So it is actually combines and down. Let's wait for it to build. Alright, build. It's on, and it's gonna launch, uh, up now. Okay, There you go. And as you saw, basically, we had a nice animation and then basically that animation loaded with and stick it at the top. So are our existing progress bar. Went behind, appeared like, you know, they took each of this place and their conflict disappeared on the somewhere in the back. So that's a warning, which is a much nicer experience, then. Basically so if I do hardly load. I really have a So So we're not changing. What? Um, basically to see that effect one more time to we combine. Just show you one more time before we leave. All right? It's running from the build and, uh, damn quizzical. Yeah, almost. Um, it's pill a lot of makes now. So you know this right here in the center, we're gonna have a progress bar, and they go and disappears and image faded it. I cook. So hope you guys into a studio, and I will see you guys. Actually, thank you. 19. Caching Images: look back in, uh, dates with you. We are going to be looking at cashing off the image. So, um, since we're dealing with a lot with images, basically, um What what can we do? Um, if they have, like, you know, a lot of requests. Happily images. Well, there is a nice utility or or reject a Z. Call it in the world, um, called cash network images, which caches images to be used for offline support or offline display. Okay, so that's what we're gonna be we're gonna be actually doing. And we're gonna be looking at that now, this since another package. So let's head back to our bub specs, start GMO and create a new length. And basically, you can add cached cashed up network. Okay. And guys, networking made, I believe, is at work. Version one point. Do you go? Oh, not not Not yet. Still, you know, for Okay, so we can say cached, underscore network score image, and just say so Florida can get that package, so it's actually going to get that now. Yeah, And there you go. You successfully got it. Now, back to our, um main, uh, dark, dark and you're gonna import that you're gonna say package. And if you say cashed network image, gas network and may start. Start. There you go. All right. So what's there? Done that. What we are going to pass out. We're going to basically use our main function, something a copy it from Here you go. And, uh, are my at this long and I'm gonna face right here and, you know, and grow everything. No. Okay, cool. So we don't do is, uh let's change this. Uh, hi. So we're gonna do is a big inaccurate, and we're gonna use this within our body. We're gonna use cashed network image, and it already provides a placeholder like a team you for foreplay sold. That is where we gonna place our progress bar. And then it actually handles the fade in effect for us. A. So so we're gonna We're gonna look at that. You know how how it does that. So let's bust argue with a title. So title this diver and then you can stay home Clean scaffold and app bar being at a bar, and basically, this is gonna have a title. And, uh, you text title, right? That body is going to be new center show everything in center and our child is going to be new cash network image and have placeholder newser killer fornicator. That's what we need and image you are you be using all along. So let's use this one. All right? That's about it. And let's take a look and see how this works out for us, all right? It's, uh it's by saying launching so sweet for a minute, we may. It's starting. Okay, It's starting to build, right? It's I think it's building Rico. Really? It's done. Yeah, it's going. Now. You go and like that the hammer. Uh, Mitch noted. Okay, So, uh oh, yeah. This is, uh, cashing. So I feeling to cash images, you can use decision. And, uh, this is it for this with you in the next video. Are we gonna look at another cool? We did basically and use it to create something awesome. Thanks for watching. I'll see you guys in next video. 20. Basic ListView: love. I welcome back and today how we are going to be looking at basic list. So basically gonna be creating? Yeah. Listen, you Ah, very basic one. And basically we are going to see how we can display a number of items in a table. You manner eso An android is called list view in IOS is called an android is called history . And I found him called a table view and that's what we're going to be creating in Florida. So inflater it's called Listeria Prince. Basically used to display multiple roles in a single column. And you can have ah, list style, which is actually a child and can have, like, a number of elements basically inside that which is a row. And you can have, like, icons, entitle it stuff like that. Okay, so you've already created one in one of the previous acts that we created, But this is where are we going to start looking? You just a little bit more deep. And I'm going to explore from basic do all the other different flavors. All right, All right. So let's get on it and get started. So, basically what we're gonna do, I already got my import statement already in my main ready. And I'm just gonna say class my extends state list when it here, we're going to We're gonna stay. All right, The bill. Okay, skivvy title first. So string title basic list. I returned. I'm gonna return a do material up, all right, but still calling here now, material have takes a title. So we're gonna go to Michael, and then we're going to find its home page on the home page. It's gonna be new scaffolding pace, you calf, they go, and scaffold takes time and help our which easier in half bar at the top. So you bar title, there's a psychic property and there can have a new text there. And because of my title that created down, then you're gonna have a body. It is the party of the page, and that's every we're gonna create A and Listsview takes parameters as parameters Children . So it's all right, so you can define multiple. Hey, here's where you can actually create a new list time. And within this list style, you can have to say leading This is sure. I can't say new icon icons dot Maybe okay. Entitled, It's a new text I'm gonna say yes. Okay. What I'm gonna do is I'm gonna copy this and down paste it right underneath to create another entry and his photo album photo. Oh, and then the 3rd 1 is a phone. Now, let me go ahead and, uh, kill this lost, because I know if you sometimes acute start stimulator. I mean, if you leaves and litter running, uh, and it don't execute anything from sort of related than other connection gets broke. So the simplest way have basically relaunching. And, uh, then you debug start debugging or hit at five. And basically wait for build to kick in. There was going to do, basically, is it will send the built O. R. This this whole building to the iPhone is ready to go to next. Good. And, uh, it's gonna come by now. This one is specifically doing it for iPhone because that's the device we have running. I say we had and ready by sending them for actually go to a TBM and connected that they got We have a list, and it is actually it's credible and everything. Um, yeah. So is that easy to create a basic list are basically enlist in flutter. So in the next video, we're gonna be exploring a little bit more about where it's different. Kind off mistreats. So I hope you dance studio, and I'll see you guys in next video. Thank you. 21. Horizontal ListView: Hello and welcome back. And today we are going to be explaining are exploring basically mother type of I missed you . So basically, we're gonna explore how that the school direction works by creating a horizontal horizontally scalable the list. Okay, So what we're gonna do, basically, because they create a horizontally horizontal, let's and we're gonna put, like, you know, hope which off colored containers in there hand down Langham up. And you could basically scold him left Reicher, or All right. Okay, so So let's get started. I'm gonna copied my import in the main function. Start creating my class stands State we get here is all right. Build. Okay. Title right turn, but And basically. And, uh, home page. It's going scaffold at a bar. Have a bar title. Its title. Yeah. Build body. Okay. In the body. Now you have one. I mean, cantina, say container in this container you create so instance of the creative margin. Now we have a a separate video to show you works, but just to give you no preview, basically, you can have, like, you know, love. So let's say you have this box you can have like so margin around. All these assert it would look like does that Insects are basically that is contained within that living a little bit space between the parents in the child. So despite here, if the margin and this our village in the same district, this whole black box waas a, uh, parent for this important, this left right top, right, bottom left. It is the auction. Yes. So that's a really wonderful the way we create margin, you ej inset and we say symmetry. Eso is gonna be symmetry to all sites. Me and they say word ago. Direction 20 points. Yeah, and then we say, height, we'll give to discontinue the height of 2200. You failed, child. It's going to be a list for you. Yeah. Now, in the last few last time, you only checked Children, but there is another property that you identifying these whole director. It's called strong connection and basically exit horizontal is what you do basically, to create a horizontal this by default. It's portable, so you don't have to define it. But if you have, like, cause on the list than giving taste called our sinful and creating, it's tight. Now it's create Children. So just again rape. And then you created container, and this container is going to have its hope. 16 top CEO and reason this 160 this double car something. And I don't like about school that this idea, uh, let's see any type of south and explain their colors. Right. So reason this 116 because we are taking 20 away through any Tony on the vertical directions, it's gonna be 40. And that's what if you if you add 160 40 that comes to 200 in height. So yeah, so that has to hunt, but to make it square, This is what this is. Okay, um, remember getting confused? Actually, no, actually, the ax crisis. So hide is your height, actual height, Like how much you have. And there's a little bit batting that we're giving. But stop are in the bottom part of child. If you're having and the container is waiting 200 cardinal, why head 60? Should I? Okay, Um okay. So let's create some more container. So I'm gonna actually copy paste. I hope one of them I just changed a hold over. So queen here. Yeah, and it's still going more just for fun. This one is going. Yeah, right. So going to stop the star. There's gold there When bills complete, Hopefully you will get our list close on election. We will be able to get it working. Okay, So you have another. The air is Stichel. Oh, text! Merkel title is Yeah, title this title and it is a new text. Thank settle. Shit should be a comma here. I see a mistake That bar can have you Okay, it. So hopefully that was a typo. So we just created a string and were considering a desert puget and passing it as regent. That's a fr title. Thanks a rigid emergency text. So I should have Actually, it's a new text. Hi! They destroyed. That's why we're swinging there. Yeah. I mean, you can have linking a whole bunch of things. We saw this application contribution section that have, like any kind of widget showing up in that. And there is there is a statement of the whole section duck navigation about how basically going once going back and stuff like that. So that deals, That's a lot of buttons system with second floor. I see however you have are for the listing is going to go. But planning care looks good. Okay, So, um yeah, hopefully you enjoyed this video and just creating a new words in Opa mystery. And I will see you guys in the next video with a new region or a new way. Basically to, uh, do something good with maybe a long. This is something that just to show you I counted. Long live Statham's. Okay. Thank you for watching. I'll see you can experience. 22. Handling Long ListView Items: Well, welcome back and intimidated you how we are going to be looking at two things. One, that's something you already seen. It is basically no using our main method and the constructor of the class to past some extra information. And we're going to see how we can basically pass about the list and peace Clear item list, item string, and then use that within our list of U S. So that's a big and explore. And we are also going to be creating about 10,000 items like that by doing a loop and creating a big list and see, like how easy it is basically for first letter to handle that large amount of data. OK, so let's get started. I'm gonna I'm gonna come with my old code and just based nine called here. Basically copy all these stuff here, um commented Okay, so first thing you need to do it. So we need to update our APS constructor. So we're going to create a constructor. My hand. This is going to and we're gonna expect am now perimeter in here in the sprinter is going to be a list of items, so let's create that seven is a final list off banks string. Okay. And we're going to supply about 10,000 items. So, uh, let's get back. Uh, SE, this is required. And this is how you can say this is grand science. Basically, they can't create an optional blank or empty constructor. They could use that. They'll have to use this constructor right here and supply no items. Okay? It it's a super key that build. No. Also, you can actually get hers. Okay, So, sanitation, Yes, I will be a constant variable preppers Such a location. Um, well, it is actually Why? Okay, See that authentically? Yeah. So that's hard. So my oldest strength. All right, I'm gonna have to actually race that. Get back to you guys on that. So now, see if this was okay. That's so trainer. Okay. Penetration must either be a constant variable. Preference are constant. Good structure, in the case of Let's fill this out is so you gonna create strength. We're going to use generate function. About 10,000. These and the generator is going to be a It's getting, uh, it's gonna be in an anonymous function. It's going to return item and dollar sign basically tells us how to use the local variable , and I direct. So it's still throwing that error. So we're gonna I'm gonna actually get back to you guys on this little video. Maybe, but now we can just continue. I'm not sure my wife going there, but anyway, so Okay, um, if you guys, if he has no waking out the solution for it, I would really appreciate you accidentally posting solution for Okay. So, yeah, let's get more. Yeah, build matter. And you're going to say, basically, just a screening title. Uh, this What do you do it? Return a material title. It's going to be cycle the title that were created, and then you can have home in your scaffold at Bar New Akbar Title is going to be a text title. Small. That body is body is going to be a list of you. Now. This very gonna create a list for you? Can I use its builder from so builder? And this takes a couple of just so a few people are just basically list count so it can integrate over like, you know, the list set against a items dot item start calmed Oh, Dr, I come stop Lind and item builder, I swear built and this is a this function. And there we go. Double cuts How we gonna supply context and, uh, Index, Basically, this is where we are going to return our list style And, uh, this builder for each For each item, it's gonna trade over liking of a region that's gonna laboratory and create a list. So we'll be creating, like, $10,000 with this one, just like in a few lines of gold. All right, so we're gonna return idol when you text. And in this next, how we are going to take you can use dollar, um, items. Okay. Yeah, basically supplied the index. So this is going to give us the item like item next. Basically For what? That X. So that's that's about it. And, uh, lists to stop and, uh, start time and if should actually, uh, really quickly. Yes. And it's an excuse. CEO take basically hot to generate, unless they should do it very, very quickly. You know the list. Our views are highly optimized internally in floater and basically wouldn't create a whole bunch of items. And when you show them on the screen when there, after going there are lucky handled at the mutability aspects alter after this times. So as you can see, we have, like, really long list, and there we go. And if you notice, keep scrolling and, uh, it's got there's no starter or anything that's happening, and I can go back and forth, and this is very, very responsive. Okay, so this is another example off creating list. Basically, you can have, like, you know, really long. This not worry too much about how is a country being used? There's a lot of things that are that we can actually configure, but a lot of things that's letter handles for you internally. Okay, So this is this is it for for this video I am. I hope you guys enjoyed this video. See you guys in extra thinking 23. Creating mixed item listview: alone or back in the Internet video. How we are going to be looking at mixed list. So before I talk about makes list, I actually found the reason why last time it was not taking required. And it's the case. We forgot to import this package foundation Dr. So it's a foundation package. And that's where the attribution required is declared for the items for four constructors off the glass. So that is why it was throwing an error. I have you noticed, like, you know, the area was rather wig. Um, and it did not give us much clue. So I had to actually look around, and I found that it's basically just including this import package and then writing back that required anything that made the the parameter as all right. So that was that was the creation. All right back, dude, they stopped become So we are going to be creating a list of items with different types of items, so it's gonna be a mixed list. Now there are times when we need to create such a list where we just played different items are the content like, you know, for example, you might have a list that has heading. And then it has, like, you know, a few items than another heading, followed by, like, a few more items and stuff and that you can basically handle very easily with clutter. The way you do it, basically, you create a data source in, uh, for that, I mean, we gonna be how we can create, like, a abstract class in the week. We'll create do different classes implementing that psych class and provide a different functionalities in different, different overwrites, uh, for the variable and injunctions and then populate them using a builder list for you dot built. So have you gonna be doing all that? So A for that's confusing her deliberately. We're gonna start doing it like, basically start creating that right now. So And we come into some old gold and let's get moving. Do like, you know, just kind of coffee based for now. What we do is we are going to be leaving. Oh, maybe yeah, leaving this being this alone and we'll create a constructor. So copy this thing here. Oh, dear. That way we don't have to type this again. All right, Now, um what? What we do is basically were taking strength right here if you notice. But string is not gonna work out for us in this case s. So what we're gonna do is that we will create first, we'll create a couple off classes. So, like, sent if you won't have, like, you know, mixed items you can create, uh, like, you know, missy, and obstruct less. So abstract class. We call it a list item. All right? And then within this, basically, I mean, with this asset class, we can create a couple of classes like se heading item implements. Missed. I am. And this is where we're gonna basically just sort of base class. And this is our time cloth. And this is the one that's going to contain heading information and really do is when we're gonna populate. Unless we're gonna populate with the list we're gonna created with the left side of its own . The base class. All right, so let's create heading item. Final spring heading. We'll create a function. Say this. Start having okay. Hey, this is this is a constructor. Yeah, I know. It's approaching class. No, that's creating gone. Her message item. This is, uh, implements, Mr Item. So this is another item that we're gonna hold, and this is going to have to thinks a string of it. Center string, body. Okay. And this is gonna have another constructor for cuts up for my stadium, and the constructor will take this stop sender. Me and Dad start body. Okay, So, um so this is our This is our list item now for our app. Basically, instead of accepting it string, we're gonna accept list, okay? And we are going to generate about 1000 of them, and with this function is gonna be a little bit extended up of it. So this create and your line and, uh, reason is throwing an error because of constructor does not data, so update that list item. Okay, defy the functionality in the four. Surely it's I more six. If the call to do you go, six I am is, you know, I must say heading I am. It's just liking of generating random data, and he can use, like, you know, anything besides, but ice Age Sander, this is this just generating not one, but I This is just generating some random data, like in your case, you gonna probably get that data from somewhere and in popular this. But this is just like, you know, for our example, sink of your gestion reading, like, you know, that every six item is gonna be sixth item is going to be the heading and, uh, like, you know, non six. So basically 0 to 5, it's going to be you're you are making me want to five. It's going to be your message body. Okay, so, um, it's missing build. Yes, we know that. That's just the next thing that we can actually create. So let's create our build function, all right? That you're gonna return a new Matteo app. Okay, Wait for it to catch up. All right, here, we're gonna say, title title that begin created yet, So let's create, You know, I never got and, uh, title. And the next thing is home based, So home on scaffold. Yeah. Within this capital, we have, uh, in that bar new app bar. Next. This text is stable, all right. And, uh, and we have Clowney. No, actually has political title, but he and new list item are list of you, not builder is the one that we want to use. And within this builder, we're going to say I don't come so very similar to what we did last time. I don't countenance items document. Okay? And, uh, then we're gonna provide a builder a function. And this is where we're basically gonna create our list. So we'll convert each item into rigid based on its type off items in it. Okay, so, item builder. Yeah, basically, it's gonna be a man dysfunction with context in next. Okay? And we're gonna first extract the item. Them people. Two items, index. Right. Must we have once we have extracted the item, are we going to say if the item is and this is how you check basically what type? What type off object it is. So item is heading item. Say, if it's heading item, then do this else as it is different than Els and miss. But if her condition ahead. So if the item is your message item, I think you have a different logic. Hurt logic. It's gonna go here. Okay. So Well, so yeah. What? What is in here here is gonna be simple. A simple list style, so don't list style. Okay? and, uh, so I see for our friends. See that balanced? Yeah, it looks It looks like some reason it's not. Give me the help, but sweet, continue new text. And this is Mystics. Item don't heading. That's the heading that we have. Because you know what type it is? I am heading. And then right. Uh, come on, share it. Let's do this. Okay. So no, wait a minute for it to catch up because it looks like it's, uh, you know, building the let's make sure our on the four parents Caesar, Baathist, that this is a scaffold names. Is there a lap I didn't builder. Right? So in a builder, you're operating that I So this get item, uh, items index. That and then we are going to say, if the item Yes. Heading. Yes. I'm not getting thing. I wanna keep type. Okay, so if I don't is this we'll return and you list style in this list time we've been defined title and the devil is going to be new text, and it takes to brown interests. Item talked heading basically because we know it's a heading item. Then we could give it a style and my style is theme that off context doubt. Text theme. Don't heading. Okay, so this is already defined for you in the context. And you just need to get, like, heading type right here, down. Okay. Um right. So they started to turn typing in town, then our if held against their will, We say if, uh, um if the item is our message Okay, then we say return return new lift style. And with this, it's style we are going to supply title, and that is going to be new text. Simply item dot That this? All right. So I didn't don't sender. That's what we have here. And we're going to create a subtitle. And that's where we gonna say new text and item dot Uh, but it Okay, Now let's check out what the area is expected and didn't fire. Oh, you have define right here nowadays. Expect Oh, so I see they have. Okay, so this is there were building. They start builder best. You don't look all right. And, uh, builder takes do, uh, do pragmatists. We have I don't count, and then we have item builder, which is contacts and index. Okay. And um, no, you're your context. An index me basically going and extract our current item. Subasic, you say items not index can be Strike that and you say if the item is heading item Then we returned a list tile a newly style with title as when you text me, we define it, Get down Then we just close that and to our else if block and that we actually create new I think it looks get So I started looking and see if it actually throws because it might be, Yeah, it might be the the i d e a problem, but let's check it out in a CF. Actually, if it actually resolves that Carter an actual issue, I think they used you're wondering why is completely that it's not this week. It's okay. Staking awfully long time. So let me do this. Let me pause the video here. And, uh, couple actually try to, um, quit the Eddie and restart and basically tried again and actually continue from there, I Thanks 24. Creating mixed item listview 2: Hello and welcome back. Uh, basically, uh, I did have to restart, uh, the i d. And once I restarted, I actually found that it was stuck. And that's why it was something in there. But I have to restart. It started to what? Properly and them. It showed an issue, basically, but the i d did not crash because of this issue there. So it's just a typo. Basically, we should have used headline here, but, um, now, since like, you know, the i d has caught up, um, it was stuck somewhere, like, you know, in the loop or something, but not would not respond. And that was the issue. So now it's on its back up, and I just executed all the coldest. Same. Except this headline I have to correct. So what if we change it to headline how the start of you started to build process and, uh, build is done? Uh, yeah. Let's take a look. All right, let me go. So, as you can see, we have our this item with some headings in some messages and stuff. So this is how you can basically create a list with mixed type off items once again you create a strike us and that a SEC class is implemented by, ah, hole a bunch of other classes that you basically the items and then you create year your list view in the builder. Are you actually creating a list with that base at Cyclops are based class. And then And then you check doing the bill builder face that if the class is such and such , then do this are if classes some different than that. And that way you can basically make it, like, you know, mixed, huh? Mixed types off, like, you know, messages are or views and stuff. You can create a list that I hope you from the start of, you know, useful. And I will see you guys in next video with another. Probably the last one that we're gonna do is a great You were going to see how we can create a list with gravy. Kind of play out. Okay, Thanks. An unfortunate I'll see you next year. 25. GridView: Hello, Mac. And in this video, we are going to be creating good list. So in company is, you might want to display items in a grid manner rather than a list manner or basically having a bit of a grade. Um uh, It's took off like, you know, having a list items showing top to bottom. And for this we can use a great view, which and this could really It is basically something that can have, like, role in ruin and Collins and stuff. And there's the simplest way basically, to create good is started using great you don't count constructor on. It allows us to specify how many rows or columns you want, and for this example, we're gonna create list of 100 off, which it's that will display their indexes in the list. And, uh, now this little basically help us visualize how review actually works. Okay, so Lisk it started. And, uh, I'm gonna comment this old goat right here, right, and we're gonna take couple of things for me. He's doing good, although you're not gonna need a foundation. So we should actually remove that. And like so import Daskal Worldwide. I mean, potion going to say Run my help. All right, in class, my pap extents state less Bridget in this stateless would you were gonna say, You know, Frank to build and the screen our final title Great. You example. And in return your material The title of this is cycle home It's new you scaffold sampler you are and title his new text title. All right, we're gonna have a body. This body is going to be new credit view and we're gonna use dot Can't count Constructor. This is there. We're gonna define how Maney basically who knew rows and columns and order gonna do as they're gonna create a grid with two calls. And, uh, how can we can even change school directions to ours on this would actually operatives to do two holes, and then we can generate about 100 off items, so we will say cross access count. It's too, Children. Yeah, Children. So we don't need a digit away. We can create a list not generally just gonna use to start to make malfunction in Ghana. Say, for the generator front normalised function real saying index and this index is going to have new center and Basically, the center is going to help a child text. I know dollar and next. So it's gonna print the index, and style is going to be seem off context. Um, that text theme dot headline There you go if you don't need that comma. And, uh and that's what it So let's stop hand started. All right, So it's, uh it's creating the build, starting the bill right now, and, uh, human that just basically gonna launch the app and your heart build. It's on. And here we go. It says, you can see we have, like, about 100 items. And, uh, about those items are actually stayed inside a great too. And we can do is we can even create three, maybe four right here. Do a heart freeload bender. So as you can see, we have, like, four items in a row. I mean, some of them are, like, you know, staggered a little bit time. Reason this begins. Experience doesn't have that much real state hard to show. So let's create three. But yeah, it's like this is how easy it is to basically change the number off like items that you on the show in a row. And, uh, there you go and have, like, those listed I though this was, Ah, great list. And from the next video, we're going to start exploring the son of the gestures. Like that stuff. Okay, so I hope he hasn't. You're just India will see you next year. 26. Gesture Detector & Tap Gesture: everyone welcome back. And today we are going to be looking at, um, tap gesture. So we're going to start basically for next year videos. We are going to be focusing on gestures, and we're gonna basically look at tap gesture. Um, then a couple of others, like, slide to dismiss and stuff like that. Okay, so for for today, basically what we're gonna do is we're gonna handle basically, the basic idea is like, you know, you don't want to show just the app. You basically wanna let your user interact with components. And basically, when they drag or, like, you know, tap on something you want actually perform some actions on it. Well, jet gesture detector is used just for that. And just detector is something that is built in within the material within the material duct art. That's the base package. Eso That's what you're going to be doing today. So we'll actually draw out a button on the center of the screen and then when user tap on it, we're going to show a snack bar. So, so far, most of the six you have seen except the gesture recognize her in the once we wrap up. These, like widget coverage, are videos. We are also going to start looking into, like, actual, Like combining these together to create some like, you know, useful you wise and stuff, like some complex you guys and stuff like that. So this is actually gonna work for our foundation for those later projects? All right, so let's get started. I'm gonna actually, uh, put import for our package and control space to basically show the, uh, on the auto complete. And what we need is material dark, dark right here, and we're gonna create our main measured. So, um, run can tell this one. Happy is going to initialize are my app like like holding other video? We're gonna create this my ap class, and, uh, this is going to extend state less. Quit it. Okay. And the stateless thing, this class is going to override the build method, just like we do it all the time. So we're gonna create table the final, So string title. It's equal to gesture demo like the hand of. Then we're gonna create a return statement, which is going to be new material app. Okay. And, uh, this much left is going to have title for just going to title and then for the home bait, it's gonna have a another class, basically my home page and this class steaks title as it's ah, constructive parameter. Um, can I Let's create that my home page and this extends stateless with it. Damn! And we're gonna say I know train. I will in the caller constructor. So my home page and as a key is and this dot title Okay, so basically, this is going to set a title for the constructor, and we're gonna call super classes Constructor pastie key there. Um okay. And now we're gonna override the build method. And in this building, we're gonna create our scaffold. So new scaffold And, uh, this effort I'm gonna have apple are new app bar, like so entitle a new text I'll and go. And basically he's gonna have body is all This body is going to be new center and, uh, in this center, we want to basically show a button. Now it's sort of creating button here. We're gonna actually wrap it inside another class, so let's create that. So we're gonna say child, um, in the child is going to be new. My button, okay. And just my button does not exist. So let's create That's the class. My button as sort of an extend stateless. Okay. And, uh, basically in here, we're gonna say our build method and basically override duck and weave in return. And this is where we're gonna actually create our gesture detector, and we're gonna wrap our button basically on the gesture detector. Okay, so and it's not basically gonna be a extra burden, but it's gonna be like, you know, look like something like about in one of the later video we're going to see, like, how can create raised but stuff like that. But this is more about, like, stateless widgets. And how can we actually leverage gesture, detector just like you must have If you work on IOS, You I image does not have a stake, and you have to put a gesture, recognize er on the double. So just imagine. It's exactly like that. If you have not worked with them, I less then basically, it's just a gesture on your on your view. That's that's what you can think of it as in general. OK, so let's say for the gesture detector. Are you gonna say on tap? OK, and this is going to accept a stepped in anonymous function. And there isn't a function. It's why no snack bar. This is what we're gonna do. Basically should create a snack bar and show when the gesture is stopped. So we're gonna say, new snack bar and content, but the spec bar our new text, and that's it. Okay. What? The error. Okay, I So scaffold that off contest, um, and talked show snack bar. And because show are snack there, this is what happens on tap. And, uh, now, let's create our custom button. So for the gesture, are we going to say a two child is new container? Okay. And within this container, you're gonna have some patty, and this batting is going to be new. Edge is all. And from all points of view on half cold points, you know, basically 12 points from all all these old four sites. So top left a top, right bottom left is basically what we're gonna have. Then we're gonna say decoration and you're gonna use new box decoration and to see what the decoration says. So basically is a box separation. It creates a parks with Elise functionalities. If colors No, it takes the background color and stuff like that. So basically, you can check. It's just a shape, and you can check the documentation just hovering over looking in more detail. Now, if you want more detail, you can disc amand click on that and it takes you inside the actual class. And you can read all the implementation basically over there. Okay, so let's close this up and go back home. So we are going to be using box separation. Color is going to be a theme, not off context. And it is going to be dot button color, okay. And the border radius is going to be new. Border radius circular out with eight points. So it creates a sort of like a semi circle. Kind of like in a rounded corner box. That's what sport of radius circular means. Um, And then, um, you're gonna say, uh, basically child new Oh, text box, new text. Uh, it's called Mike, but so basically, you create a continue ery at the padding and decoration on it and the channeled eyes going to be the text. So it's gonna basically show up as as this. It's this text, basically the text. My weapon is going to show their list. I think I forgot to march Simulator salami launched simulator quick. And, uh, we are going to be executed, miss to check it out. So start. We don't need that. And it's starting. I don't have any issues. Okay. Launching. All right. I was starting to build. Now, um, I know, like, you know, I mean, Google says like that a lot of stuff works on country load, but I've found, like, in many cases when you're actually meeting a lot of changes like when you have made, like, new classes and stuff like that. Hard really does not really work. Every single that. So for that reason, we have to launch the app every single. Right. So there we go. We have are our button it showing up at the center of the screen. And if I tap on it and there we go, we see a sniper and disappears just like that. All right, So this is it for for this video. And in the next video how we are going to be looking Another example off. Oh, gesture handling. Just recommend. Okay, I hope you guys in the studio and I'll see you guys in the next video. 27. Ripple effect on tap with InkWell: Hello and welcome back. And today we are going to be looking at of the Dutch ripple. So in return design, you guys must have noticed that most of time when you touch a button or something, that actually is actionable. How did the ripple that goes across the EU? I for that component and disappears basically. So that's a material to sign. No pattern and basically in front of it, we can achieve that. Using in cual something called ink. Well, so that is what we are going to be exploring today. So now we're gonna do basically we are going to be creating a flag button, just like the way last time I basically had the container and, uh, once if user that's on it, we gonna create basically a ripple effect on it in close. OK, so I think scarce started. And, uh, I got how the basic code copy copy. Could that, um, commented cool. So pasta with, uh, over and build, we need that. My strength, Stifel, I think Well, them, uh, turn. I will never return. Basically a a home page is gonna be a you class new material. This material is going to have title. It's going home, which is going you my home rage. Yeah, right. So let's go ahead and create this class. My home page extends state bliss. Quit it. And okay. And how? It's a build the first created string title Civic, and actually create a constructor. So on base, it's tough. You can start supply super plus, you know. All right, our build. Okay, here's where we gonna create our ripple. Uh, sorry. Uh huh. Yeah. Scaffold. So return scaffold, our brother. New scaffold. Okay. And, uh, you can have that bar. So you have far table titled is basically so high to us. Is that so? Text? No, thank you. Okay. And, uh, now you can have body. And this funny it's going to be a sinker. I think it's child as my what? All right, So, class, that class glass, my butter extends state less. We checked, Okay? I mean, yeah, made the build. All right, build and return. This is very gonna create our new think inkwell. There you go. And within this inkwell, we are going to have to elements. So do up, around. Just go has on tap. That's what we have every year state on tap. And, uh, I mean, there are some of the properties that you you basically have Children. Child is so so stay on tap. It's a It's a function of assumption that polite the scenario function. ISS scaffold dot off context and what we gotta do. Basically, just gonna show Hey, snack bar, Okay. And discreet. A quick snack bar. Bar content. Just show dabbed. All right, Sandy, snack bar here and why? Okay, that, uh 04 c held a new container and a new container Basically batting And the batting is new edge. It's at all the points alarmed, and the child is going to be next. Let I liked it. Yeah. All right, let's see. What? What? We are victim to find a Okay. All right. So yep. So does it, um, recreated our container with the child and we added a, uh it's that text. But now this is another, like, you know, just a container. It's not an actual button, but it's gonna have the event because we're providing with the midi inkwell and quill automatically actually provides gesture recognition. So we have on tap happened stuff like that. Events available to us. Okay, so let's start debugging and basically chain out if it's if it's gonna work. Okay. Practice. Launching the exclude build need, uh Okay, go. Build is gonna be done in about, and they go build is complete, and, uh all right, um, a moment ago. So as you can see, this is a flapping on. If you tap on it way go. They're a little right. Doesn't matter of a few times, actually, the place you tap the text of their poll stars. All right, Michael. So and we have our partial. So who, um well, I guess we talked to me down. So this is catching up. Um Well, um, I hope you enjoyed this video. I will actually receive, as in the next video with another demo for a cool floater. Reject. Thanks again for watching else again next year. 28. Swipe To Dismiss Gesture: Hello and welcome back and go. Today we are going to be looking at, um, swipe to dismiss. So this functionality is very similar to if you have a table view give you in Iowa s and if you swipe, um, right, right to left basically on the cell and he's actually dismisses that's basically released their cell. Um, many of the apse, like like Gmail actually provides this functionality for you to do. Like, you know, it's like dismiss to other, achieve archive or like to lead an item or stuff like that. So So, yeah, that's that's what we're gonna be we're gonna be creating today. And, uh, sex sciences is very simple. Our game, basically what we're gonna do, it's ever gonna create a list you and we're gonna create a whole bunch of items in it, and we're gonna wrap each item with something called dismissible. Now, dismissible is the rigid that actually handled stacks right to dismiss down and out. That is what we're going to be using. And we're also gonna be providing a visual indicator with leave behind concept to leave behind the gator. Better user is going to see, like, you know, the the line being dismissed, and then I'll be collapsed. So all that within this video, So let's get started. So I was thinking, How can do pits out? We're gonna, um, copy discord for import package. And, uh, may also gonna need a foundation for this one. Did again. Say import. Yeah, package. And, uh, we need flutter Foundation. Yeah, on here. All right. Um, now our app actually is going to have a constructor. Jane, this constructor is going to take guidance. These items are the items that list. So, yes, it's gonna be a list off type string. This is how you can define type, and then you can generate, like, however many, So we're gonna use 20 and I'm gonna give it a closer or a non anonymous election. Um, basically the fat equal sign. Uh, we don't provide what this is B It's gonna item dollar. I love reason. Um, including curly braces here. Because if you want to perform any calculation within the parameter arised strength Oh, how saying you. Then you're gonna have to provide the curly breast, and you can perform any operation or calling within that. So and this whole block like you know where the print is. He starts there in different seasons. Uh, our quarterly brace, Basically Stargate basically eyes considered as the active gold. The code that can be It's cute. So this created constructor list. First he list to Holger values that milking past using the constructor items and you say my app And, uh, it's constructor have keep bust, and then they start. Okay, It's called super and basically white. The king now back to the business with the built. All right, so just discrete e title. So I know a string Tyto, and this title is going to be What could never like, uh, gonna show him our on our, uh, list on our page Basically have bar. Okay, return title A stock is because it makes something, makes the Ezra go back and forth, and then it gets confused and make a slow. So if you ever feel that your senses not showing up properly on his taking time, you might want actually kill the I d and the simulator and launch it back of that actually seems to have stalled a lot of fish and I have no less distinct, Probably hopefully this is just for paid out off the floater. But, um, if you're running an app in the background and you're changing the cold like we then, uh, than the ill ee or the compiler tends to actually catch up and then it's This pipeline gets , like, heavily blogged with a lot of few minutes, and that's where your I d becomes floor. Do it. OK, so just a little help up the tip. Now that has found I said it was created home. New scaffold. And look for it in that bar here. New app bar. This APP bar is going to have a title title. Yeah, and, uh then you're gonna have body and this body is going to be list you, doc builder and you have used We have used builder in the past, and the way it works is basically dick. Traits were items, and it creates the entry item entry or this side lift style for us. Okay, So you cried. I can counsel. I say items, duck length, Anything. I don't want an item builder is the Excell place. Magic happens. So we provide context and index in this. It's a assumption we are going to say. Here I come. It's equal to items Index. Okay, so turn. Well, we don't return. So this is where we are. We basically provide our list. All right, Now, basically, if people like just a list style, it's gonna be a regular list. You wanted to be a dismissible, so each dismissible Oh, but I don't has to be like, you know, indispensable is the container and you have to pull out like child. What will the child is that that elements become? That element becomes dispensable. So in this case, from the list style Oh, our list style is going to become is going to become dismissible when rabbit inside that So it was a distance civil like so And, uh, we'll say key. So each each dismissible needs must contain a key. Basically, he and the key allows flutter toe, identify each widget uniquely. And you need that for dismissing Ivans because you claim and you're gonna plight item as keep next, biggest their own. Dismissed. We want to provide basic seeds direction. Basically, prices for accident received that another fuckin and we say items thought removed at and how you move items from from basically in list or are a collection we call it and then we gonna say scaffold not of contest Duck show, snack bar. It's a show this night bar way. Something has been dismissed. So snack bar and discontent content of your text and, uh, dollar item this promise. And if you know this Ah, I really love this long. That's a floater. It knows where the perimeter and sentiments you put displacing. He can continue via record strength, and it'll still executed, like surely the correct. Okay, so what? What you wanna do next? Basically, once we have, once they have provided just missile shells. Well, you want to leave some back home, and this background works as a visual indicator. Menus are actually spitefully. So we're gonna say you container, I ended. This country just wanted a lighter color color's outlay. Yeah, And, uh, then you know, I started. And finally, this is where we can add our list style. It is gonna have a title, which is going to be your text dollar. Now you can have, like, you know, a subtitle. That's all your text. How dollars. Item at in necks dollars. Okay, so that's that's about it for creating indispensable place to you. I spilled here, basically X code built now. All right, so I've got export build just triggered. Now we have no our app launching background. So we should see that. Did you go? Yeah, I think it. So there's your list has against ikan school to the exams and you slide. Here we go. All right. It's created an experiment. Something quick Center. Uh, Carl, new text. I see that actually continue her can show this. There you go against he has that elite written here, and you have seen musically, I have always be dismissed itself. Um, my guess is that alright is basically because of the the restart that we did. I s Oh, that's that's about it for this video. And in this who do you learned about how to create a dismissible item in how to create a basically a container that can and that can hold and leave that can basically show you leave behind effect. And so it was like, you know, five perfect. How they're used against life to dismiss something. Um, uh, yeah. Eso basically hope this helps you. And with their project ideas and uh, in the next video, we are going to be starting to look at from navigation. Basically, navigation is a big park where you're never getting from one screen to the other and reason this is important because they have Oh, no few videos online. I wanna cover how toe how to create, like, a full app with the menu couple of paintings. And in order to work with that, we need to basically understand how navigation works. So we're gonna cover that in the next year, and then we're gonna basically be ready for that, that after girl, where we can actually get that the city up site, draw our in the pages pages. Okay. I so hope you guys enjoy just to do. I will see you guys in next video. 29. Navigating Between Pages: Oh, no, Come back. And today how we are going to be looking at navigation. So basically never getting to a new screen and back. Well, why do you need it? Most of the applications and the absent you gonna create are gonna have multiple pages basically gonna have, like, information to display on multiple pages. For example, you might have a product speech, but you show all your products to anyone, either taps on it how? Basically you show them product details. So that's where you actually can leverage hurting navigation for the navigator. Reject? All right. Basically, the way you created is you create two screens, and then you navigated hard to the second screen using something called navigator dot push . And when you want to return back to the previous screen, you just sell, uh, put a navigator that pop as an action on tap. And basically the navigator is sort of like a stack, and what he do is basically, you put your item on the stack, which actually goes at the top, and whatever item is at the top or whatever screen is the top guest displayed in when you park. Basically, you removed that screen from the stack. And that's how it actually goes back to the next top item that there is present in the stack. So hope that actually gives you enough off from background. And now we are going to be creating a very simple to show you how it can be done. The insight flood over. Okay, so less Let me copy this code. Your quick and, uh what, he still here? He just what do you but this one? Okay, let me oncoming. These so, by the way, the uncommon Ah, shortcut for registry. A coat. It's command her full of slash. And that's how you can unconfident. And I don't think we're gonna need a constructor press. I should be good. Okay. Um I can't Yeah, I mean, I guess we can actually you have. Okay, let's strike the start. Something different about so this time, Mr. After leading my, uh, ap, we're in instead, she it or material app right here, just to give you a new variation. So so begins. Do you material app. And, uh, title is, uh, abdication basics. Home is the u just. And I'm gonna name this last night here for screen is gonna basically and hurt from the state. LeSage it. And now So what we're doing Basically, it's like, you know, instead of calling my application, which eventually is going to go bust green, we can actually wrap the hoping inside it's And if it if it like, you know, if it does not feel right or for a reason you can leave. All do this. My app extinct. I think this book it, you get Oh, hi. Turn, build turn. You were training lap this. Here we go. You my Okay, so essentially the same thing. So basically, what you're doing with your main is calling my app and you're my app basically is calling the Fusco. And this there are off screen. If so, this is where we're gonna start showing. So let's start just like some content serving and create a scaffold and the scaffold we can have fr so far and at Bar is going to have a title in the cattle first. Eso no, next, what's and then he have body. Okay, so I think you're missing April and sees here in the body, but you're gonna have a center of component and a center visit, and then we're gonna create a raised. But now brings button is an actual button that has actually but look and feel it happened everything price states and stuff like that. So that's what we're gonna do. So creating center inside this gonna have a child child is going to be raised. But that said you could draw down and out. You know, child, for this three Sweden and display the text. They say how you display the title for button and say launch new. Okay, Uh oh. Pressed. You're gonna say, provide a general assumption and the synonymous function is going to be basically the one that is going to navigate to the next screen. So we're gonna say, Navigator Doc Bush, you're gonna provide the context, and the rock is going to be new material out material. Piece out. And this is how you actually provide the route. And this takes due to just basically sorry, not take to prompter. It takes like you know, our multiple things. But builder is one of the perimeter, and builder is a anonymous ulgen, basically so that polite context he and can have a new second second screen, basically, here you can call. Great. That looks weird. Because of this. I see out you are double currently showing up again. So All right. Victor Kummerow. Okay. So what is this? Yes, no, Nobody expected here. Uh, so you're missing this, But your breath And I guess. All right. Okay. Cool. Now back to the second screen. You gonna clean? Eight. Last second square extends state lists in and out again. All right, build method Victor News. Careful. You go in this cattle to have just, like, other acts. No host bar. We'll text, I think a second screen, just three consistent. And then it's gonna have a body goes, and this body is going to be new center from the time it's gonna be another race. But so, child, you raised button this waste button is gonna have own press event, and this one press is going to before navigator got context. Okay. And, uh, then you're gonna have child Pretty is, uh, new text and go back. All right, so So we got some while it's building. That's just we kept. So we created a new app called my APP. My app actually calls this screen as its home screen. So this is what's gonna get displayed at the very beginning. Then in the first Queen bee, actually override the build, and we provide a new scaffold for title bar, a new title, and we create for the body. We create a center reject, and the central region has a child, which is a raised bottom, which is a button. And, uh, you add a child basically to provide next to the button and you provide aren't pressed. This is the event when user actually taps on that Buchan. And what do you do on that? Basically, this is where you call Navigator, and you do navigator dot Push on. You push context in new material. Pager out. You basically go. What is the what? The screen that you're you're pushing basically on the material, Bates. Okay, so it's creates a parade route for you to use in material left designed like it says here. Um and, uh, was he have bush that in the nephew to stack? Uh, that screen shows up, and basically, when you're on the second screen, you again override build, and and basically, the build is is going to create a scaffold. Was gonna show the title bar screen, and it's gonna have another button at the center. And it's gonna call Navigator Dark Pop, which takes the current context. And, well, basically, it removes the current wage from the stack, and, uh and then you go back to the previous screen or whatever the top entry is for the stack, which obviously is the caller. So it goes back to the caller and then hug. If you have child, go back, which is excellently display text. Okay, so here we have our app running, and, uh, we have launch screen. And if I step on this, they got me are on the second page and you can go back like, two ways. You can go back this and I could go back with this. So with with APB are present, this actually gives you this back button for free. So you not necessarily, uh, need to have this button. But it actually, it's actually good to know how you can actually never get back. In case you're showing a full screen, um, view and you don't wanna have, like, you know, I am in that bar on that screen. Then you can have this kind off set up where your button or you're like, you know, cross button here or here basically takes user factors previous screen that they have come from the hope this gives you are enough for for introduction for the navigation. And I will see you guys in next video basically for another navigation related video. Basically, we're gonna see how we can send data between screens using that. Okay, so I hope you guys got ta. I'll see you guys next. 30. Passing data between pages: Master Detail: Hello, Mac. And today how we are are going to be looking at another example off navigation. Basically another problem also with navigation is passing data back from back and forth between screens. Okay, so in this example we're gonna do is is basically, you create a example to do list items. And when you tap on one item, we're going to show which item you have that down and Children details off that I in the next queen now why? Where it is Apple cable. So going back to the same example that we discussed about products. So let's see, if you have a process of products showing up on the screen and in the tap on one, it takes you to the next screen where you show all the details. Well, that is a perfect example off passing data between between views and that is how you know which product to use that as top down. So this product you need to show on the screen, OK, so hopefully that's actually a good I think that's a good direction in Let's get started here. So I'm gonna basically copy this here. Quick. Basic here. So we gonna first uncommon this and I need another import this time we need package population Stop, start, dart and let's create or my act So it's a class, my extends. I think this some distance later, we are going to be called our builder and, uh, return material. Well, this material athletes going to have a table, its title appears passing data to like home. This one is to do Cory. It's to do. Screen is going to take some parameters. Basically, they're gonna generate some random items. So before we actually do less creative class for our to do, I have to do okay and create final spring title and finally, straight description. Then we're gonna have a constructor. Yeah, this constructor is did this start stuff? It's good. Okay. And here, basically fast at to lose screen. Oh, we've gonna generate list after news set to news a new lift generate read about 100 generator function is going to be taking X and passing it to create new to do with Michael entitled It's going to be Could do Dollar I so to do number and, uh, the internet. There's a the description off Do do dollar high. Yeah. Okay, So we're going to generate this random beta. Now let's create her to do screen class students state I had here. Yeah, Safe list. Off type two. So in the hold to do kind of items here. Gorgeous. Two dudes. Let's create a constructor or so to do. Queen Clinton's Super basically passed a key Super class. Yeah, and a squeak really create our build functions. All right, build. So you say you're scaffold and scuffled. How are you going to say at a bar next? Thank are you APP bar Michael. New next. And if you know this, my editor has started to go a little bit crazy. Basically slow, so I'm probably gonna have to. He started soon. Let's hope it doesn't happen for this video. According with this, I want to get to this example. No body. This party. We're gonna create a list for you. Use the builder to create our list and recover white item count, which is gonna be to do this duck length and then item builder is there. Get the context in the index. And, uh, I'm going to say if I know that actually, curry list dial. Okay, that's this style is going to have a title and that list new text. This is very gonna call our deduce the supply index we have received dot Okay, Next, we basically right on top. Still on that taps on this. We're gonna never get to the next screen. Just a detail screen. And to basically you say navigator, got push. Okay, everyone, I have contacts, and the rock is going to be new material paid throughout. Okay, Which stakes? Builder? It's the context it takes contacts supplied that for the anonymous function that equal you detail. It's green to do. Don't do it. Looks this is how we're supplying the year control find. And but, you know, I will come back to this. Well, it's all done up, so we're gonna create a class called detail screen extents state less. Yeah. And now we have final to do basically to do and for a constructor, details clean this start to do that's so clear expecting here and gonna call super supply the key. Just class, then build function. All right, that return you scaffold this couple gonna have at our camp. You have not not title new text and the text of the show. Uh, something like tails off dollar to do. Gone. Okay, so this is what we need. You need this base to show that this whole this whole section is actually the code execute . Okay, so if you have that body reading and this is contact batting Oh, 16 top CEO. Do you think old sights, That's the batting you want and child Helmand is going to be next. It's didn't believe your display. Wallace displayed it. Center child next se. Now, what we want display is do you do don't. Okay. And, uh, what we're missing here Is that those This one last so expected closing. I was expecting another one. Yes, for patting and, uh, stand specter to find found common. This It's good over two eyewitnesses. There's I've scaffold. Okay. Huh? So you have do you extra? All right, let's fix this one. Um, okay. I know these up or entities always gets in the way. General design is material paid out is here. All right, so on tap is closed here. This style is closed here. Ireland builder is called here. Then we have our the student builder ghost here, and we are not closing our scaffolds Close air scaffold. Okay, so we closed our scaffold, then do you have I see? Oh, I might have something breaking here. So that is our fell and gonna have one for class. That's low class. Okay, so that's that. That resulted. Issue off. Basically having unbalanced Cease this, uh, started debunking and let's recap one more time what we did. So we first imported our foundation our start, and then we created our main app. Basically, my up now before how we jump into my app we actually created it to do class, which is our model and that takes that keeps ah, title and description. And it has a constructor. Seven. If you actually conservatives class, you have to provide title and description. How many? So then are my app. What we did is basically recreated random of this stuff Return Richard about 100 list items with populating this to do marvel and putting it in a list off time to do. Okay. And then we basically called our to do scream which is our first screen and our within our to do screen. We have this local variable to do this that actually holds whatever is being passed from the constructor. We create its constructor to basically handle back, like in a populating to do and then within the build context, We, um, added basically this scaffold on and list view about building or somebody have off list you Dark Builder rebuilt the whole list with each list style and have aren't that functionalities of a number you tap on through the list style. It's basically the navigate to detail squid, not detail. Screen is eyes Another's our screen, which has a, uh, constructor that takes a parameter off to do. This is how this is where we're passing the currently selected. Also, basically, if you notice like you to do that index and index is something that's being passed here. Tow us. So we say to do that index. So take that one item that that was stabbed on and populate to do off the detail screen in that So we populate that that to do, um, item and and then I'll be go of launched details now detail screen. What it does is basically creates a new scaffold, and in the body it creates a padded element with about 16 points and then it creates a center child on shows that description. All right, so I guess our app is done building. And there we have it. You have about one dressed, all 400 of the studio items. And if I tap on one of these Ah, there we go. We see details off to do the syrup. So that's what you are actually expecting here. And there's a description off to do. Zero It's a description of to do one and the destruction after the tree. So So this is how we basically we basically ended up passing data back and forth between different pages. So ah, once again, you basically create the main screen. And on the tap off that screen, you initialize basically navigator that push and unique night, the next queen and passed and data in its custody. Now the reason we used to do class because more to provide more than one element and where it actually send more than one element inside inside are to do detail scoring like more more data, more than 11 point so you can pass the hold inaudible, basically do it. And that's how we ended up getting to like another details off the time and the details on the description. Michael. So So this is how we can actually pass data back and forth. Um, and hopefully you found this video useful if you stay. If you have any comments out, please send me a message and I will try to cover that unless, like, you know, it's always you have, like, you know, something back. So please leave from the back side to the the course and in the next screen are in the next video. We are going to be talking about returning data, so basically less safe. You saying something on the details, return it back to the call color screen. That is what we're gonna cover in the next media. All right, So hope you guys enjoyed this video, and I will see you guys in next video. Thank you. 31. Returning Data From Selection Screen: hello and welcome back. And today we are going to be looking at I'll turning data from different screen. So what I mean by that basically say you have a You have a nap where you have two pages, just two page. It's very simple and that basically, now you launch a second screen, you ask user a question and then use a response to that question now. Or you want to do with that data that user has provided as a response. If you want to return it back to the first caller, a screen or the first queen, and you want to do something with that data. So this is a typical scenario. Let's say if you're client, you save some data like, you know, I mean to see you open its screen. And you said, Hey, what kind off? What color the like and user picks color, and you wanna basically changed that color on your foot screen baseball user selection. So that is that It's like one of the example that that he could use are one of the scenarios can be can be assault. So in today's example, what we're going to basically we're gonna create a home screen and death, and you're gonna add a button which is gonna launch a selection, lost weight. And when user highlands on the selection screen, they will see two buttons and, uh, those How, when they tap on either of those being basically returned that information back to our first page and then show a snack bar on the home page. All right, so let's get started. It, uh, get right on. It s so been, actually, uh, happy few things Here. Let's go. Sorry, I'm commented. Okay, So let's create my, um, plus my extents state less visit, and then you're gonna say how you built, You know, we write our building insert, and we're gonna turn a material. So turn within this material app were calm, polite first by the table, so I don't know, I accepted a polite home screen pain. This is going to be another class. Goldman home. That death. That's it. So it's a home green. This is our I mean, screen that we're gonna show. I picked this Richard the home screen. We're gonna came over in the build, and that's how we gonna return. Scaffold is gonna have our what is going to have a title? Um, it should be a title. Should be a text widget. Yeah, body we're missing. All right, body. And this body is gonna have center, which so we're gonna show, uh, button in the center and add that. So, yeah, selection button. And this is new Class. You just that That selection Barton Okay. And, uh, been there self selection. What can I do? Trust basically where I build and you can actually create a reason. So raised, Tim, except in this race. But it's gonna have on press event. And this on press event is going to call basically the navigation. So we will create we're creating internal mattered for basically calling this navigation. And we've just a wait for the results. And that's why you're actually gonna write in making its Africa so right that quite under meat se and the school type, there are build sands and buildings. Okay, here on this score, no get display. And this takes build context, context and system is in Kuwait. So a think await iss away to call. Basically, it's used for parallel processing or like, asynchronous programming. And when you do a sing, actually a weight or something. It actually, Who wants to the, um, migrant dead on the ground thread operation, then But something returns actually get that response. Pass it back to me, which actually does automatically so you don't have to worry about how searching treacherous thing is gonna work. But it's in Kuwait, eighth basically away to offload your work, uh, and makes keep analyze it. So it's a thing from this probe. That's why this So we're gonna create a result, a very book, salt. And, uh, this is going to be a weight every game. Okay? And this is gonna supply context and Amityville phase out. Yeah. Now this material Pedro out takes about two called Bender, and that excellent supplies how context to us and say closure and packing quote. So this empire we are calling are our second screen basically the selection screen. And then how are we gonna say its capital dot off context? Yeah, uh, show snack bar, snack bar and content a condom. You text. And, uh, basically, this is where of navigator eso It's a waiting on getting push in. Whatever navigator is gonna return basically on the results that is what we're gonna show, um, on our on a snack bar. So we're just gonna say dollar results. And, uh, you would see, actually that it would It would actually return whatever gets passed. A selection to this grain. Okay. S E. That's something. That thing here. Yeah. All right. So let's listen, I'm gonna walk cocoa or this gold one time, And so it selects clean extends state this budget and then And this we can All right, The build right here are going to return Miss Capital. And within this cup and I have out bar. So you are. This is our selection screen. This is what I told you. Text and, uh, Joe, some text. So picking up they didn't have a body body. It's going to be the center. This is child. Now we want to show you our prince. So you create a colum container. So called and columns with Bradley have so, like, you know, call him Leo. You can put liking to Biden's stuff together, so complicate. Want one role in second World? Okay, so, uh, main access alignment if they're going to be main excess Well, I'm adopted center and then I create its Children. It's killed three new batting. You're patting. Create some padding first. So that is going to be constant edge and set all eight points from all sides. So basically, create some padding from eight points from all site for the child, it's child. You can say you raised button hand on press for disgraced, but gonna say, uh, navigate. Uh huh dot well, context and said they were going to supply our oh, basically, what we wanna return back. So in this case, what? We're going to return back it up. The reason you're turning the epic is are, but it's going text is showing text. So this is what but in the showing. And if user selects that, then they are go to be passing that back. Yeah, so but many here riding, ending it's a had our new padding. So let's take this copy essentially the same thing. Um se no. Okay, um and then and then basically, uh, it's gonna data Sal, you return to the color whoever has initiated. Either way, we have it. Wait here, which is going to wait for the result in the result is populated. It's going to basically show that soap within this. Okay, so let's run it. And honestly, I don't have the junior drunk. Not better height launching that time, and I'm gonna go through the Cold war. Okay, so that's what we did is between eight. Are being turning colder. My in our Maya actually creates a a material material app. And that material calls home school the distance where our home screen gun show. So the main screen show up and our main screen has a button at the centre selection, but and the selection mountain is a raised button down. We actually have not written. You forgot to call our function. All right, let's do that. Because this is not gonna work. I just didn't say. And there we go. Context. There you go. Okay. Um all right, so it's a future to stop and start time, all right? It was a good idea to lord, go on. Local d called time. It's so Yeah, So we have the main screen and means going show raised, but, um, at the center and written, then it calls. Dis mattered now dismantled, actually internal or private. That sort underscore states. And then how we actually passed a context. So you passed. They're going to be about this contest, and this context is going to be used by Navigator. So we're gonna underst matter. It is he think, which is like, you know, it's asynchronous processing. Some more help. Yeah, for me. All right, guys. All right, fine. So, um, what happens, basically, is, uh, a think facing going what is a creates a asynchronous processing are actually for a single programming there. Something is launched, but your training is not blood. So it's actually granted in when the background trade received something using away because we're waiting for a result toe waiting for something to happen. That's why you have wait here and when that await, fulfill, So this this promise. So I don't know. If you guys have heard differ promises, it's exactly that. So when this promise get full failed, basically, when this, um, this line of code executes, returns something it's on, a weight completes, and it gives you a result back. Now, the result is something that we want to show within our main page. So that's what we're doing here. It's careful in you snapper and begin to show the result. Whatever now returned from from nothing and we can do is, um uh then basically here, you know, simply launching, never getting push. And a news clipping in this new screen has do weapons at the center. Yep. In No. And use a selects tothe on press event right here. What we're doing is we're popping that, but no, we're not only parking it, but we're actually providing what you have selected as a van when and this value is what is gonna get seen site or what's going to get returned inside the result. Okay, so he can, because everything is object can very well take this and replace it with your own custom object. Like to do this stuff like that to new this class that created in last video. You can actually buy that, and it will return that, and it will save it and that you can actually start to. Okay, so let's take a look. Um right are what does not have any text? Best line? No, we have two options. We stay. Yep. And so last. Make sure you text how freeload go back work. I have to go. My my need for? For next video. This going pretty slow. Okay, so yeah, There we go. We have are written dissenter. Make a selection, You click on it, You get two options. You go. No place saying no. That's gonna show this night bar. So this is how you can actually pass data back from second screen. So now the of course, both ways were gored. Way where you can actually pass data from first going to second and then gold away. There you can pass that data back. Or a brass. Any data back from, ah, second screen to the first queen. All right. So hope you guys enjoyed just video. And I will see you guys in the next video with something new about floater. Thanks again for watching. See you next year. 32. Hero Animation: hello and welcome back. And today, now we are going to be looking at how something very cool. It's called hero, Would you? And basically what it is, it's animating across different screens. So you must have seen a, um, some some map basically better when you you have Lakers A list off products showing on the screen in the grade. And when you tap on one of the images of the product, that image actually grows in and basically then becomes the main screen and shows you all the details so that functionality is very, very easy to achieve. Flutter and it's see, is basically issued by something called Ah Hero Bridget in doubt. That is what we are going to be looking at today. So let's get let's get started. Basically come from this cope down. Let's stark So to say, my app stands Egypt Okay. And, um, then you can say built over, right? Uh, basically, in this override turn, I Yeah, it's not you going to have a title? Italy, You It's gonna have home. This home is good to see you. Okay, now let's create a class called Mains Screen Dance State. This which now we'll hear how we are going to. Basically providing are means screen functionality. So we must All right, Our build third. And that turned you scaffold. That bar you have far title and say money. Okay, dead body. It's going to be new. Uh, just basically, really Have. Did you, uh, gesture detector And this Chester Dickler is going to have a child tiles going to be This is where we can create our hero project. It, uh, huge origin dates. Something called Tag. Something that shows so we can actually show out an image. So image taxes a child, it's going to be new. Basically, what I want to is on Donald. Right? Let's do that. Let's find our images that don have some working to Earth. Use this basic so you can download this image. How on, basically. So this is actually wrapped in the jester defector. So when you that time we do something. But at the China foot, Dexter, that gesture detector, we're gonna create a huge They're going to handle our transition animation. So let's get out of far s and state owned scaffold. Yeah, can see tap this. Lots stir dot Push context. My dear Drought. I didn't say builder and let's trying on the radiation today. So we created an actual auction at the time. You tell sure. Missing from that's what? Oh, this And you do it. How? No, that's missing. So now we are going to be creating, still screaming that that we're gonna launch. So I screened at a class detail extents state this here, we're gonna say Bill called. Oh, okay. This body. And, uh, it's time you're not in a park, just for variation hand. You sure you liking a full information here? So gesture detector, child. New hero. So this so basically, you remember we created the stat white. So tag is a way to detect which element he was operating. So the stag has to be safe. So you gonna say you made a hero? Exactly same thing. And this is how it's going to keep a track off the element it's going. Okay. Oh, now that you image no, next. It's a show just right here. I must say, Never gets in. So the sun, the code in back over, go time. So what's happened? So basically, we create a yes that blessed it with Theis main screen as the main landing pinch. And in the Spain screen, we and the body created just detector so you can actually detect stabbed on the mitt. And there we create new hero element on here. Element has a tag in the child Greece in the documentation. And I I mean, they have, like, more properties, but these two cannot be no. And tag is important because that's how ah hero tracks which element to anything. And then, child, we have created an image, but you can literally have anything. Uh, then when you that that's on in the image, we basically never get to the details and on the details screen you once again create suggested detector and create a hero. Okay. You were the same tag. Yes. It can basically track track it like, you know, there. Where That Where did it come from? Second or late? Basically that element. Do you leave screens? And then we show that image as a child, okay. And then navigated that pop. If you said that you re actually just put you back on previous. Great. Okay, so let's check it out. So this is what we have in the image and step on it. You see, if you know this, how image is actually jumping and very smoothly, it's actually. And there's a reason why we did not created the APP. Barbecue is the strong ization of this animation off, like, you know, jumping between like, you know, from position. You would not see that. So this shows like, you know, if you know this when we're tapping the image, it almost seems like, you know, it's being picked up and the screen is changing, and it's being put on that second. So that is what ah, healed us. And basically, it provides a simple way to provide a really cool transition and emission. So All right, so this is it for for the studio. I hope you guys enjoyed the studio. See you guys. Next video. Thank you. 33. Fade In Animation with Stateful Widget: Hello and welcome back. And today, now we are going to be looking at another our animation technique. Basically gonna What we didn't do, it's gonna fade in and out a box. This'd is just going to show you unexamined, all off state full, which it basically because our element is going to be maintaining a state. And then it's also going to show you how easy advance basically to create a simple animation. How in inside floater? All right, so, um, let's get let's get started. I'm gonna actually copy this code here in based in this one comment create our Scott just said this class is Well, wait, what we need is we need our mean screen app and create main screen extends state This. So Yeah. Okay, So this is where you're gonna create a state fault. So state Cool. Quick it. Okay. And now this means Queen, Actually, mission show we should pass title from the previous queen. So we're gonna say title that would create a constructor. So, main screen constructor, it's going to be kidding. Stop, Go. Can this super pastor key? I spilled. So, um, like first, we are going to be old staple. So for Stephen actually asked that title back here How entitled is going to be? It's not the death. Take this here. Final title Old and Mason Demo. Don't say Michael is the title. That and we are. Thank you. Great. Now ah state, will we? Just job basically is Teoh, take some data. I'll create a state class and in this case, how what we're going to be doing If we're going to be taking in title and we're gonna be creating a home page state now, this other state glass is going to be responsible for two things. One holding some day that we actually can. I'm doing it on and then building you. I are using that data. Okay, so what does that mean? Basically, is how we simply are going to say on way create a state glass first. So ah, state full, Which it has two parts. Other one. That's the main class that says that extends the state full. And second, if the state class, which is, like this so mean yes, queen steak. And this extends our steak four. Man, it's cool. Okay. And, uh, are our main screen. Basically, it's going Teoh call that? So that's a main screen state Create state, right, So that equal new underscore main screen state. And this is how we gonna basically initialize the state now agree nd state for this state, for which it Okay, now what we're gonna do, it's either creating Boolean variable, whole visit and, uh, market true by default. This is there. You're gonna provide your build build meant for for providing the context. Okay, Now, this build matter is gonna be, like, very much similar to what you do with the I mean, this section is gonna be remiss. Uh, what you do with the state left, idiot. Okay, so let's take a look. So we're gonna return you scaffold in this Careful have at bar new App bar title. This, uh, title is going to be the text. Next we get the widget refers to like, you know, the Richard refers to this widget state full rigid right here and gonna call its title property. This is how we actually well, each Whatever states Maine, which it is, reach it by using widget. Miss Widget states Here Otavio, we have ST dot widget and stayed on text integrationist corresponding to a staple video against in this property any size by the framework before calling in its state. If the parent updates this location in the trees and fugitive and which adopt, right. So basically, what he's saying is, uh this Bridget property are do you? Yeah. Which property is something that you're referring to? This object and this initialized with the interstate. And it is always a way before you. And this is how you can actually get back to your to your main state state, which it Okay, state for which it Now there's more entered. So please go ahead and read the documentation, and it'll explain about it, but yeah, for for us, for our use case is gonna is gonna do this, Me and, uh, we're gonna say body and in the body we gonna actually the center legit hand in the central rejected We're gonna say child. And, uh, this is the If you couldn't start creating our animation. So we're gonna say you any meat did capacity like so what is any minutes past? It is the creates a rigid that animates its capacity implicitly so basically there because we're showing and hiding are fading in and out. We are altering the capacity off the off the ridge. It So that's why we're using immediate passage. So that that sort of this ain't gonna say opacity is underscore visible. So depending upon what visible state is, we're gonna see either show it or hide it, okay? And then duration is the duration like home? How much longer it's gonna take? Basically, for this animation to run so we can say new duration. And are you gonna provide this in mili seconds so many seconds and gonna say 500 seconds, it's gonna run, And, uh, then we're gonna create our green box that is going Teoh there you as a new container go and congeners gonna with. So this is how you can define a box biking the empty box, just like you. I have you case off. I was and, uh, you avoid height off 200 so it's gonna be a square. The color it's going to be colors. Okay, right. So this is going to create our green container, okay? And then we are going to be going out off our center, basically. So this is Cassity, and then our center. Let's say floating action. But so this is gonna creator action. But basically a floating action happen on That s so we can start to changed the state for our project. So, uh, you clothing at him? That's the one I want. Does he own press and press leading A Basically, they set state, huh? Now, this set state is a little bit tricky. Cells need a second state date, okay. And, uh, it's the function. Um, that takes an anonymous function inside. That's better core. So we're gonna say underscore Visibility is easy. Cool to not 100 score visibility. So basically, just a tablet. For if it's true, just are using the not operator. Make it false. If your cells isn't not operator make true, okay. And see to tip you gonna show. What does he do? So they say dog Cassity, That's what this stuff and have, child. This is war. This is army have meant that we're gonna show to the user. So icon and you say icons show the flip pike basically for this high. Um, stop dissing and started can go over the course of time. Um, one of the main concept. Basically, if you go back like, you know, make sure about stateless in ST for you to find out more information about four told our but your state, full rigid basically maintains a state. So and you can change, You can save data, you can change it, states, and you can apply that state basically on to onto the. And if you remember, the last demo we saw the state left, most leave represent mostly works for the presentation. So let's say you want through a whole bunch of text and not have something that you interact with you can actually have. Stay close it now there are some exceptions. Like, you know, you can provide interactions. We have been doing that using stateless, which it asshole, by using some by using some of these gesture detective and stuff like that or raise button . But if you want to maintain a state off the optic off the rigid, then you want to actually start creating state for which it and that's what we have here is actually maintaining the state off our main screen. Okay, and the state will Richard has two components. One, you create the actual state role budget. That's divergent in the than create the state and the state is the one that's kept that that get altered and saved. Okay, so here we're doing way simple. We're actually creating our main ST for you. And then we're creating the state and within the state, we provide the build, didn't matter and are built metadata returns of it, and we create our scaffold for our app R and B show with the animated capacity. That's the animation that you can apply. How we gonna show the child recently are green container and that queen container is basically going to show up in center off the screen. And, uh, then it's gonna have a We can have a floating button, that ruling. But when you tap on it, we're gonna change the state off the class right here by his instead state and with insects State leaving the set variable. Say, do something with that and, um, in them it's gonna beat a double back in force. So it's gonna show in hot. Also, depending upon the genius of the state, this cord, it's excuse. So let's take a located in action and get, like, more idea. So this is what we have. Um, and, uh, we have a queen box right here. And if I tap on it, you know that that now element, it's gone. And it is. The APP is maintaining the state of that. Basically, No, that element is not an instant. It's not gonna appear, but it's actually intractable. And when you get back up back on on the floating button, you're gonna get the get the box back. Okay? So yeah, So this is Ah, this is the demo for two things that we learned today basically, the state full widget and how they actually meant in the states and basically, how the fade in and fade out Animation works in how easy. Just, basically, I hope things helps. And we're gonna basically looking into more, creating more state ful APS, basically some of the more completed examples in the future, I guess. Eso it'll basically explain a little bit more about, like, you know, when you state for Andi Stateless. Big hope. You guys enjoyed this video and we'll see you guys next video. Thank you. 34. Container Class: Hello and welcome back. And today we are going to be discussing about some of the basic building blocks off flutter like a first we're gonna discuss about a container. Plus now, Ah, Katrina class is basically a glass of back surrounds a child with batting, so you could think of it as a box that actually sort of like in esteem. L sort of like a do over. And you wrap your elements inside there, there. And that's what actually, almost like what container is. So basically, container, how can, um, hold a child under, like, you know, basically inside uh, it's itself and we can provide properties like margin color with height and a child in patting foreground decoration, transformation and stuff like Okay, so let's check out how can be basically build one in and see an example. So I have ah, the simple are a simple template. Also have important material. Don't start in the disarming metric and we're calling my app in which is a state left with it and that now we gonna basically overwrite the build method and I say return new material app Have you inside this material that we're gonna provide the title so I couldn't gain are camel and there were gonna provide home in home. We're gonna scaffold a new, uh uh, element now. And, uh, this is where we're gonna provide Fuller. So we're gonna have a cop nebbish bar now, a new app bar, and, uh, Epper can contain, which is a new text. We're gonna provide text, basically the title off the off the navigation part that's gonna show up at the center of the screen. So, uh, container devil and then how scaffold is gonna have a body. And this is where we're gonna define our containers. So we're going to say new container. And first, let's try to give this container a margin. And, uh, it's just gonna be constant inch inset, all and 10 points from all sites color. So I'm gonna give it a color off, maybe color, Right. So we can actually use colors, talk, um, to show. But let me assure you, uh, away where you can actually use text hexi decimal values. So you can have zero X That represents the habit that the falling string, all the string, this string or value is actually accessible. And then we're gonna say this is our t be okay. So are T Oh, sorry. Um all right, d be. And how far? Okay, so that that is our color that begin to find and we can have with which is about, like, you know, we can give it about 40 points in height, about 28 points. Now, one thing you might be wondering why we always stuck points because these values are not pixels or inches wearing thing there. DP eyes are something similar to that. So they're points, actually. And that really, which is relative to the local environment at this coming running. So that is why it's always referred as points. Okay, so let's run this and, uh, check it out. Okay, so it's gonna launch. Yeah, And let's see what we get when the next good starting build. I love it. Starting, explode, built. It looks like build is done. All right, so it's gonna launch the app in the second. Well, this open and you will see here. Thank god. All right, So, as you can see, it's ah, basically Ah, It has created a a box off size 48 by 48. Now, let's say, if you want to create, like, something like 200 by 200 so it's going to start from that location from X Y and basically gonna increase the fight, All right? Now, if you want to display some content or what you can do it. You can say child, and you can have a new text and in quite some text in here. So my contain okay. And that's hardly look, And we have my container showing up now Imagine, like, you know, you wanna basically have this continual shown, uh, basically on this at the center of the screen. For that, you can use alignment property, so alignment, and you can say, um, alignment dot center. And as you can see, there are, like, a lot off other value available at all. And I would including to you to explore and see what they have. But as you can see here, basically we have this text China. Now let's see if you wanted to give a little bit more color or basically used some kind of theme on the text, the color to the text, maybe white or something so you can say style and, uh, then I think the back off on text and, uh, don't display, not act. Next thing, doc. Display one. Next time I got a copy with and this is there were gonna provide color and colors. Not quite. Okay. And less heart reload and check it out. Thank. So, as you can see, we have are text showing up with the display one, and to it's difference, you go displayed three as exit pay. Their taxes keep increasing. And I see either some other rallies that body one so you can actually have only one. So it looks like this. So I would encourage you to actually explore a little bit more by playing on this, but this should give you Ah, good. Start basically on. And there are some feature radiance of even, actually, we could use these. So it will be helpful that we're actually talking about dinners that you know what they are . Okay, So I hope you like this with you, and we'll see you guys in next year. Thank you. 35. Row Class: Hello and welcome back. And today we are going to be looking at another world the building blocks for a flutter and this region is called or wrote and basically what you use it for. You take a you take a row and add Children do it basically multiple widgets, and they all will show up in one grow, right? So let's see. And uh and you're gonna know what I'm talking about. So good, The basics that appear later. But you don't dark important and our main function is ready to go with my ass. And my app is a stateless widget Basically that all rights on the build mattered for this week and you're providing a way. Returning material app basically in app designed for material material Sign and we have a title and the homepage. This is the page that we can no show as a default. Basically the default many page it has a navigation mark in that navigation bar. Contains a text widget, which is a title containing container. Demos is gonna change that to roll demo only. And, uh, we're gonna do here is we're gonna entities are new. Um, no widget. Yeah. So we're gonna say new and it's called Roe. You can see here it's try to create. Now in a row, you can create Children and stuff like creating child. Now, um, what the difference between two is like as it implies, a child is just one element that is allowed under over. And if you see a digit will with a parameter that Children, that means it can take, in a way or a collection off rigid. And the help here also notifies or tells us that it's actually it's taking in array off which it's okay, So let's head enter and we're gonna start are creating some Children. So now we're going to create a new type here. It's called Expanded. Now, what expended means is basically take as much space as you can in the role or in the box body. So s so that is what expended me. So basically, if we have just one element and this is the example of having the child expended can have only one element within inside it. So God created you text, and, uh, we're gonna say, um, next one, okay, And if we leave it just like this and maybe three. Note. I already have Apple Inc. So as you can see, we have, like, you know, this time I showing up here and, uh, we say, basically, add in you another expended blocks so we could save you expending right way had of the child It's safe do in this case another half. So anything like here it has basically even the distributor's. So because it's left the line, That's why it's actually butted up Judea beginning off the screen. But this notified you that, you know, there's like, next text and starting from here it starts evenly split with me in these two A rose, this whole rope If you and the distributed between just two these two elements. Great. So let's say if we keep adding another Oh, by the way, you can actually also provide more property here. So you can actually say if you wanna show that next relying so you can say text alignment dot um, right, for example, this is going to show you what I mean. So basically, now this box, it's textile line like in this box is take some line left, so which is why they are actually close to Diller. And if you say off context dot like a cool, let's say, - uh , style takes a, uh, you're just charity. It's a text up the properties car is, uh, Kyllo's. So to the seven. Yeah. Um OK, so you're missing. There we go. We can change the color of the text, and we can also say center okay. And, uh, just to show another probably usually going to say new, expanded and basically at a child. And this is going to be new fitted box now fitted boxes. Basically something that can that can contain element within inside it so we can see fit. And how we get with property we can provide house. There is a box for it not contained. So basically contained the child inside and say what we want here is constant called record low. So we're gonna show little local here, and they go we have, if not a lower here, and I'm going to copy this. These properties here in this based it because that is going to show us a little bit more consistency. Yeah. Okay, So this is it for the studio. This was Bridget. Role on one of the basic building blocks for flutter. So I hope you guys enjoyed this video. See you guys in next video with another example off a different kind of frigid that you can use. Thank you so much for watching next. Thank you. 36. Column Class: a little more off Mike. And today we are going to be looking at another building block for flutter. And this time, because last time we explored a row leisure type, we should actually, it makes sense. Do cover column type is also so we are going to be looking at all with it. So let's get started. I have Ah, the basic template. Ready to go? Basically, I'm importing material. Dark, Dark. We have our main method ready where we're calling our my app, which is our mean hap I, and it creates a new material app. And then we have title and homepage and, you know, maybe create a noose capital we provided at bar, which is the top navigation bar. And then we create body and in the body thistle is where we're gonna create our column, which it So we're going to say new calm. All right. And with inside this column, there are few few property that we can actually say it. So we can say cross excess alignment and this is how we can say, like, you know where it should start so we can say process. That's what I meant is actually empty Stark. And, uh, this is where it says, Like, you know how Children should be placed. Like where they should be starred. They should put, like, you know, we're Children should be put within the container. So that's what cross excess alignment is. Okay, then we have main access alignment. Okay. In the main excess alignment is being accessed. Elin dot Man, meet me in Texas size. Yeah. I mean, exercise is men, and it's the hour over the still sea of liking all available space and how the space is allocated do basically you to the Children. And this is basically says, how much stay space should be occupied in the main access. So this is all about, like, you know, dealing with layout. How content? How diese? No, child. Well, these are gonna be sure. And then we create Children. And within the soul, we create, like, new text, for example, So gonna see. Thanks one. And I'm going to just copy this text to fixed next four by and so this how we go to oh are really starting. I don't have the apple. So what some do is the last time it actually put all the Children in a row. This time it should put like Children in the column like this, like text, long text to text to text your ex wife just like the way it's being shown here. So I thought how we should actually see. So here we go, Here's our and then go so we can see our basically Yeah, are column is showing with all the text valleys Children value oh, located improperly lined So we can do I just wanted to show you think, you know that expanded tag that we actually explored so expanded? If I do, you're listening to that. Say if you sign to Okay, take that. Let me move this year to floor. Okay? Yes, save And it's got excited heart, really? And then, as you can see, it's distributed like across, and it's trying to cover the whole space. Now, if we add another element and you don't have to stick with one kind of child, you can actually have a different kinds of the safe. I paced, expanded here. It's sort of having a test. We say we need a constant off no go, and Portillo is actually a pretty So Rex writes that within the within the FBI. So you actually just call this and this kind of show the flood and insurgency? It actually took that space, and it actually created that now Notice how it is, like, you know, really small. Although, like, you know the spaces. It's basically like, you know, there's a lot of space. I mean, it's taking exactly the same space as all the other guys. But this is where the fitted box comes into place. But we say you pleaded box and you say, in the favorite box, um, you need a fit him. We need to fit box fit. This is the box that contained and he and and then we see, um, child, this eye. And if we hardly little now, no, um, is in error. Find missing. That's okay. Yeah. A guy says he said, like, you know, basically it just grew right in front of your eyes. So basically what happened is because because we did not provide that frigid box. The logo was like, you know, the the silence off the Google was like, you know, time and it showed up there. That's the actual content size. But the image in reality is large, and basically you can make it fit to the entire space off the box by calling this frieden box Bridget and provided, like how your child is gonna fit basically how the child over then, that our element is going to sit in that box. Okay, so hope that actually clear simple little bit more about half in a box work. And I hope you guys enjoyed this video learning about columns. And, uh, in the next year, we're gonna explore something. You several hoping in charge. This video. I'll see you guys. Next idea. Thank you. 37. Working with local images: hello and welcome like today how we are going to be looking at images. So we're going to look at how to load image from, um, assets. Basically, from basically images that are located within your project and how to work with them Basically, display them on the screen in the next video are like in a couple of idiots down. You also gonna see how to load image from the network, but of that's different topic today, we're going to see, like, you know how to just play images from your own app, and that's a little bit tricky. So let me let me walk you through that through that code. Okay, so I have a basic app template created, basically of importing Matilda Tark, creating the main function, calling our uh huh. And within this created one a strength called title and basically have to find the image demo at the title so I can use it for the material app, as always, for the bar now. No. What? What do you need to do? Basically for the images. So images are finding fault located within assets and assets folder is not created for you . So what do you need to do it. Basically, you need to go to your project where your product is saved. And, uh, let's stay if I not to know, but fine. There you go. So this is my, uh, like, base directory from the project. And if I if I If I basically look at, like, you know what? All things that have got lib at the same level and lib is where we actually write Army program because, like Man Dart is in there, so you need to do is you need to create ethics folder and estimates commute one. It's going to start to show up on this project part project, massive star. So let me show you an example. So I recreated an example example. Hold her. It's gonna get creative. Right? Okay. So essentially creates kind of reflected in your in your project, director in your project application. And once you have done that, what you need to do Next thing is goto Bob spec sort GMO that this file is there like you maintain all your dependency. So any dependency that you have on the extra library let's say like, you know, you have a dependency on English words are you haven't billions, your transparent comedians. Our guest network stopped like that. You can actually to find its year under depending. Now, let's see if you have, like, just the dependencies, then you're gonna define it for like like thundered, stepped up any dependency, for example, the structure test depends upon the STK for the floor, and that's what they have to find. But you can actually further down to find this. And as soon as you actually define the dependency and save the file, the defendant dependencies, they're gonna get downloaded and basically place it in, okay, within your project. All right, now, next thing is we have a whole bunch of, like, commented no like sections where it shows the help. Like, you know, what causes here stuck like that pulling section is specimen to flutter. And this is very defined, Like, you know, that you need to use material design or not, And it's going to do drawing falls in here. Now, this is what we are interested in. So you're cold when you open? Both backed out. Um oh, while you're gonna notice that this actually like it's commented and what do you need to do it. Basically need to unkind. And it's gonna be images slash just justice. But what happened is I have actually placed an image off Nikola Tesla, right at the at the base directory. You know, at the S abstract. And you could do that, or you can actually create images. Put that, um I mean, I could have done actually the other way. And so the same jizz this inside immediate move. Then we couldn't say images slash. So like, but it So now are images contain Nikola Tesla and up so wants him to find this here. Your project. I take it out to sexually Not I A So I think and start Stipends of golden. You'll see it doesn't work out. We may have to move it back. So I'm gonna create a center rigid from the center again is basically put your content in center, and, uh, do they really felt like, you know, let's use a fit in box one more time. Just show you another example. So we're gonna see create child impressed fitted box what state fit, and you could define box fit for this contain our element within that. So you take it like an element space. And but we contain it like so it's actually wouldn't abound Office. Ok, now then we're gonna clear child, have mental mom time like child box. You inmates dark assets that we have, Nikola. Best law. Okay, friendly belt and, uh, J some three loading because showed photo and we see that's actually from last held off. This one, by the way, while it's loading, if you click down at the bottom right here. So this is remember fires. And if you click on the site for S E, you can see how many devices you haven't says to do. Devices connected. I have my phone connected as well, which is like showing back, but yeah, if you if you want to change it, you can just click on it and it opens into. That'll bobs and you can get it from Okay, so I see you're going on. It's actually ability. Okay, so does the builder, Right? So see to this. Oh, it's still complaining. That's true. So that's who. Yes, we'll reach back to, and I'm gonna actually, uh, can find out, like, you know how to include subdirectories out or something. It seems to be not working destructive. Just I should find it. I've seen Oh, yeah. So you have doing under dark to built. Let's see, actually finds it. I go. They found it for some reason this section eight. But there we go. So we have our made showing up, and it's actually pretty center and contained within the bounce off the phone. So I'm gonna actually research and posting update when Im fun day When I find about, like, you know, the images folder, But all the time like you work with this And if you find anything, please do, uh, let me know and I'll actually posted for everyone else. Hiko. Thanks again for watching. I'll see you next when you 38. Text class: Hello and welcome back. And today we are going to be talking about our next class. So, basically, textile, we've seen we've used a couple of times, actually in the best, but there are some of the properties that you can actually define for the text. And that's what we are going to be talking about today. So about the basic template set up and ready to go. So let's type for the body were gonna say a new center. So center are Dix content, and I'm gonna say, child, for this is going to be I mean test. Okay, So traditionally, we have seen, like in the past, videos like we just type Hello. How are you? And, uh, it would just like, you know, it would just show up. Um, just like that. So less than a sig alert kind of persona on this and show you what we have here. Then we will define a couple more properties and show you, like, you know, how can actually do various different things with it. Okay, so it's toe building right now. It's going to launch. Yeah. Second. There you go. And, uh, every are of it. So it's Ah, center and is showing up. All right, get Now. Let's say if you want to have a if you want to have, like, a lineman, Yes. They didn't have the center, for example. And, uh so let me let me take up the centre. Expect it's easy to show, but state this This is how it looks. It's actually right at the leading edge. And we wanted actually to do to show it, like, you know, a little bit on the center s so we can do it so we can say, Uh okay. Would you say text align? And that defines the alignment So you can say text online center. Okay, can if you say that. And, uh, I liked it. That's Assad. Do we start? This has launching. It is going to show up in a minute. Oh, yeah. Oh, yeah. Um oh, you know what? This So this is your thanks to live right here. So this is the end, and this is of this, the beginning into being. But your death starts from here and here. Now, it does not have any off the It does not have knowledge of this extra space. So the center is actually applied, but it's not being shown stuff. Um, in order for us to see it. Oh, we can actually put it in a row. Okay. And, uh, for Children, how can just have, like, one, which is going to be this one. Uh, it's still going to show up here. Now we need to do it. So we need Teoh. Tell it that this is going to be an expanded, so expanded and, uh, expected Dexter's child. Just, uh And so, um, so now what's happening is like, you know, your text a year road is covered, like from leading us to the training edge and, uh, had your text has all displace that is available. And, you know, if we apply ideally, should sugarloaf like that change that we go? All right, So So if you say you left, I was gonna basically left a line. And if you say center, it's gonna central line. But it needs to know the other real state, basically the real state that is available to it. Okay. It needs to know that, right? Okay, so that is alignment and next property that we can actually explore is over floor and overflow is basically when your text goes beyond what's allowed within that within that bone, what happens? Basically, so you can say text or hello, you can say clip. You can say it's just just treetops and faith, right? So the story Lipsitz and, uh, let's try to now listen basic like times. Do it now if you know this or text still goes from the leading us to the end. But after sometimes when it knows that Hague can't show like more off the text because it's like, you know, being there's no space available to show me like you know any of the other texts. Then I'm going to create this three dr assistant telling user that, Hey, there's more into it. And when is it useful? Well, let's say you had a lift off items and you just you're just showing one liner and you can tell like you know, user, Hey, there's more into it. If you click on it, I'll show you the whole detail. So, like e mails and stuff like that, you can actually do that. Let's say if this was an email app, yeah, then you would show subject and you So you chose, like, part of your body like female body. And when that body shows up like you know you want, you don't want to show the whole body within making on the whole no within, like your list. You wanna show it like, you know, partial you so you can apply this thing and it's gonna show ellipses. And it's gonna tell user that Hey, there's more into it. So if you click on it, you gonna be able to read the whole email. So then it's where it's actually quite useful. So yeah, so this is how we do handle text overflow. And the last one body thing is how we're gonna use it. Stop. Look, it's style and I want to Actually, it's disposed, okay? And style is like, you know something we can apply so we can say new textile is another class textile. And because a fund in there several properties, like, you know, anything to find upon family found size, style and front. Wait, wait. Now for family is like in the name of the font like times New Roman or Calibri or Avenir and stuff like that Foreign side is like gets like size and points, like, you know, 10 13 out of the year for anti Want to be style is basically you're like, italic medium bold, like, you know, underlying and stuff like that. And wait is how bold do you want your text to be? So we're going to select Wait, Okay. And we say phone wait dot bold. Okay. And you can actually define some weight is like, you know, there's some There are some defined Babel. So constants right here. And you can define those so we don't like bold, and we're gonna leave it to that and then go back, and then we can see our texted. So this is these are some of the properties of text have attend to use, like, you know, the most common. They're a couple of others that we're gonna explore, like in in future videos. But they should give you a good idea about how the text class actually works. If you want to explore more, go ahead and check out the documentation and it it'll have more details. All right. Thanks again for watching. And I will see you guys next radio. Thank you. 39. FlatButton Class: Hello, Uncle Mac. And today we are going to be looking at, Ah, buttons and expectantly. We're gonna be looking at a flat, but okay, so about basic set up already here to go, and we'll actually start working from the scaffold body so we could say new center, actually places, but at the center of the screen. And, uh, stay child for that is going to be new flat. And now slide button takes a child property Can we can say text is the tell that we're gonna the white hand. We're gonna have black but written on that. OK, so if I say right now and, uh, and run it, you can see a flight, but showing up there and by the vault, the flight button, it's initiated with a with disabled state. Oh, so that's why you see, they sub background being, like, you know, disabled, great kind. And, uh, I'll show you, like how When exchange Actually so But first, let's give it a color. So we're gonna say color is, uh, colors. Do you accept? Say thank you? View that notice There's nothing has changed, all right. And his and it's gonna change. Gets a own pressed and give it a function, and right now we're not gonna do anything in the function. So So as you can see that our text is now basically, color is applied and are bottom. It's enabled and can actually click on it. And it has, like, nice material design ripple effect on everything. Now what? This on breast, that is, basically, it actually enables your bottom so you can actually change the state right here and what we can do inside this, it's just a regular function, so we can do a bunch of things. But right now, we just kind of print, but first hunger. And if we save and execute, if I tap on it in our in our council right here, people council, we're gonna see button price event okay. And printed, basically. All right, so this was ah, flat button. And we can explore another title. But in the next we get eyes called raised. Right. So you guys and so nearly all 40. Raised Button Class: alone. Look, Mac and, uh, Trey and this really over here going to be looking at raised, But so let's geniuses to raise button. I've got the template ready to go. So let's get right on. It s so we're gonna create new raised button and we'll create a child for this, and child is going to be in your text raised button. Okay, so I just make sure we have any of the error that way. Works? I liked it. It's OK, so let's expecting this. There you go. All right. And now, if you go, we have a race. But in created again race button also gets created in the disabled state. And to give it a state, basically are oppressed you and another to make It may also just still that right here that can say on pressed and justify empty function for this one. And we just, uh, let me note, And as he saw, basically the button became available. And if you tap on it, you see, like, you know, nothing that beautiful ripple effect. But you also see the shadow off, like, you know, being pressed state. All right. There are a couple of other things you can do here. You can define color so you can say colder, which is the back, Uncle. I say colors dot of blue, for example, and gives a text color. And I can say colors, Doc, quite for that save. And, uh, they have Yup. We have ah jin General button strong. And if you step on, it gets to sing from some years. Okay, so this was a sort race button, And I hope you guys in the studio See you guys next. Thank you. 41. Floating Action Button Class: Llewyn. Welcome back in there. Today we are going to be looking at another type of button. It's called floating button. So you must have seen on the, uh, YouTube, basically, or Gmail app. There is a button at the bottom that is basically either to compose a new email and email case or to watch a new video and stuff like that on the YouTube side. And, uh, that is called a floating button on. And we could be creating just that on our today. So let's get right into it. Um, we have Ah. I mean, we have the basics that already and what we have here is a title that we have to find our floating weapon and we have the title actually created for material apathy. So let's create in your scaffold and reason we are creating a scaffold. It's because, um, Scaffold provides a, uh, place basically for floating action, but and that actually, that is how it is placed on the bottom right off the corner. But I'll show you, like you know what I'm talking about. So let's create at bar first new app bar and, uh, gonna have a title here. You text and you have, like, you know, basically title as text that go and body are home. Actually, it's going to be a C home. Yes. Are going to be our body. Actually, we re providing body and body is list for my new center for us. And people basically have Child has a new, uh, are let's create a floating. But I'm not sure you like why? What happened? If we could get a floating But here, so the greater floating and floating wouldn't take such out in that child is new icon Icahn's dark home. And then you say on pressed, we wanna profound some action. But here we don't. I see. What you with the areas body. I want your bodies and defined. Okay, So what's going on? Uh, you at bar over a missing one. No teeth go. Right. So if I say it's gonna heart result And there you go so endlessly like the button is sitting right in the center. Okay. Now, if I remove this center from here, So let's say if I take this up and it's a body you actually just say in the body of a floating, um it moves at the top left corner. Now we want to actually move it right here. And you are always we want it to always stay here. It doesn't matter how, like, you know, if you have a schooling list or anything, and it should be at the top. All right. So for that, what we can do is simply taking out from here. Let's create our A center back. And while the tile just temporarily provide, we just just for short for processing to create hate. Next, some text here. So some anything, Because here and then, um here what? We need a Basically. Now we need to have a special place. So this special places floating action, but therefore provides this for you. And if you create your floating written for a scaffold action button, what's gonna happen if a little basically moved that My Yeah, And it doesn't matter what, like, you know, text, you put like, you know what the sinks you put within scaffold because it's outside a scaffold. It's always gonna stay on the top. And your action looking is basically always gonna be visible. Okay, so that was the floating the action button. And in the next year we'll explore something in hope. You guys enjoyed the studio. See you guys. Next idea. Thank you. 42. Icon Button Class: Hello and welcome back and, uh, today how we are going to be talking about I con. But as the title describes it here, and this is basically it's ah is an icon, that it's sleet as a button, and that's what we're gonna create. And this is another, like, you know, a good variation that you don't really have to stick to a floating action. But you can have, like, an icon a za button placed for, like, you know, scaffolds, floating action, but property as well. So we'll just take a look. But you can actually use it anywhere you want to use it, all right? Just like any other. But basic. So let's take a look. I've got the basic template already, so I'm gonna actually start typing for the scaffold. So we'll say new scaffold and down within this cell within this scaffold, um, on we gonna create at bar and new app bar. Dad, this is going to be title. Basically, it's going to be new text. Um, and, uh, began to define title here. All right. And you create body and a body going to be new center. A child. You text, Come have like some text go here and then floating. The connection is there. You're gonna create our icon so we can say icon simply and it's a icons. Don't That's a volume up our while you meal has its good Alright, and then we'll give it a I would say proved him No. All right. We did not create the icon button. So it's created the icon and put in first an icon button is going to have this icon which is going to be new icon, and then we'll have next item you'd have its tool tip. I'm gonna show any tool. Tell it here commute and the next weapon would look at is on pressed. And this is where you gonna provide our event and, uh, desperate. Thank you. Like, but pressed in and out. Let's take a look. So here we go. We have this and, uh, we can actually Yeah, see your sexually a button that is created for us. Step on it. And now, for the state and everything that is actually no matter off state ful and stateless fidget . So we'll stop it for another day. We're going to talk about like, you know how we can set states for these elements. But here I just I just want to show you, like how you can create release different kind of components to build the you I complete you. I Okay, so I hope you guys enjoyed this week and in the in the next video, we'll take a look at something. You Hi. Thanks again for watching Chelsea got the next year. 43. AppBar Action Buttons: Llewyn. Welcome back. And today we are going to be looking at, uh, at bar. So basically, the at bar that you've been creating the navigation bar, the top so far we've only bean defining a text into it for the title. But today we're going to see how can you create Ah, a couple of buttons basically as a navigation button and, uh, and then a pop up menu button basically for displaying or flow are extra items. Okay, so let's get started. I have very, very basic template created here and cut flutter material. Dr. King put it and, uh, main method created and basically my app had build muttered, Ready, go. So let's get started. I'm gonna create here in use capital, and, uh, I guess they're wondering what scaffold is. Basically, scaffold contains provides basically all these, uh, navigation bar entitle and, like Borden bar and stuff in floating bottom, um, readily available for you. So it's a region that contains all the visual layout for the material. So that is like for most of the cases, when you're actually using material app. Are you gonna probably use a scaffold to provide that to get access to those readily available are templates that you can actually spread out in a minute. So, for example, at bar is one of them. So we just have to have to do, actually create our, like, our own widget and put it like, in opposition and stuff. We just have to define that. Hey, we need a nap. Are. And there we got to get it readily available. And so that's how that outworks So let's take a look. What l parking contain. So, uh, begin to start with our good old title so you can see title. And this time we're gonna see table this new text, um, basic bar. Okay. And next thing we can have actions and actions is basically a collection off which, and you can have, like, a whole bunch of buttons or or items basically in here. Okay, so we're gonna create a couple of different types of items here, so we're gonna create i con, but it's out committed by an icon, basically, with icons dot direction a state by and, uh, for, um, icon. But we also need to if you remember from the last video, we also need to provide or impress, so we're just gonna leave it blank, But that's what we have. Oh, um, icon is new icon. It's on this. A new icon, they don't. And then we say iPhone is are actually this Okay, that's better. All right. I was just trying to remember things, huh? Killing so next we can have, like, a baby car. Okay. Eso either too. Two of the icon button. So if I actually look at our code, our app, we have thes two, but this right here. Okay, Now, let's see if you want to have to show overflow to show some extra many items. Okay, So what do you do it even create? That's something called Bob Menu button. And we need to find it. It's like So it's gonna be It's a genetic type. So you've provided a type of unit pride string, and we're gonna use Aiken builder new thing menu button string. You should have come filter stepfamily. Not cuddly basis. Okay. Item builder there. Yeah. And, uh, it's actually it gives us, um, and run with function with the context in it can that we can use that context to return basically. So we're probably not going to use this context. But what are you gonna return? Isn't all right? Do that. And this array is basically off, like new pop, uh, menu items. Okay. And this problem, any item is also often, Eric, I go to sleep alighted ticket type, and, uh, I was a child is new. And this copy this. So we're gonna just show this here right there. You say it. And Skopje the whole thanks. And a couple, maybe No bike stew boat, probably have us. No, we don't have us. And Okay, so what are we missing here? Expected this. Okay, so all right. And, uh, just saved, which actually reloaded Arap So the sickle. And there you go. We have a couple of buttons, and along the back, we have this overflow, but And if we you see all the other options Now, um, you could have very simply place there's child, like, any place there a row. So, for example, Okay, like this new role and, uh, Children scientist How you say we need an icon and we need next and text. That's going to be, for example, So the her heart, as you can see weaken, have both the and the name. I like this one better. So I'm gonna actually copy this. And that's the place. This bar, all of them. Tell this boat I can go back One. It's like that. Okay, let's stick. Look. And there you go. We have boat trying us and right. All right. So yeah, This is how you can actually create or enhanced Create an enhanced fr. Basically not just having the title, but having a few buttons giving you defend shall be all right. So this is a report. This with you, and I will see you guys in next video. Thank you. 44. Button Bar Class: little Nickelback And today how we're going to be looking at another basic building block off litter called button bar. So what is Putin Bar? Basically, bucking bar is a uh so let's see, if you have, like, you know, a couple of buttons showing up on the page. Now you have two options eating. I create a row, and basically I assigned them to a role. But let's say if you're creating those bottoms inside some kind of container, then you can actually have those buttons basically contained within a button bar, which is gonna show up across the squeak, basically entirely out. So how I'll tell you in and you'll see, like I know what I'm talking about. So let's create even you center. So I got, like, the basic set up already ready, So just go dig right in and the center we are going to need a stout, this child. We're gonna create a button bar, right? Input. Mark takes two things main exercise and begin to say the nexus sites are minimum, so take as minimal space as possible. Your Children is going to be a collection off bridges, and this is a new raised fucking with held as you text. Hello? And on breast? Yes, basically an empty. Okay. And then I'm gonna copy this. The city, for example. A world. Okay, so if I go back now, then we go. So you have these two buttons showing up. So say we had a couple of more. So, um Oh, so this is what happens. Actually, when you really have making out something overflowing, How? But because we defined minimum space pride, uh, trying to fiddles. And now, as you can see, the four burdens are actually too much on the screen. So which is why it was showing that overflow right side or flair, And that actually happens if there is no space. Okay, so if next day five changes is too, these can actually show up. Okay, So joining up. But you get the point, Basically, how you can have, um, buttons showing up in the same line. Okay. So, um and so it's just it's just a container that contains hold a whole bunch of buttons. Now, it depends again on your screen size, the how much how much space you need and how many buttons to show. Um, if you need Author Burton, I would actually recommend something like a pop up. You wouldn't that we created last time and put it in here back way attributes a some real safe, but yeah, this is an example off button bar. So I hope you guys enjoyed this week. I will see you guys next. Thank you. 45. Text Field Class: local back in there today. How we are going to be looking at a text field. So text really is the is a text, really basically a place for you to enter some text and how quickly look how you can create a text field. Hi. That front. Okay, so I've got the basic upside up ready, and, uh, he gets a text field. Example Intel, When do is we're gonna create. Yeah, you Thanks to you like that. And yes, A we need auto cracked. True. And I don't focus to be true. And then you say on change, you get some value, and we would like to break that. Okay. And we also provide some decorations, does a new input declaration. This is how you can actually create some porter and everything so you can say or there cathine, but order. So basically no war her and he ain't text to be. Please enter Search to the no, that's from the reload and take a look. And it's all in a clear focused and, uh, it be, um we take something As you can see, it's actually showing up here, but I saved the mistyped anatomically correct that So so. But so So. Yeah. This is the example of having attacks for you on the phone. And this is how you created there are some other property that so I would recommend you taking onto documentation to explore more part. But but yeah, this is how we created. So thanks again for watching house. You got to Mexico. 46. Stack: blowing Walk back in there today we are going to be looking at something called Stack. Stack is basically a which it that holds multiple Children. And, uh, you can have then sick on the top of each other. So basically sort of like in CSSC have, like, a z next or something. So imagine that you have, like, you know, hired a Team X basically front, like you know me. Yeah, front they are. So if, like another, the lure the next that goes in the back. Now, where can you use to? Sanity had a photo and you want to show a border around that photo? What you can do is basically, you can create one something like a card which attend card is basically just a rectangular space. The pain started herself. You can create a card project and then stack basically put, put them in stack and then put the image of the top so of the gargles on the back. And then image cools off the top of it, and it actually stacks up actually, to show you that photo has a really good borderline, um, married. So I'll show you what I'm talking about. basically with a stack on a couple of each other, So let's get right into it. How we can do that. So we have the basic template ready so I can just start typing you stack. It's tactic Children best one property. Antah Mother is alignment That one is. So I mean, got center just the start center and create a few guards. So it's created card and the card has a child property, and we will create. It's an empty box. So for every box you can create a planning and for banning can create child constant heads . Imagine that all day, say to So for example, what else? So says no. I see Teoh. Um, we have cooler and, uh, batting has manning and and actually used back it said child padding codes. So in a car cooler and the colors card holders Pulis start listed. Do you accept? Hi. So we create a one car and that's great. So 101 read except yeah, are, um, them up that we have, like one card sitting at the back, another card sitting at the top and this is their stag at each other. I start on each other. And basically, as if like you're looking at them from the top. So that's what that's what stack and live in property actually is defined to basically barrier. Um, stack actually, where the stack happens So, like, you know, the center off the stack A So they say you can say top left can say Oh, don't center is actually so a studio and then got so top center is something that will show , You know, in olden days you had a floppy disk can actually connects it. That's effective. This black it's See that show we go Sort of like a flood. It gets It's look like now, Okay, else crime to look like a gray colder great claw into it. But yeah, so So that is that is stack. And, uh, they say it's quite useful for layout and for reading purposes. So, hope you found this this radio useful. And, uh huh. And in the next video, we'll explore something new about flavor. Thanks again for watching. Gets a for you. 47. Stateful GridView: Hello and welcome to this. Needs to eat on a flutter. Advanced. Basically this It's a serious where we're gonna be exploding something advanced features are flitter, and, uh, we're gonna create some off her very, very cool, basically. And not only you wise, how, but some of the common Egypt's that's gonna help you build your app and that this is a problem, a solution. Recipe kind off. Really serious. So we're gonna take a problem, and we can provide its solution and that it's going to be a complete solution that you can take at this point in your program. It Okay, so Eliska started, um, intimate with you were going to be looking at a grid and you're gonna be creating. Agreed. So what we have here right now is that I have the empty app open hand basically created and ready to go. I put it better dot fluttered slash material. Don't start follow, which is the main file for, like, providing material to sign in the player and out. And we had to find our main function. How which calls run app, run apathy made initial place runs basically your screen for your app and we're calling my app, which is not created, gets of you Just gotta start to create that. Um if I diaper s d fl quite now and hit enter, basically it's gonna feel in the template for state, for with it for me and, uh, see my abs now stick feel rejected something that actually safety state up two components. So basically, this is create some actionable screens early. They're trying to save our act on act on data and stuff like that. And it does not deal mostly station. That is a state. LeSage. It stayed LeSage motives were like just on a show, only out in presentation and sort of like, You know, you have an image you have just intimate on the screen and you are sure that that's going to be example of state Plus, which it but state boys more active and responsive, I mean, responsive in town, so you can interact with it. So So, yeah, that's that's That's the main difference between those two. But first, let's continue on our problems. So we're gonna create a list about this thing. Items just help strip. Yeah, What is that? And, uh, next thing we need to do is when it agreed in the state, which is the 1st 1 took it gets cold, excited state basically be polite. So motor so we can do here. We were created for look, since for basically yeah, we create about 100 I want and, uh, 600 the Mets are going to be items list. I don't stop ad. Then we're gonna have some dollar I So this guy at 12345 about my you know? Okay, so the next thing we are going to go in our build function, I just it later b provide our we need vitamin screen logic. So they say, serving a container. That's a new material. Okay, year home scaffold at a bar. Have four. Title is good, You text. This text is going to be some type court. Well, actually say quick. You example, Uh, but a car here and provide the body, which is dia center of the screen. So at bar is actually the navigation bar and body. You're means queen. Our main parker schooling. They control the content. So you say you read, you hear? And, uh, this could be actually takes a builder, so we can actually call, uh to build that. Uh uh, You can provide director on this basic by Adam comes in and build each item off. So you could say count people. Two items Duckman and, uh, then good, darling, it is basically this is for we're gonna say into silver, you civil quick, fix across access count provide, uh, box for sex discount basically to four. A good number of items show it's a item builder and Simon builder. It's going to be, uh, function that actually takes a build context. Context create. I don't return card card. Okay, so some colder, That's a colors done. Blue accent, salvation. Something how high you aren't. So that's already given it to its A defaults gonna say you that. And we're gonna create and you padding critics like an empty space to show. So, like some planning it out to create a box weekly patting take cards and you owe 20 points. So 20 points from all round create a parrot box for the child created text with, uh, items indicts that's being passed. And that's what you're missing here. You're missing. And in Nick's Yeah, and it is this We should be. Should be ready to start debugging. Basically starting down. That is not the right device. So if you you should have inlets are already running and what you do, Let's go. Do you started? But it's gonna basically show you where region underwritten while that it's gonna actually launcher. Um, right now I have my phone connected. It's also so it's showing two devices connected. So how many devices you have connected or how now? Similar trends. It brings a green, actually. That this click on this and basically choose which device you want to now in her to run and prince in this green. Yeah, to be some dark file. No. Do I start? Start debugging If you're on some other like Moro. Anything involved in this? What do you want to do? That So justice. In case like, you know, if you are, I feel last two nuclear seen it from the screen. Now that my switch to a dark how don't artist station and then start there should be Okay, so it looks like our app is now. So stay. Look Yeah, So we have our groove you create and with about 100 items, and you can see how, um it's so easy actually to create. It's a very efficient I don't say noting down fluttered handles all the inherent curing Dick Ewing sign. Oh, I was going to show I like him and re management everything for your So that's actually all taken away from you, which is awesome. Nothing. Right. So that was our 1st 1st video for just a complete example. And I hope you guys enjoyed this one. And I'll see you guys. Next idea. Thank you. 48. Stateful AppBar: Hello and welcome back. And in today's video, we are going to be exploring at bar. So we're gonna be basically creating map that has the EP are intact. We are going to show how you can add some action buttons and take action on them and getting them reflected now within the app screen. Okay, so that's what we're going to treat country. I've got a basic public radio and down begin to start taping. So that start his tfl That that's going to create us? Yeah, simple. Our template. Basically, it's gonna protect related code for a state for visit. So it, uh, lists you are my upstate and custom we need is that we need we need available so this I can't selected. I want people to you I can and gotta say icon, stop you. So but fault, we're gonna We're gonna basically have salty selected Aiken. Basically changed, sir. Event And you can initialize this with this default I got so that way you can actually use this. Now you just do a twirled er our class in this in this class. So that started creating it at the classical. And the next time you will create a method called change selection. And this is where you basically supply and icon and basically changed. The selected icon sets in the set state, and this is there. Actually, you are stately Senate State for Bridget differentiates, Diggins said State off the program and within that state, he can actually set stinks for your local Babel since stuff like that and they retain their rallies within the app while the apperance so it's in. It's in the Met result in the memory and stateless management is not happy that Okay, so it's elect civil lecture selected I can't is equal to like, huh? So that is good to go. And, uh, then nothing for our any matter but just created for corporations sake. Okay. All right. And, uh, then we can start building our absolute let's go to our build maternity turn, a new material app. And we're going to say, uh, home for this is going to be new scaffold and this create our our new at bar and go start finding some properties. Yes. So the first property, it's become core. So you guys say color Stop hamburger. Really? Okay. Um, I don't actually run the app look like to show you, Like while we're doing all these changes, you can actually, so it's back to the APP. See those changes reflected. It's watching build right now. Okay, well, I was doing that, actually. Sorry. Watched. Now they have. So this is our amber navigation mark that we have just quit, and we cannot give it a text for a state title. It's more text, you know? Yeah. Sample. Yeah. You are kind. Lift are showing up in the central to screen. Yeah. Let's say if you don't want to show it off center, you can say central chattel votes. So by default, this truth I said as a savior. Okay, change here. It's too hard. We note you have showing on the left side, and, uh, then we can actually define invasion. And elevation is how much drop Shadow wants up. Highly innovation blurrier. Good. Ruptured. It goes. So basically destruction right here that you're seeing between the navigation and the page . That's how you can control the elevation. So let's see if you say one, okay. And as you can see, it's like, you know, pretty flat. If you say a C more blurry mess. Okay. And, uh, yes, the innovation property as explorer, Something else you can say to bar passively. Listen, just a In any case, like, you know, if you wanna capacity, it goes from 0 to 1. You sent one itself folio pay. And, uh, you say Yeah. Do you know 0.5? It's 50% can see it right here. It goes to transparent, and we have white color. So this, like, taxi something created by hey. And, uh, so our point, you know, that's and then we can create some leading, like so basically like a menu menu bar I got right here so you can click on it and open a drawer or something So I can say you Oh, leaving do you take on? But and, uh, I thought this it's Do I land gets on pressed contest to find empty and every function that this should do it basically Easter take away or a good you can actually back them logic here that will open the drawer. Maybe don't for next year are like, you know, some other day. But right now we are about seeing many, many button. Yeah. Okay, so next thing is we do you gonna create some action movements and action wouldn't send something like right. Clinton's at the right edge are training X and you are liking user toe late user, perform some actions that stuff like that you can say Icahn, the icon ISS you like on? Hey, come on, start. It's a male, maybe, And, uh, on press is, uh I be trouble. Like I'm to function here. Them a copy and pasted. Yeah. And well, it here, we're gonna have maybe, Really? And we're gonna actually come back and ships. So this first, take a look. So there you go. We have a male in a delete right here are getting, but here it's unfortunately. So before we do this functional TV, I mean body for our app. So we're gonna stay body and bodies to section right here. So body, I mean card. Wrong place, you hard. I'm gonna create a card of Egypt, and, uh, you look a corner. How, uh whom? God call the sample and then and child center and basically quickly a child for that column so we can have a column. School is going to have man main excess sites so main access size to be read. Okay. And, uh, can have plus access a line to And, uh, Children? Yeah, collection off digits, but it selected Icahn. Cut my fights on 28 points. Can color is core stuff like Okay, let's wait for my I need to catch up. Seems to be, uh, have it shoots, kill it, keep up slowly . Probably lost the connection quickly between stimulator and the i d. So let's make sure sexy looking back. Yeah, I think they're working now. Okay, So, uh, yes. When When? Sometimes, Like in a real studio called See this problem. And, well, the main thing that you can do it sometime, I guess, slowed down so you can actually just killing and restart. And basically, that should give you the become child back responsive back. So I might have to actually eating that. But anyway, here we go here we have our body created and we have created a card. And this within that car be created. A central called that has just went. But one big giant I can't showing up in this time. It's a meal like that featuring because that's sort selected icon, icon has. But if he happen anything, it doesn't happen. Like don't change. Basically, the fact that camping So let's provide that spark starting. We have already created that function here. So we're gonna use that function, change selection within this change selection, we're gonna pass new icon because we know that this one is gone. Stopped male. Okay, Yeah. And same thing here, but to eat. So yeah. So what we do heart reload and be quick on these. I should change. All right, So these area, actually but concerning can actually perform several different actions again, Lord. And for major sure, different. Different You wire something like that. But this was a quick example of how you can actually have a customized navigation bar with much apartments. And when you take action on those patents, how you can reflect those changes Didn't the body off the app? I hope you guys found us on useful, and I will see you guys in extra. Thank you. 49. Stateful AppBar: alone walking back and delays for you We are going to be looking at a camp are severe Not only gonna look at that bar and the cop, but we also been a look at temp are at the bottom. Um, now get a violist. There is only me. There's only one temper said the bottom but lovely android app actually include out that bar at the top So we'll see how you can actually achieve having, like, you know, bottom and bottom in, uh, top tempers within Iowa Sasol using flutter. So let's get started. I have ah, basic templates where you go and I'm gonna type s DFL Yeah, create my app basically now. And the next thing how gonna do is we're gonna define Yeah, Tab controller. Now, tap control is the Is the control of that is actually responsible for creating Are basically from the actions to do that I unless initializing it in in a state so leapt a super and, uh then stay far tab controller is equal to you Down driller. And the clint is going to be four. He and doubt we think which is it provided going to be this now in order for us to, um, have this basically conformed to We do, uh, inherit that within our classic say with single dicker provider steak makes it okay, and that is going to allow us provide a ticker for our tackled over. Okay, so this is how to be able to are you be able to use our controller to basically, uh, that navigate back and forth between different dads, right? Well, let's go into our build and create just you continue and creating material happen. Can this material that we're going to stay home? It's you scaffold. And, uh, it's a app. Does not bar and scaffold bar. This title is new text and basically glasses. Deb bar example. Okay. And now we're gonna define something called bottom. And this is that that that bar it says bottom, but it's actually at the top. So basically says bottom, because what's gonna happen this year? Let me actually me run the apple bust because I want actually talk to you about Well, this is gonna show up. And, uh, isn't this relaunch the apples chill you Montaigne in the navigation bar, means in this case, while including would be typing out. At least it's a damn bar. And I'm not gonna receive it, because for me, let's go area. So, sir, temper. And this space right here, it's called bottom. So basically was kind. Could have this. This navigation bar is gonna, um, stretch a bit a little bit, like, you know, towards this direction, and it's gonna have gabs created for us. Okay, So mystical. So I'm gonna create new tab are And with this new gambar gonna have a controller, and that's going to be our tap control that you just created four times we say new cab and , uh, icon new. I I can't start, for example, no coffee. Just based it three times. And then it has history as quick tweet history in trending. Okay, for the three times. And this is a number of tabs. Actually, we define, so I just create three. So that's I changed to three. All right, so no favorite Capri lump and go back to the up and there we go. So this is our tab and can actually tap I to change the page. And a pretty sure you can actually swipe for but something like this for destroying Uh, yeah, for me anyways. Okay. So, yeah, it's easier to see on that bar. Let's create a damn body. So you see, actually, where it's changing the tab, Let's go back up our answer. Gonna add a body, the tab bar view, and then the stamp are you were going to provide the same controller so it can basically perform the sink between when the tab is changing and which to show. Okay, so it's gonna do it for us. It's just like, you know, you have to I have to use the same damn controller instance, okay? And because the Children Children are center and even have, like, any budget here, I'm just gonna have a central reason. With a child showing up as new icon just gonna show Icahn stuck home sighs at 1 28 points here. The colder heads corridors. Okay. And I've been a copy. This create another Can another one really in this tube or Jeanty Icahn to history And this one too trendy. Okay, and let's go back. So here we have home. If I cap on this and there we go. That was the reason why a gesture of not registering because you didn't have anything in the bodies of money was not created. So I didn't know that we're to put the restaurant. So estimate, people, body it actually registered gesture and everything for us. That's so amazing. So, as you can see, you can actually swipe back and forth and dab actually changes its this position. You can actually cook all these little change position as long. So Okay, so that's and it's so small it actually, it's super fast. There's no lag whatsoever. And it doesn't seem like staking a performance drag on anything like that as well on the gap. Anyways, let's continue on. So one last thing that you do is that we gonna create a bottom that are just like us has. And I want to show you, like, you know, having both downpours and show you like how they are actually pretty in sync with each other. And you can have, like, either of those are you can have both of those doesn't make sense for a handful of them. But, you know, you might have a need for it. So, uh, let's take a look. What do they do? Is, uh, after this you were gonna say bottom navigation bar. And yes, this is actually part of body. So bottom navigation bar is body body. So that's what we are actually creating it here. And that's a new material in this time. And we're gonna say color is how colors dark blue. Oh, just for just for fun. I'm gonna give it a little accent just to see, like, how different is gonna be and then we can see Child is new Temple are simply the stamp on Iraq and have control her. So Controller Tab controller and are basically going to have that same here. And that you Tab Icahn is a new icon. I can start home. Yeah, but copied at least a couple of times. And history. Yeah, finding. And if we reload so you can see, like, there's a little bit of different difference, huh? As, like you know how it basically shows. So you have so Lex, and it's gonna change the same color. But as you can see, it's a pretty in sync with making up. What do you have here? Um, like, you know, if he was like this one, gene, just them. And because the top control are the same and actually perform the think and does the navigation for you and changes the the upper dampers index Asil for you. So author does a lot of things that cool things for you actually improvised you like, great to go submissions. So that's what I love about it. But yeah, this is actually the temple example and hope you guys and your destiny and I will see you guys in exiting thinking. 50. Stateful Checkbox: Lauren, uh, come back. He Let's start today with in you a state, for example. And with this time, you're gonna be exploring check box. So I'm going to beat it set up, ready to go. Let's start with the template So state ful and my going to basically your trust going to be creating so what you can do so get yeah, colder people saying text color call the stakes color, and then bull, which is going to be check box, show some text and as you check in and check James the color off the text. So this, uh, by in state, that's a very exciting stuff, So OK, that's a text color. You're cold colors. Read. Usually check box folks you don't want it to be selected, would be start creating our build, basically creating our app material home. You step old four in that bar title, you text check box example. Okay, Now I'm gonna get a body embodies intervening center here in this some text I'm gonna say channeled you text, and this is going to be some or number. Thanks. You want type? Hi. Um, something silly and random. Uh, and they're gonna continue the sticks on the next line us on the Maxime puppy in based. So we have, like, multi line next year, Basically few more times. Okay, so if I could see Okay, that's good. And, uh, we're gonna create. No, actually, you know what? We should have wrapped this inside the call because you need multiple. Thinks. So it's creating you call. And in this column, we will create Children. And here we're gonna be startext this properly. Hi. Okay. Thanks. Sediment want is basically in evil. And, uh, in this role, we're gonna have some are more elements and basically, what we have, it's like decks that it's going to be changing color, so create you expanded town, new text, agree to our curls. Uh, it's style. It's going to be Dexter. Color is text color that you have defined. Aria eso this text over Is this one that initialized? Hi. This is the text change. Um, and then we're gonna create our check box, so you check box and take book is gonna take box is gonna help. That's a check box. We'll own change. We wanna do something. So on Jane supplies is Jenks State gonna take that medium asset state they're gonna say sexist E. Yeah, Delete this execution block and that. And here we want to say check box badly. You want updated with the Czech State, Then I say it checked is equal to true. Then you want to change the text Colder to be color Stop Green health. None Say ex color IHS people. Two colors upgrade. Okay. And that's what it so this starting. And, uh, I want to actually like the emulator and build on Do that real quick and wells building some. If you had a question, basically, why do I not broad? Are you simple, cold and basically the reason All right, so we are missing. Do any positional? No. So, basically, this shouldn't be outside because, uh, we have the text and that has expanded list. Okay, Okay. So let's build in one more time. Okay? So yeah. So you had a question about, like, you know why I don't provide the sample code is because everything that you're doing basically believe from scratch, and, uh, I want you actually for better practice to build that from scratch on your own, because that's going to help you a lot. And if I provide that, that's going to be the gates. There you did. You gonna just probably copy and paste and probably not gonna learn much stuff. For that reason, I actually tend not to provide on that. It's, like, too complicated. Offer an example which most of them are not. So it's a good practice extended to type up your gold all the time. Um, distance. You're wondering if I'm not providing the temple cold wife. That's the reason why. Okay. Hope that makes sense. All right. So, yeah, I'm gonna basically I can see for happens. Launch together. So our empress launch and this is a some text, like, you know, about terms and conditions. And if we check, I see how is basically turning read and, um, basically is turning Read? It's not checked and green. Okay, now, we didn't do some things like, you know, we can say text align is text align dot Right that way, or this guy right here ambles closer to the to the jump up, and, uh, they said how you can basically. So this is one of the example leak in public, Conditional where you don't use it. a lot easier to go to the next step or Raciti. You disable button steak or something. My bad, Um, in order for users to make the selection and then before word. So, yeah. So this is three jet book example. And that's how to use check box. I hope you guys enjoyed yesterday and I'll see you guys next week. Thank you. 51. Stateful TextField: mark, mark and intelligently. Or we are going to be creating a text York. And we're gonna be exploring how we can make our text feel responsive and basically receive genius and stuff and show it in the text. Um, no. In a text on the label? No, we're the state ful reject. So let's get started. I've got a basic set up ready to go, and I'm gonna buy breast UFO, and, uh, we go my up and, uh, you should be good to go. So let's create first, a strange Babel tool. So you are home address, for example, in this case of here, going to be asking users to put their home address. And you're gonna say that, uh, me and then I'll be going. Teoh Misha, that so in the state we have actually initially the slights is already but I just wanna be a good sent to them and, uh okay. And Isha that here and then let's take, then weakens and right into our built so create new material. Gente home is going to use scaffold man polite in that bar title. Your body and body is going to be you center, So gonna have so and held it is going to be new home we get. And this column big. It was going to have Children, All right? And this is where we're gonna have. Um and I confessed. I can. This is at stake. Icahn's thought home with size about 64 points. Yeah, other to be colors. Okay. And, uh, excellent gonna do They text, field, text field and the sex real is going to a few things, like on change. Probably. So scum Jane on Gene's supplies us with move. So stay string. And I say that state And within the sex tape, we are going to say home dress it. Do you have? Yeah. So and, uh, this, uh, we also operate decoration so they can provide him. So you end quote decoration, and this is going to be hint. Next. Can I say enter? Were home address here. And you're also in a provide a label. So label text if home so, so less. Try to build and run. Can't see if it works up. And if everything used goes according to plan, we should see um, he center I center regent of our body. I would went off control site. That's gonna be a ho my car. And then text field and then, uh, text, text field. Yeah. Oh, well, it's building wanting before that is where Just where we're gonna show our Really? So you create a new test and what they were user enters. We're gonna show it in the text stike home dress. So Okay. And I should do it. No. So we have our home address ready their country, start typing anything, and you could see it started to show out. Thank you. So that is how easy it is to create a text field or text box with the Wendy's being reflected on change into a, uh, label or a text. Is it OK, so I hope you guys are formed this over their useful and thank you. 52. Stateful Slider: hello and welcome back. And in today's video, we are going to be looking at sleight of control. But it's sort of like, you know, it's showing just a plain old slider and sliding things. It's not much fun. We're gonna build a state full app now where we're going to take basically a card and then apply some transformation into it. So rotated on the acceptance likes. So that's what we can do. You can create three sliders. How will we moved us like actually working? Yeah, the guard adamant our car Egypt. Okay, let's get started. I'm gonna create S t f. L basically do create our template. My Yeah, we are old set and ready to go that let's create 1st 3 labels double tight next direction. Basically, the tables are gonna hold no value for how much consolation needs to be applied. Why Brexit the seed? We also not creating metrics for the book base crumbs or and uh, in the in its state, you can basically provided it's or defined it with properties like nationalisations you matrix, Or that I didn't serving on any side. The identity which is empty metrics to know transformation applied basically And how we are going to be commuting Any function called handle selection. Okay. And obviously we can apply our, um What did you say based trapped on? Okay, X, the angle is going to be extraction, divided by wanted Kentis values. Ingredients of this one by one. So we can make it working slightly. It lasts speed. Otherwise it's gonna be a super fast. It's do that for oh, corrections from bagels. So I see. So let's now we go to our build, start creating rap of new material here, basically home on the scaffold in that bar you have bar title next, and this is going to be flanker. Example. A body gonna create nobody is going to be a little bit How? A little bit complicated time. We're gonna create a center that's within this center. We can create it can create a column as a child or its Children. Oh, we are going to create bust new text moves later to transport car a lot. Get some sections. Okay. Next Ho una create and empty container. So padding having const. It's oh, 20 points a distant, empty role. Basically, and then we're gonna create card so, uh Oh. So here, we're gonna first define it. Transforms new transform comma you for? Yeah. And this is what basically, uh, this visited. Wants to use to end any rigid inside of me. That's when the transfer miss decided to transform. The consul gets applied. So you card Guard, guard child is padding padding public 20 points again with this one color. Thanks. Having and good colors, orange accent, maybe India and year confirmation ants here. And he also gonna provide the principal. So this is where you actually provide our base transform that we created hand, Uh, according to the changes to the base transform, it's going, basically, apply that onto the element. And, uh, now we're gonna create sliders, So use later. Yeah, value is going to be X direction. This is going to be extraction. Max is going to be 1 80 men is going to be about 2 to 1. That's a stark don't change. Say we get, uh, double, and you can take that double. My, um, do with the set. State se takes direction and say, handle selection, right? I'm gonna copy and paste ease three times. So and I'm gonna tell you quiet infection. You know why, Okay. And, uh, no, we are. Oh, well, we need to do is just try to build and what? See if it's gonna make if it's going and it or forget it, that's running the bill. Now me and with the build completes, we should see our loading and, uh, basically creating you sliders. A couple of controls on the screen. There you go. Right. So this is our fire. And if we would it as you can see how sexy you are getting live a saying here. Yeah, Yeah, I The reason is actually changing its the transform and conflict. You know, I'm sticking to the same tough woman. Taking the effect is basically because we haven't set on the ST toe Identity wants release . And that is something that can try on, I think, taking charge and basically make it return to its to make it start from the original state . I think all you need to do for that is like separate out the handle selection and rotate them individually. Right now, we're actually worked them all together, so yeah, try to mix and match and see, like, you know, if you can create some cool efforts, but I want to show you, like you know, how you can apply Transforms on any off the element. Or And you can use that with the slider and basically on the move to cyber in James, our values to steed effect. OK, so I hope you guys enjoyed distribute me and bubbles to you guys and next week Thank you. 53. New: Flutter BusinessCard: Hello and welcome back. And in this video, we are going to starting off some of the planter examples high, and we're gonna be creating ah, sort of full fresh project to combine everything that we have learned together and build solve the projects. Okay, so let's go ahead and get started. Eso in this, uh, project we gonna be creating a business card kind of snap. Eso uh, for that, we're gonna need some custom farms and stop. So you're gonna learn how to include custom funds and into Europe and also how to add images into assets. Okay, so let's go ahead and get started. Eso posting them would do is I have this stop bare minimum project open. Like there's nothing into it after leading even the default code. Eso you can see, like, you know, I'm getting an error. Uh, but first thing we're gonna modify, it's gonna be bumps. Uh, bus back. Yem Oh, file. Okay. And what we do here is I'm gonna actually remove all the comments, so begin. Have I'm still a lot of comments in here that offered it, actually adds, And, uh, I mean, if you need to restore these comments simply create a new project, and and they're gonna be there because that part about polyp or boilerplate coat Okay, Um, all right, these are examples for funds, so just leave them here because you're going to see how fonts are basically reference. Toki. So I'm gonna pace that, Uh, I'm going to say that, and, uh, next thing I'm gonna do is we're gonna go to this website Google Farms so far in start google dot com. When you go there, you can actually land on this page right here without filter list. So quiet start Gould outcome. And then was he land here? You can actually search for funds. There are a whole bunch of for consoles fronts that has provided for free, and we can use these funds, but we are interested in handwriting category. Okay, so we got a subject that so handwriting, and then you can scroll down and you can choose whatever you want to, but I chose to satisfy I sort of like, you know, like the way it's actually written, So we're gonna use this one for our examples. Okay, so So go ahead and download that farmed once you have downloaded. You gonna be able to extract that? And what you will get is it's two files, actually. So and those two files are gonna be basically they can now look like it's there's gonna be a t i f f file and there's gonna be a license. Oh, like this. Okay. And is it a party license? So basically, free to use disorder is So what we're gonna do next is we're gonna come to our select a problem. Becky m. O. And because you're using visual studio code, we are simply going to click on this add new folder, and we are going to add a directory called fonts. All right. And next, How are we gonna basically drag and drop our front into that? So we've added that front, and, uh, we don't display it, so that's fine. And here in in pop up spec docked. Um Oh, file. All we need to do is we need Teoh. We need to uncommon this. Okay, um, or we can use weakened copyists in used today as an example. Um, yes, I'm comment because that way you can see the hierarchy. Okay. So as he noticed, the hierarchy is you have flutter used material, design shoe and on the same level. You have this fonts, right? So because the fonts older that we have created Okay, so that's why he says farms. And then you gonna say families or family, you can specify the name, so satisfy. Okay? And then you give the font fun name. So you just see funds And, uh, that's your funds and satisfy regular start TTF. So that's the file. Name that fear reference. So if you have more more funds, he can actually simply add them here. Otherwise, you can remove all that. Okay. So make sure everything is correct. Any are extension is gonna run, and everything gone look good is the letter. So we are good here. Right? So that's one part. Now, let's go ahead and add in little folder on. We're gonna call this one image, his images, okay. And it's called a Yeah. Media is actually majors, and we're gonna do is I'm gonna basically no dragon drop a logo, any image that you might want. I want It's lower here, so I'm gonna use that lower, okay? And I think I believe I have another mobile year Yeah. So let me use the other one. So could delete this and bring another one. Okay, drop it right here. And less really in this rename. No. Go, Maggie. Something simple. Do type. All right, then go back to Europe. SEC thought Thiemo pile and, uh, right above your fund. Um, gonna hit one tamp and, uh, basically gonna say, Oh, assets. Okay. And your assets are gonna be images before dhoni slash local knock pmt. Okay? And he say that and, uh, here, but fact is gonna get its gonna run how to make sure everything is correct and all the dependencies are resolved. All right, with that, I think we are ready to jump in. It's the next up. How are we going to go to our clever may not start and fix up to stir. So we're gonna do is we simply say run app, Okay. And, uh, this will be a material. Yep. All right. And in this material that you're gonna have home and we're gonna have scaffold, Okay? And scaffold is gonna have a child. Are tight bank on color, and, uh, colors don't sick orange, and then we're gonna have body for the scaffold, and here we're gonna have safe area, okay? And the safer? Yeah, it's gonna have child. So let's go ahead and bring that to new line. And this child is gonna be a column. Okay. Column. It's gonna have Children. And, uh, okay. And Children is going to have a circle avatar. Okay, this is basically to show a circular image that we gonna show. OK, so settle left are it's gonna have radius off about 50 points and you're gonna have a background, and we go choose background image going to say asset image, and we are going to give our path images slash lo dot BNG. All right, so that is our image. We should see some some sort of image. Years of winning run. So go ahead and run your project and wait for bills to finish, and then we gonna see We should see a circular after inside. All right. All right. Let's give it so X codebuild is running. In the meantime, we can talk what you're gonna do next. So we're gonna have, like, in a couple off text boxes and a couple of text Richards and those text messages are gonna basically have some Texan. It sort of like, you know, your business card, your name and your your company name or your any other company, Moto or something like that. And then and then we're going to show the phone number and even at risk for the company. Okay, so that's what we can actually create. And that's where we will use our, uh, are newly added fund that we have added in our perfect. So you can see how you can use our own farmed in this scenario. Okay, so Bill just finished running, so we're gonna get okay, then go. So we have, like, as against you be how are made showing up in the circular in this circle circle. Loved out are right. Next up is outside. Your circular out. Are we going to create a text? Okay, now this text is going to be some texts. I'm gonna say them take e. I see, for example, and we can style dis text with style and the stakes textile. So you gonna take that? And we are simply going to Okay, so file has Syntex enters. Okay, basket. Um, we can fix that. We can simply say font family. And here we can actually apply our farm family. So satisfy is our foreign family. And if you remember, um, let's go back to our up spec don t ammo. And this is the family name that we have given for this for. So that's what we can refer here. Okay, so that's what you're referring like, satisfy our foreign family. And, uh then next up, we cannot simply defined the fund sighs and font size is gonna be 32 anarchists color and color is gonna be color stark white. And then we're gonna stay front. Wait and ponte weight is gonna be font wait dot bold. All right, so let's go ahead and do reload on this, and we should see our text appearing at their nice and easy. All right, next up, another text. Okay, so that's Ah, wrong place. This is our text descending so we can say another text here. And ah, this is where if a company motile is gonna come. So I'm just going to say of learning, made easy that and then we're going to say we also on a provide style, this text style which is gonna have fund family, and this fun friendly is gonna be satisfied. Now, you can have different fonts created for you and, like, you know, included in pubs back document file. And then he can use different forints if you want. I'm using same form, but you're like, you know, I would increase you to actually include multiple funds into your pubs back as a challenge and and see if you can actually make that work. Because that's gonna be a fun experiment to dio that we're gonna wrap this by saying far size is going to be 24 in this case. And then are we gonna say letter spacing is gonna be, what, three points and a color is gonna be color stock? Quite. I think that, um, color start white. Okay. And, uh okay, so let's quiet and real one more time and see if we have our So there you are next set of next text and this line of Texas showing up. So we're gonna take this and we're gonna add another regent here and this time gonna add a card. Okay. To display phone number and email like a doctor, Bob. So I'm gonna say card. Okay, card has, um car takes a color to, say color dot white If you if you want to, Basically not to find a color here. A body full calorie. That car is off white color color's don't white like that. Hey, and there's some quite properly, so this ah, child is actually a car, But let's put margin also, so margin it's gonna be it is and insects dot symmetric And we want to provide a symmetric margin for or giggle space with 10 points and horizontal space with 25 points. Okay. And then gonna have child, which is going to have a batting read it, which is gonna have padding and batting is gonna be edges inset. And we're gonna format in a minute 0.0, and we're gonna say 10 points. Okay. And, uh, all right, and card requires something. So card as car has, like, you know, this child, so child is added and, uh see. Okay, so let me let me type it out. Okay, So we're gonna have this and, uh, does this sort of child or the padding and padding is gonna have another total mental element is gonna be a role and that is going to be a Bridget. Hey, for writing is still not kicking in. That means, yes, some few more errors. So we're gonna say hi contact for icons. That phone actually. Good enough. Okay, so let me see if I can actually, or sore matted. And then then we can a deep oak because Linus getting really long. Okay, Now that you have padding curry and you have child for this one, it is a role. Has Children or Bridget and OK, average. So Okay, I see. Okay. Uh, scrap everything. OK? Hi. Um, so for our card, we have our color. Okay, We have margin. And your child a child has a patty. Okay, so child has batting, right? And, uh, then padding has its accord element petting now and then another child up for roe, which has which it icon An icon. That phone and color. Okay, there's something player. So color is gonna be colors. Start orange. Okay. So what? What are we missing? Um Okay, peak. The problem peak in the poem position argument must occur before the named argument. Try moving all the position arguments before the named argument. Okay, let's see what we have as a positional argument, right? So close is we have our color. Oh, that is because I may have a stake in the hierarchy. This guy needs to go out off next. It's not about of text. It's out of text. Okay, there we go. All right, Stan. There, that's better. OK, so that's where we made a mistake. I actually put it inside the text. Okay. Anyways, um, it's good. Um, we got firsthand experience off debugging an issue. So we have a Nikon and next to our icon, we are going to have a size box, okay? To get some spacing. And South Box is gonna have a bit of 10 points like that. And, uh, then we're gonna have another text, and this text is going to be the phone number that we're gonna just place I'm gonna save. Plus one by 55 I thought about you. I fight, fight, fight like that, and we're gonna do takes out do textile on this text style like that, and textile is gonna have color and color. Start arrange dot Let's give it a shade off. Maybe for 500. Okay. And, uh, next up is fun family. So let's give it up on family off. Satisfy, Make that. And we also gonna give phone size often 20 points, maybe. Okay, that's perfect. Let's quit and reload. We have typed a lot of code, so let's make sure we have everything in There we go. This is how our how are business card looking How it's looking pretty good. Okay, so that's go ahead and add another card. And this car is going to be The email is gonna be the last element. And, uh, and then we can I simply say color, but this one is gonna be colors, not white. Okay, origin is going to be edges insects dot symmetric. Okay. And you're going to say article it's gonna be 10 points in horizontal is gonna be 25 points , and then we're gonna give child property and can add padding, okay. And patting a quiets. Patting basically as a first property are one of the one child Children element with the argument hand and to then said it's gonna be dot Uh huh. 10 points. Then we have a child which has a role. And inside that role is gonna be Children. That's gonna be in a really rigid and here we're gonna once again, uh, you are icon. So icon stopped E mail, Okay. And then color it's gonna be color Start orange, Okay. And, uh, next element. And this is going to be a size box, which is going to have a bit off 10 points and then a text widget. It is going to have email. So I say gmail dot com and then you have a style text style in this textile takes style type color, just a color. And, um, color is gonna be color stuck orange stunt shade 500. So similar shade but Bali and it's gonna be satisfy. And, uh, and then point size is gonna be 20 points. Okay? All right. So let's go ahead and do a heart reload. And, uh, we should see are two text boxes. And there we go. There. We have our, uh, full fledge business card already. Okay, so that is actually great. Andi has, like, you know, that has, like, you know, pretty much everything that we need. Now, let's go ahead and basically modify this Ah, little bit because one thing I want to do is our not I wanna make this center okay. Centred on the on the x axis. Okay. So basically, I'm gonna I'm gonna center it right here. Unwise exit study on the y axis. I'm gonna center right here. Okay, So for that, all we need to do is most well check out our column. Okay. In club has a argument how that is called main excess alignment and form a nexus alignment . I want to say it needs to go center. If I do, we note there we go. Say it actually sits right in the middle of the screen, so this could actually work like you're about screen. If you are creating an app and you wanna create about screen, you can have that. Okay. Now, the other thing that he can actually sort of remove is you don't like that you don't need a color and less. You wanna provide a different kind of color for your card. So you simply going to remove that? Okay. And, uh, you're gonna remove this color, It's all okay. And go ahead and do ah, reload. And nothing changes. Right? There's one more optimization that you could do. So you already seen row, and we didn, like in a padding and everything. Right now we can replace all this with a list style, which is so we can do is so we can take our card and for wherever the padding is ending that go. So I'm gonna cut the panic back, patting out from here and we are going to basically put are list style. Here is a list style widget. Okay? And we're gonna have a leading, which is gonna have I consulates style has leading property that takes some of Egypt's. So we're going to say I can't start phone. Um, yeah, this on those phone, and then we are simply going to say color is color. Start orange. Okay, so that's our leaving element. And then we're gonna say we have title for this lift, and the title is text, Okay? And the text has the property. I mean, the text that is written, So plus one I fight. Okay. And then it had the style text style. So and textile has color. It also has want family, and it has on size. Okay, but that let's go ahead and hard freed owed and see the difference So what we've done is, instead of creating our card, we have created ourself a list style and is conceded There is a slight difference between height because it has a preset padding and margin and everything along, um, along the like, you know, along the tile itself. So and it's kind of like, you know, looks rather nice. And you can imagine, like, you know how much gold we have released. Right? So we're gonna do the same thing here. Okay, So I'm gonna What I'm gonna do is that this time I'm gonna cut I I can't in text out, okay. Like so And then Rahu padding Parliament. Then once again, we're gonna add list tile, Okay. And a list style takes leading, and I'm gonna paste bust in the move. Remove size size box, okay. And cut text one more time, okay? And so we should have, like, you know, this style with an icon. Just a Nikon like that, right? And then how are we gonna simply say, title is whatever we have in our clipboard? Right to gonna coffee based or no type? And there we go. We have restored our car back in like You know, it's state as looking you and nicer because you have a fewer lines off coat by using this a new list reject list that with it that we just integrated. Okay, so that is it for this video. And hopefully you actually learn something new in this. Basically, including in you Fund and creating a practical example are off out of this while learning something new about floaters. Um, widgets. Okay, so, yeah, this is it for this video and other things And watching aval, you guys in the next video and other deal, we're gonna be creating another small project to basically cement all the concepts that we have learned. Okay, So I'll see you guys next game. Thank you. 54. New: Flutter DiceGame: Hello and welcome back. And in this video, we are going to be creating a dice game. SSA. Basically, we're gonna be, uh, uh, rolling some dice and generating some random combinations from II. So we're going to see how begin up, combine simple images to create a very simple game. Okay, so let's go ahead and get started. So what I'm done is of downloaded six dice faces from the Internet, as you can see. Like, you know, they're like 123456 representation off 6 56 different faces for a dice. Okay? And that's Ah, have. So you go ahead and download for Black. You know, thes from the Internet. Next thing we're gonna do is we're gonna take our prospect out gamma file and can remove this local dark PNG. So that's amusing Cree Sosa from last product. So that's why I am removing. But if in case you're reading a new project, you're not gonna run into these things, but make sure you have assets added and images are basically as a as a folder. Okay, um, with that we are ready to roll, get We've got everything that we need her for us to create our game. So let's go to our main file me and our heart. And here inside this, we have created this material. Have scaffold background listlessly back on us. Um, orange. Okay, lets to orange shade 50. Okay, like shade 50 because it's a little bit light. Okay. And, uh, then we gonna basically have at a bar. So let's create an app bar, all right? And this emperor is can have title entitle is can I be a text that it's going to stay dice game like that? Okay. And then out. We are also gonna have a background color for death, and this is gonna be colored on orange color Start orange start shade fifties the same color as we have here for the background off the beach. Okay, so let me go ahead and reload a lot of things that have changed. So let me stop and to ah, full built. Okay. Still times loading our let's discuss what we're gonna do is, uh, in this case, because we wanna keep the state and we want to modify the state in our generate our random numbers for dice faces. What we're gonna do is we're gonna create a state full, we get okay. And the state full rigid is basically going to help us keep track off. What kind off number hard is getting generated. Okay. And then we're gonna update our image depending upon what kind of number there was generated by random number Library. Okay, so it's still building. So what I'm gonna do is I'm gonna take this an import dark, dark math as well. Math said you type math. How you gonna import dark, dark meth? And then we're gonna have, basically don't creating. So let's go ahead and create our state. Full digital gates are, which is launching. So let's see what we have God going on so far. So there we go. Um, well, 50 shades is so it's a little bit to light. Okay. Me do a 300 can see how that actually works. 300 is better. So let's keep it. Has too. And it OK, eso decks next up is basically gonna be body and body is going to be a dice game. Okay. Hey, we don't have that die Skin created. Yes. So let's go ahead and create that. So we gotta say state for which it okay and again se dice game. Okay. And that is going to create our state for widget and state as well. And inside the state, we need two things. We need an integer or left dice, and this is gonna be a random number. So we're gonna say, random dot next in teacher, and it takes a maximum printer. So we're gonna say six because they're six faces and it runs from 0 to 5. So we're gonna add one to it to get, like, you know, 1 to 6 values, because our images are 126 Okay, then we're gonna have our dice right hand side ice and, uh, once again, random stop. Next and again, six plus one. Okay, The same thing. We're gonna get to random numbers generated out of this. Okay, We're also gonna need a helper function that is going to update our state so we can say white update dice like this. And, uh, this is going to say simply have held I so left ice it's equal to We're gonna call the same thing that it just update the state. So we're gonna simply say set state and, uh, I'm going to remove int from here because they're not creating. We're setting leptin, right dice states. Okay. All right, so that's all about the helper. So let's go ahead and build our build function, okay? So we can return a centre. Reject. Okay, that's another way to center your content at the center. Rejected. It's gonna have a child off type role, all right? And this row is gonna have Children. That's gonna be collection of Regent's. And what we're gonna use is something called Expanded. Okay. So expanded. Make it. And this expanded Redoute, it's gonna have a child after I pop flat button, which user can click on and then we're gonna have own Press state for this. And this on press is going to be a function that's gonna call update dice function that we have created okay to generate random number. And it's also gonna have a child. This child is going to be an image. Okay, And this image is gonna be asset image with, uh, images slash, huh? Dice. So that's actually our path to the image, But we're gonna use dollar sign basically, to refer to our to our local label, So l dice like that Dr Ian G like. Okay, so that is going to give us dies at the random number that was generated for us and and our PNG so strengthen cognition is what we're using. Now that is our one expanded job. We're going to create another one, which is going to show us another image. So second face off dice and you can add, like as when he dices you want we can. We're gonna have to dice on our have in our game to make it more complex. Like, you know, predictions more random, um, flat button and a flap of skin is going to have bay on Press, which is also again gonna call update dice. So it's nice that we have actually grabbed all this a place state said state property into a function because you can simply call the same function from reckon places so we don't have to litter code a whole bunch of sim, same looking code properties and stuff like that. So image is gonna be asset Umit and, uh, it again, I'm gonna actually copy this and paste it right here, and we're gonna say our dice instead of flat guys is gonna be right dice, so that lets go ahead in and run this. And, um, there we go. We have our two dice and Renate when a top on it Here they go. As you can see, you get a random number generated for you. So that's how easy this to basically get your random like, you know, elements are created. Okay, Now, flat buttons usually have some more properties. So let's say like, you know, there is a There's a bullying property that actually are color property that highlight color. So let's see is hard color colors a transparent? Okay. And, uh, we are gonna need Let's see, you know, quite colors does a trick because I want to see. I wonder who that material design. Okay, so we don't have, like, highlight like, uh, like this one. As it's highlight detergent happy only has to have this somewhat general design ripple effects. So let's quit and see if we can find a property to remove that evolve to be have what in the property you have on Oh press. I like change, color, the stable text color. It's tables, color, focus, color. We refocus color. We can try a splash color. We can try Splash color, actually. So the strike splash color colors Dr. Transparent. Okay, Garden reload One more time. And, uh perfect. Okay, so we have thes two colors that we need to set for our that button right here. It's well, and we have a game that actually plays and generate her random predictions for you. Okay, so that we go guys, we have created a very simple dice game, just few lines of gold and few with the help of few images. So that was another example I want to show you, like you know, how you can use power function, string concatenation, flat buttons and stuff like that. Combining all those widgets to create something amazing, really easily. Okay, that we are done in this video. And in the next video, we are going to be creating another example. Um, where we gonna generate some more random numbers and going to see a different kind of game . So I will see you guys in next regale. Thank you. 55. New: Animated Age Calculator: No, no, Mac. And in this video, we're going to be creating another simple scenario. We're gonna be producing Age Kappa later. Okay, so let's go ahead and get started. So I got a simple find created here. It's a simple Skaff hold heart has been created for, but it up into the home page here and gonna build upon this. Okay, so let's go ahead and and get started. So nothing we're gonna do is we're gonna have this home page and that extends the state. We gonna also say it should extend with single baker provider state makes it okay. And this politically provides a single ticker that is configured for online, like, you know, only one taking in current tree. And this is something that we're gonna be using with animation control. But that's what that's what we needed. So let's go ahead and create some for labels now, and, uh, gonna create a double both for double type people or age. And, uh, we're gonna create selected a year, can create animation animation controller, all right? And we're gonna overwrite the in its state. And in this let's remove the comment. And, uh, we're gonna any slides super Any state we're gonna call that, and then we're gonna say any animation controller and equal to animation controller and the stakes we sink, we think it's gonna say it's gonna be deaths. So this class and duration is gonna be in milliseconds so many seconds. 1500. Okay. All right. And that are in Each state is finished, though. That's all we need for in state. Let me increase the front of it. Okay. Very perfect. Okay, so, um, and next up is gonna be disposed, so we're gonna say disposed. That's all right that are able to comment. And I suppose you're gonna call Superdawg. Dispose at last 10. Dispose are animation controller, and we're gonna call Dispose on that. Okay, so that's kind of weird. Disposed, then. Next up, we have a helper function that's gonna show a picker a date picker gonna stay underscore. Show picker context is gonna be context. Initial take is gonna be daytime date time. Not now dot Here and then next element. If the prostate, the frustrated couldn't be daytime 1900. So it's gonna go back. I'll go back to 1900 for this color picker. Oh, our daytime picker and latest is gonna be daytime dot now and disclose. OK, yeah, it's all going to get ready and they go, OK, and then we're gonna say or are date picker we're gonna didn't say then and, uh, this gives us the daytime while you so being get a time, right? Well, you and, uh, we are simply do count late Selected year from that. So we're gonna compute. Are we gonna extract it from the date time values? They're gonna say, value dot Yeah, that's being selected by the user. And this is going to call another function called calculate Age. So I can't wait. Age beyond created that here. So misguided. Create that next. No, simply saying white Catholic age. And here we're gonna call on Steph State and, ah, this set state is going to cost set the age So you gotta say d tender. Now that here finest selected year, don't do double take. That's gonna get us the age but the animation we're gonna simply say it's gonna be Tween and from the begin parameter, you can have any we should not value. And on the end printer, you say age and we're gonna animate that with curb animation. Carbon mission. Okay. And, uh, with the current value, we gonna simply say, Carol not best out. Slow in errant is going to be animation controller. Okay. All right. So I, um, by not taking that one, Okay, so let's make sure on her records. Incorrect. So we have the Yeah, the animation hand that is between animation, right, double and begins with animation doctor value and answered age. And then we any weight? All right, create are curved animation, which, actually as curve and takes color printer plant out, and it takes fast out slow in. I see. Uh, am oh, co start nice. I was se okay. Animation controller got forward from this is going to start from And, uh, next up is our builder. Okay, so our builder is gonna be a simple do you get to create a scaffold first, Okay. And, uh, their scaffold is gonna have app bar ap bar, which is gonna have a Michael that is going to be a text widget. Cow liqueur h Okay. And I'm gonna put in a rage emoji here, So if you're on Mac control commands, space space is gonna get you the emoji, so just select anything that he like. Hand down, ala. Okay, now it's kind in state this so everything is formatted, and then we're gonna have our body. This body is going to be center, and, uh, gonna have a column. So ask you a child and main excess main access alignment is gonna be main excess of I'm in Don't center. Okay. And, uh, then it's gonna have Children, and that's Children. And it's gonna be collection all widgets, and they're basically gonna be some divisions that we gonna ask either of their input. So we're gonna ask, we're gonna create a on I'm playing button that's gonna say, select your policy error. So let's create that so outline. But it's gonna have a child and, uh, shall is gonna be a text just as a selected year is not equal to No. Then sure selected here up to a string. Otherwise no select earth here. Thanks. So Okay, so that's what that's what we're gonna show in the text. And, uh, and then you have your, uh we see a plane. Okay, your order site and porter side. It's gonna be border side with color and color is gonna be color Start black. And what is going to be two points? Okay. And next up is gonna be color, and color is gonna recall her start white and own press. We are basically gonna call show picker without Britain sees. All right, so that's gonna be our on press, and and we're gonna have a padding widget. Just simply gonna have padding for edges. Oh, about 20 points. And, uh, mix up in the last seven went we're gonna have is gonna be animation builder. So a mission builder and the stakes animation, and it takes a builder, all right. And this builder is basically yeah, we see you say context and child, but you can use for your text and say your age is a dollar animation don't value. Don't do strain as Bakst. Okay. And, uh, in the skin or text e style so you can assembly safe style or textile, right? And then on size it's gonna be 30 points. Don't wait. It's gonna be fund wait dot Bold in front style. It's gonna be font style. Don't italic. Okay. All right. So let's see what we have. Why do we have this quickly, right? So saying animation built her an immediate builder. Always get. Okay, We in animation builder and Hanya waited building. Okay, so that we have our Rh count little ready. So let's go ahead and run this and see if, um, if we have a meeting safe. All right, So we're gonna run this on this iPhone 11 pro Max simulator, and, uh, it's gonna launch it pretty soon so we can actually take a look as a heart looks OK, so just give it a minute, and, uh all right, so So this. It's launching right now, so it's running that escort build as to okay? These are old errors. All right? I need is important to do. We have any is important. No. Okay. I think we should begin cold. So let's wait for one war minutes. Almost done. Themes. See that? Develop? Console? Yeah, it's launching now, so All right. You know, buildings down. I took 49 seconds to run the built and built succeeded so we can have our app launched now . So there you go. You are Afghani installed, and it's launching. Okay. So never ask. I don't want open all right. So we haven't there, and we haven't enter on. And Mission is not equal to know is not true. OK, so So I only made a mistake. Years selected the leszek. Look, we are getting position 15. Okay, The position 15. All right. Um all right. So there was one mi