Getting Started With Flutter | DevTechie Interactive | Skillshare

Getting Started With Flutter

DevTechie Interactive, Learn new everyday

Getting Started With Flutter

DevTechie Interactive, Learn new everyday

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
47 Lessons (10h 35m)
    • 1. Introduction

    • 2. Flutter Installation

    • 3. Configure IDE

    • 4. Dart: Getting Started With Dart Variables

    • 5. Dart: Collection Types in Dart

    • 6. Dart: Functions in Dart

    • 7. Dart: Required Optional Named Parameters in a Function in Dart

    • 8. Dart: Functions as Parameters and Anonymous Functions

    • 9. Dart: Conditionals in Dart

    • 10. Dart: Loops in Dart

    • 11. Dart: Switch Statement in Dart

    • 12. Dart: Try Catch Finally

    • 13. Dart: Enumerations

    • 14. Dart: Classes

    • 15. Flutter: Material App & Scaffold

    • 16. Flutter: Container, Center and Text Widgets

    • 17. Flutter: Floating Action Button & Bottom Navigation Bar

    • 18. Flutter: Row Widget and Expanded Widget

    • 19. Flutter: Column and Padding Widget

    • 20. Flitter Image App - Flickr with Flutter

    • 21. Flitter App Creation

    • 22. Flitter: Creating Material App

    • 23. Flitter: JSON Data Download

    • 24. Flitter: Display images in card

    • 25. Flitter: Add Pull To Refresh

    • 26. Flutter Calculator: Stateless vs Stateful

    • 27. Flutter Calculator: Home Screen

    • 28. Flutter Calculator: Input Fields

    • 29. Flutter Calculator: Calculations

    • 30. Flutter Calculator: Functions and Finishing the Calc

    • 31. Flutter iMovie App Demo

    • 32. IMovie App Creation

    • 33. iMovie App: Getting JSON Data

    • 34. iMovie App: Generating Model Classes

    • 35. iMovie App: Creating Main App and Setting API Keys

    • 36. iMovie App: Home Page

    • 37. iMovie App: Downloading JSON

    • 38. iMovie App: Movie Cell

    • 39. iMovie App: Movie Detail and Wrap the App

    • 40. New: Flutter BusinessCard

    • 41. New: Flutter DiceGame

    • 42. New: Animated Age Calculator

    • 43. New: Tic Tac Toe Game

    • 44. Flutter2020 Staggered Grid View

    • 45. Flutter2020 Animated Pie Chart

    • 46. 2021: Instagram Home Complex Layout

    • 47. 2021: Pomodoro Timer App

12 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Build apps for iOS and Android using Google Flutter but why stop there now Flutter can run on Desktop as well.

Flutter is modern way of developing cross platform apps for both Android and iOS. Flutter allows you to build beautiful native apps on iOS and Android from a single codebase. Well it doesn't end there Flutter can now run on Mac, Linux and Windows. Google's new Fuchsia OS's UI runs on Flutter. So if you learn this platform, you are not only learning to develop mobile apps but you are learning to develop on more than 6 different platforms with code that has single codebase. Sounds exciting then join me here to learn about Flutter.

Meet Your Teacher

Teacher Profile Image

DevTechie Interactive

Learn new everyday


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: Hello and welcome to this new course on getting started with flutter. And this ah gets you have you can be talking about flutter Ah ah, new our baby Not so new eyes Bean. Probably a couple of years since Google announced it, but it's been in beta and recently Ghoul has actually published its one dot all release, which is a really big news. But Flender already gained a lot off attraction when it was actually launched yuan in beta and a lot of people actually started using that. Um well, if you're new to flutter, if you haven't heard what Flandres How Here's Thea A little bit of intro for you So flavor is a mobile app SCK And it is a new way off building beautiful native mobile apps that break away from your quicker APS are that you actually, uh, create how commonly So people who tried flutter really liked it, and that's when it I actually started becoming ah and taking the Internet by the storm or basically have development community by the storm. Um, when a lot of people actually started liking how fast it is actually to develop on entire app for both not only for our I less but both Android and Iowa's from the same code base out. Now. In past, there has been some, like, really popular attempts. For example, um, initially there was a view when you had, like, you know, Web integrated are like a a web. You integrated inside your native app and you create STM l pages estimate and CSS to basically pretend to make it look something like a nap. But, uh, that attempt, like you, now have like, a lot off issues because it was jealous Scripture was running on left on on the Web browser inside a homeless web browser shell. It had, like, you know, all kind of performance issues and everything. Phone gap, a particle. Goff, Ionic and others fall into this category. Uh, then ah, you had off. How React? Yes, basically react native. I try to do same thing a little bit different approach, but again like it was, it was a react J S. O r. Talisker place framework that would actually create a bridge between your native code and ah, your code that he had written in javascript. And then take that and converted and do something in app that again, like you know, has its own issues, like, you know, but it really depends like, you know, situations. But, uh, you you most likely not going to get, like, you know, native performance out off it. So you're most of the time you're left with either hot doing native development for both IOS and Android separately. Or you would attempt to go in third direction, which was xamarin Microsoft offering for a cross platform development for IOS and Android. The code that you write is in C Sharp, and Samrin comes from one of the old project called Mono. And that project was have promoted into xamarin and they created SCK. Seven is pretty good. It's all native of the only issue is it's actually basically because their sin c sharp There's a new language Children for a lot of people who doesn't know. Ah, and the other thing is like there's a lot of set up and its third party offering. So Microsoft is gonna offer that to you on and then then yesterday, building combined and everything so. But it is actually next to the native what we have. It's a little bit of learning curve. But then, like, you know, you have another choice doing lady a few under cross platform. You do. You would do salmon. But then Google came out with flutter. Now flutter is written in dart and the the language that you right? I mean, the language that you write, your code hidden is start. And once you right here code it actually gets converted into basically into Iris in Andhra Nap. It's just like react. Native further also provides a reactive style off views, and Florida takes a different approach. Basically, toe performance problems caused by needing need for a javascript bridge, huh? Read. Get off The admitted by using compile programming compile programming language, Which is why they used dart on a dart Actually does ahead of time compilation for native code for multiple platforms that actually does ahead of time compilation for IOS and Android and creates native courts for this basically allows flavor to communicate with the platform without going into the JavaScript bridge. And do that context Switching now compiling into native code awful improves the start of time and a performance. So for that reason, her the uh huh, this is this is one of the fact that how ah Florida is the only moralistic A that for wide that provides reactive use without requiring gyroscope bridging. And, um, basically, it's ah, it's very interesting and faster Teoh to develop all the you I even though the u I most of the time you guys developed on them code, but it's actually really fast. Flutter implements are something called regents, and basically, we just are just like a reasonable views he can say on. And those are elements at that effect and control your views and interfaces for your app. And it's basically it would not be an overstatement if we say that savages are one of the most important part in a flutter mobile app on and visit alone can actually make the entire app right. So which it is your look and feel forget, actually has ability to, uh, be marginalized, can actually work fast and independent thing and actually plug and play. It is extensible. It is customizable and several of several other things. Okay, so, like I said, Google, actually, this is Flores front that I hope this is Google Self Main Florida rep site, basically the only best site. Ah, that Google ads like for flutter. There must be some other, but later it This is further now, floor allows, Like to say to build native APS How would native performance for both android and IOS using single code base? All right, if you're how coming from other platform, they actually help you translate your knowledge. I feel coming from IOS android Web react native xamarin that we're talking about just a moment ago, how you can actually watch and basically look at the documentation and sort off transfer the knowledge that he have gained into flavor it. Flora is fast, faster development because the sdk actually is. First of all, is compiled ahead of the competition and it actually has everything all the basic, uh, all the basic needs for a for a framework to run packaged inside that it's again that's sick, actually is included with the app. Now for some of you her, that might be well, why every including a a full sdk into the into the ab? Well, because it actually that's what the meat off Thea issue is there because you're not for lying on any third party like job Skipper reviews basically going Teoh package that that's the Guinness tickets can take care off, executing your code so you can get, like, you know, faster performance. Um, but they instigate is not that big. Just say, you know, like, you know, most of your abs are not even going to notice. Like, you know, it's about seven, 28 megs and most of perhaps are not even gonna notice if you're creating a medium off like you in a simple app. Actually, um, it's not gonna have, like, much of a space impact are like the size impact my new sides, in fact. Okay, it's ah, it created a flexible you. I It's a layer architecture. It's based on Morton looking feel material design. It has native performance. You develop it for half, so basically you wants to launch it. You actually leave it there, and there's something called fast reload or heart reload and yeah, s. And as you save your content that you have actually updated year, um, ap reloads and basically just displays you what has changed, which actually makes out the development a lot faster, rather than like, you know, running it and building it from scratch it's ah, a express based on expressive You I material designed on, uh, basically Cupertino. I was level Brigid's as Google talks about it here, and they showed him a demo right here. Some of the after that have been built using clutter. It's a native performance, so it's fully integrated on everything you need to run flutter. It's inside the app, so you don't have to rely on some other third body things are some other dependencies for it to build and run? How? Which is what gives it such a great performance. And there are a lot of freezers if there are a lot of companies that are using it and basically he can actually start looking into sound their videos like you know how to how to set up. So they have, like, a really nice that nice community around Ah, flutter that actually talks not only talks about what displays like, you know how you can get started. If you're coming from IOS or Android, um, any of those places, then it would actually help you. That community is gonna help you translate that knowledge over a stack. Overflow is growing with floater questions. So there are a lot of questions that have been asked about flutter. So that actually itself proves that the adoption has been a really regaining, successful. And which is why, um how cool is seeing this explanation? Growth and the flutter build APS there, like most of the abs are actually a lot of the abs are built using a flood. Okay, so I hope that actually gets you excited and basically interested to learn a bit more about her eso unless happened and get started and use later. 2. Flutter Installation: All right, so let's talk about the installation, which is very easy. So I'm gonna click on the get started button, and, uh, it takes you right up to the stall screen. Um, now, I have already installed it, but ah, the installation is very easy either. Like in if you're on windows on Mac or on Lennix eso for windows. You simply download this sdk, you extract it, and then you run and this back Ament fluttered, counseled at bat, and then you update your path. And from here on, it's actually very similar to all platforms. You run for a doctor, which actually guides you what you need to do. And it actually gives you, like, step by step instructions on what to do next. Basically to do, uh um, to basically is, for example, and so entering a ck how to install under arrest, ikea And, like, how created him a little and everything. Now, clinics has a similar process. You actually download this flood, arrested Kate, and you extracted you update your path, and then you don for a doctor again. And then for the doctor actually tells you what to do. Okay, I would actually um, for Macca. But I'm using Max. I'm gonna actually use show you here. But there's one thing I would actually recommended you doing if you're using, Mac is if you don't have already start homebrew. Most of people have homebrew, but just search homebrew on Google and install it because home brewed, it's going to basically help you. Um um get these dependencies result very, very easily. Okay. Homebrew is Ah, third party. Ah, packaging package. Uh, repository. So let me see Homebrew. I'll show you where it iss Okay, Homebrew message heavy. So there you go. This is home group, and yeah, it's a surprise. He is. Ah, third party package home reports. Really? So you get, like, you know, packages with their own directory and everything, and you simply install it using this command. And from there on, you simply say brew, get something brew, get this will get that and then actually created for you. So just follow these, um, these instructions and do a little bit of ah, read up about it right here. But hunger is a great tool for all your development needs and dependencies from the libraries and stuff like that, because it makes your task off installing dependencies so much easier. It's much better than easy install our fighters papering things like that. All right, so it's really gonna download her the flutter Micro s stable release, and then you're gonna unzip it. Basically extracted talents, had the folder. Um, from there on, wherever you have extracted out, you can export the path. Ah, to your path. So So when the path is added, basically, what's gonna do is it you're gonna be able to run flutter command from anywhere. It's idea tunnel of basically from any folder. Now, this actually does not add, um, year. It does not add flutter to your path available like in a permanent bypass. Very well. Permanently. So what you need to do is are you to go in this update your path? Um, link And ah, you're simply going to go to your home directory. Open that bash profile. If you don't have create one, um, then you simply take the path to the flutter sdk directory. And remember, I not only the directory where you have extracted flutter, but go inside. There will be a flutter folder and, uh, get to the been so Ah, your location for the s e k. Slash Further slash. Been, Make sure you can never get to death using terminal and then create this path. Right. So create a string export path is equal to dollar path colon and then passed to your flutter. SCK Hey, add that to the very end off your bash profile. Dark bash, profile file Save it and then run source Home Dark bash. Describe profile. This is going to refresh your path. Variable. That's ah, Blake, you know, reflected in your current window. And then from there are you can simply eco ah, dollar path to see if flatter been is included or not. If everything goes according to the plan thin, you would be able to run a flutter, doctor. So let me show you by running flutter Doctor What? Actually, that's if I say flatter, Doctor, I was going to It's gonna run some set of checks on my machine is go tell me, what do I have? So I already have flutter, uh, configured. So that means my path variable is actually working. Fine. Um and it, uh, tells me which was in a flutter I'm using I don't have an android installed. So it is Watts. It's giving. So I reason I didn't install it so I can show you, like, you know, if there's a dependency missing than what you do. But I also don't need it. Because if you're doing, let's say, for example, development for IOS or Android like one of these platforms, even though in the code that he created printer is actually can can be run on Android and IOS, you don't need both of them installed. Um, I feel like you know that I was already have, like, you know, I was development stuff already installed. Um, that's why I didn't insult Android part. But if you render developer than you can actually, then you're gonna have, like, android student. Everything is stolen. You don't need x cord. Um, really. So So this was saying like, you know, that I have entered missing, and then it gives me, like, step by step directions on, like, you know what to do next. Which is what's awesome. Part front you can. What you can do is like, you know, once you install ah, you're and realistic a year stall android studio. Um, configure it and everything according towards being written in this link. After the configuration, you come back and you're in Florida Doctor again. It's going to give you a new set of instructions basically to configure your environment. Probably so it's going to guide you through. Ah, the step. Basically, uh, to make sure your environmental actually up and running properly, okay. For IOS, its can actually install hold oneself are too thin build and everything So it's gonna basically show you that. Hey, run, Bruin stroll a dis command and run brew Install that command linked thes hum Ah, these libraries up here out to this bath and stuff like that. So once, once you run flooded outdoor, it's actually going to give you, like, you know, step by step directions. So there's no problem at all. Now your studio cord is when the recommended, um, I d ease from floor ity because I said it's morning, it's ah useful so he can simply go to we just dio or Google for your studio code, um and then get it. But this is what we just area code. That's why it looks like so you can simply say code dot registered outcome. And it's a free editor. See, free and open source. So you can simply download it and, uh, start using it right off. Its very light, it actually feels rifled. And that is what we are going to be using in the sub industries. Ah, then you also in the picture that you haven't least one simulator are emulator running that way. You're Florida after actually can detect that there is a connected device that again launch . Ah, floor at get. All right, so with that, huh? Let's go over. Um, in the next video, we're gonna look into our earliest records, and, uh, before we actually look into resisted, Of course, we're gonna create an app using for Seelye and and then you launch it inside Region studio just to show you, like, you know, how you can use various year code to run your ab from their arm. So I'll see you guys the next year and really creator for a stamp 3. Configure IDE: All right. So I have, ah, history of code open. And, uh, I have, ah, the folder I've never gives to the folder where I want to create my first app. Um, so from here, I'm gonna say flavor, create my first stamp now. Ah, Flor eyes very sensitive art. The name format. So the name of the app cannot contain any gavel letter, any capital letter. So if you want to replace her your hub name with something like every letter, you wanna actually read it without having any issues you can actually add underscore. So underscore actually helps you figure out, like, you know what words they are, so you can separate them by underscore. And that's gonna be your AP name. So if you simply click, uh, simply type this command and hit enter, that's going to basically do some magic in the background and create file for you. And they go, it has created all the files. And it has also ran the floor A doctor for us to make sure that everything is how working correctly, the only heir this giving eyes android her. It's not available in idle 10 which is fine. So, uh, we still be able to run everything without an issue. So what she had that you can't close us, and, uh, we can click on open folder. And, uh, I'm going to click on my first app and click open at the fold of level. All right, so this is visual studio code. Um, you have these different tabs. You have files had explored that where you can see all the files and open ended. There's an open files and stuff like that. You get search for stuff. I again ah, integrating our source control. So basically, you're get get help. My are like any other source control you use. You can actually connected those. Ah, this city or debug, we're gonna come back to this, Uh, basically, just turn imminent your extensions, eyes, a lot of important tab. Because this is there, are you gonna need to if you need something extra. So we just trickled, comes amid a few basic things, but doesn't come with everything but it. It has a big enough community to support all the ultimate all kind of sex. Six extensions, like, can he confined python related stuff here, like, you know, python. Ah, compiler Lewinter. There's an extension back age fightin for registry. A code s a whole bunch of things that you find what we're looking for in our to support flutter into this abused to occur. We look for we look for dart now darted the programming languages. We discussed his official language for flutter. So you simply gonna search for dark? I already have installed a sigh says unsorted stable, but he gonna see this green install wooden. So you simply click on that. That's the first thing. Then you gonna search for Flatterer and you gonna install further on there's, like, you know, slip it. You can install forget snippets and the VM. So I really don't like a whole bunch of things because it have to you doing in the development process. So if you start flavor, you get all the dependencies that needs to be fulfilled for Florida war, and that's actually that extension is going to get install and extend its polling station takes, Um, a second are are, too. And then simply click the refresh button, and then your idea is ready to be used basically for flutter. Okay, So once you have done all that and you install the extensions, you're gonna go back to debug many. And at this point, if you notice you're not going to see any configuration. So it says no configuration right here. Si, simply gonna click on this no configuration and click ad configuration. And basically, it's gonna say like, you know which environment you want to add configuration for you gonna say dart and flicker And they go, it's gonna actually add a flutter of launch configuration for dart language, right? What this is is basically it's just it's just like in a way for you to launch flavor directly. Otherwise, what you need to do is you have to open term no and type flutter run every single time. Ah, you I want to run your app are ah, flutter. After a year on the flutter run, you gonna basically type snake flitter? Uh, you're not going to be gonna press our buttons que button and stuff. So let me show you Actually is it's easier to show. Then talk about it. And they were large my don't know. And, uh, castanets it starts to respond. Okay, go. Let me never get from a quick. Okay, so Okay, so I'm going to go to my foot step and ah, I'm at the root level off my app where I can see Ah, perfect on gamma file. Now, this is their type flutter run. And basically the Sliva run is gonna compile. Ah, the ap. Ah! And it's gonna connect to the currently open a senator and basically gonna upload all the code into that of the returns is it's gonna take care off, like building and everything for you and, um, with sometimes tastes. So they are. Bill took about 13 seconds and, uh, then that we have our demo up working Now, from here on, um, you can actually, as you can see, it's actually uh huh for the demo app that comes out of the box. And, ah, in order to, uh, when you have made some changes in our to reload, you'd have to come down here on the general every single time and press small are for for basically just just hard, hard willow changes heart restart. It's basically there. Your frame is loaded, but your app actually gets refreshed. That's capital are or you can do etch for help and Q for quit. Okay, so, um, are any begin to attach your consumer littered with the as well? But Aziz, you already see, like, you know, it's a lot of pain actually going back to, uh, to the terminal and ended in all those things. So all that seriously, a code actually takes care for you. And, uh, it takes care by using this configuration setting. That's why we ended that configurations. If I simply click this green triangle right here and, uh, wait for my after lunch, you notice how easy is gonna be for us to make changes and then have been see them and the similar. Okay, so it's sir starting the build process. So over here, you can see how the update it took 10 seconds for bill to complete, and then app is installed and the APP is launched. Now, Uh, hey, me second, it's gonna start showing take up. So say map. It's working through. We just see a cold. So in Florida Ah, you see, you see a bunch of folder that is one from an android that actually hosts Android related code that you can actually some do the app store. Oh, our android Google play IOS is basically a folder that contains IOS related stuff that has , like in everything that he needs. Basically, when you develop, everything is compiled and ready to go are to be published on APP store and then live is one of the main folder where we're gonna actually put most of our code in. That's going to be in dart. Um, these air tests. So any deaths You right. You actually put inside test folder that we have like it ignore para data packages. But this is one of the important file that you can be aware off. Ah, this is abstract at BMO. And this is where you menting all your dependencies. So in future, you're gonna see, like, you know that you're gonna add some. Um, I think in this really issues you could add like a couple of dependencies. But this is where you can actually add your dependencies and, uh, basically make them ready to be used inside our dark cold. So you simply hit, enter and add your dependency and ready to go. Uh, let me find the year, Sir Dart Ling, that is a package manager that he can actually go to do, get all the packages, and it's called dark packages. You can have, like, you know, front related. They're tagged with murder. So, for example, if you're using shared reference, um, you're simply going to go to a pub dart startling dot org's and then select share preferences. Um, here, you can see basically how you did you, uh, used this package. So there's some help right here. There is an example, for example, usually contains, like, you know, for example, how do you stall that package? So you simply gonna take shared dependencies? Basically, interdependencies, whatever is written, for example, this one right here and go back to your business Geo code and based it right here. 100 need taking under dependencies, and as soon as you save resisted record is gonna make sure to run this lever package. Don't get command. Um, if it doesn't ah, then you can actually run into yourself getting to the folder and simply running flutter package get. And it's going to refresh all the packages and then, ah, the coat is basically ready for for you to use so you can simply import it using package share preference here. Perfect start start. So what I'm trying to say is like, you know this package manager you're gonna get, like, you know, all the information that you need, including the example how do out installed how to build and how to deploy Basically, those hours public components hard that have bean part packages that have been released Now this aside, is mundane boat by either party as a less priority are so Ah, and Flor team actually moderated as you would be Rest assured that ah, this is going to have quality package is ah well maintained packages in here. Cool. So with that, we are actually ready to make some changes. So let's go to dark and what I'm gonna do for this. Um, simply change this to say hello. And as you see, I saved it and it hot reload. And we have changed already made. Okay, so, um, now this great. Okay, say so. It's a good ah andro. But ah, this is a lot of stuff. So in the next video, we're gonna basically clean everything up from this file and going to start from scratch and gonna learn how basics about, like, how to build your app from scratch, OK? And, um uh and then we're gonna learn about different digits at all. Think, Michael, Thanks for watching. I'll see he gets in next week. 4. Dart: Getting Started With Dart Variables: alone. Welcome back in before are we jump onto creating more flatter rap? I thought I would be a good idea to actually. Ah, go over. So the basics off Dart s so we can actually understand some of the basic, uh, terms like, you know how how dart basically creates variables and functions and stuff like that. So this is going to be like a just few of video. We're gonna talk about how to create variable, thin and various different important aspect off tart before we actually go on and, uh, create create our start creating our float perhaps. Okay, so I have Ah, this online. Ah, I d open. It's called Dart Bad now, Uh, recently Too difficult. Ah, this is Ah really nice. Ah, I d that's available online and you can test out south. Uh, quick snippets. How that you're creating functions Intesa for sheltie out up online. So you don't really need to have any kind of set up on your machine. Ah, in order to run this. So, uh, we're gonna we're gonna look into this and hopefully this will come handed two years folk assassins who visit her this Euro dart pad dart, dart lang dot or GTA Are you gonna notice that this page opens? Outfit our default? Ah, function that certain? And there's a wide mean and there is a for loop and the for loop is printing Hello. Five times. Okay, so one of the first thing, huh? That's very important, Teoh. No, on. And we saw it. Probably not, but we'll see, actually in in future videos even and flutter the way we actually primer ab eyes. How we actually create are defined a function inside main. The main is the entry point from where the execution off the program are starts. Okay, so that is a, uh that is an important fortune. Eso that's the garden and go over found very both how to create are available in further. So, um, Babel, the way you create reasonable, it's the keyword are Let's say you have somebody name, uh, active techie, Uh, so you can create that variable and you can simply print that with print statement. Name makes up. And if you run, it's gonna basically print that name Day of Techie and the Council. Right. So very both are basically stored references available. Oh, are called name is created here and restoring I, uh uh a reference to a string object with the value of theft, a key and ah, this type, uh, that name type, it's basically internally inferred as string. But if you want, you can actually created as strength type as all Okay, You can also create dynamic type, which is more sort off like like, ah, in any type in Ah, um, in Safed. Now. And I'm trying to remember what sequel in for Java. But but yeah, I mean, it's basically ah, if you create dynamic, it can create it can save or store any kind off property, Sort of like an object, are directly, but usually go out and create either a type name because I started the type language. Oh, are you actually created with bar and whatever well, you give it to Ah, that variable is gonna become the type off that very boat compiler. Actually, you first that type. OK, so, um, when you are creative able and if you don't any side the default value for available, it's Ah, no. Okay, so I start. No. And, uh uh, basically everything that you see an object in dart is an object. Eso uh, safe. He create a number and, uh, not our number. Sorry. Hint, hint, type, For example. We created in type even the end is going to be no well of several of the languages. It is actually not a reference toe restored reference, but it's actually a value type, so usually see especially fit in numbers. Ah, you can see this, you know, associated to it, but not having to start. Okay, now, if let's say you have something that you never intend to change a variable that you never intend to change the knee can create at readable as ah, final or constant either. Like you know, Mr Refusing oir are you can use in addition too far. So for example, he can say final name is equal to take e and you can leave it right there. And this value I will never be able to change. So if you try to change it, we're gonna get ah, another thing. Name is a final variable can only be set once. Okay, so if you have, like, you know, basically use it for, like, configuration storing configuration convicts, rings R p I keys and stuff like that. So that's how the year's final and I noticed that we don't have Ah, Mark. Your But we could have our cured as up. Uh, so how far is not gonna be? Hey, type, basically, because it's not gonna be available because its final, but yeah, he can have, like, a type here. Okay. And, um, now use constant our const for very both that you want to be compiled Time constants. Eso If constant Wellies are at the class level plus level, then you can make them steady Content car constant. Um, and if they're adopted level, you can simply say const Okay, so those are compile time constants. And, um, the way you actually create them is, uh, let's just say const for example, um pie? I think so. Okay, so this becomes, um Spiral you. So I'm actually using a little bit of a string interpolation here. Um, but it's not about it. How did we get to the string? Ah, string section. But what? We're what we're doing? If you want to pass a parameter inside a double court or inside the string, make stringing mean created string, interpolation and intensively initiate with dollar symbol and then type here, local variable name. And that's gonna actually be replace Regis Value. Like, for example, here after Keith Readout one for has been replaced or definite. Keep I dollar pie has been replaced with their tiki 3.1 for that. Um, Now, one of the on the anything that he can do is, uh you can change only the values for non final, non constant variables. Okay, so just remember that he and, uh then we can actually go on and discuss apart. So the other valuable tax out that we haven't art. For example, we have something called numbers. Okay, So the other numbers have two flavors there. It's and ah, there intend their double and values are not, uh, in the range of 64 bit. And it depends upon the platform how much value can store. Ah, and double value is 64 bed, double precision floating part number. I right. And both enter and double are subtypes off number. So you can create a variable hint like this, and, uh, he can create double like this, or you can create numb like this. Okay, So I was still gonna compile. Ah, he's just not using ABC. So that's what is actually complaining about. But now we're just looking at, like, how Degree in those. Okay, so moving on If you want Teoh, turn your string into a number are basically how how do you do it? So let me Maltese over into another function. They will create a parties and, uh, going to start here. So let's say if we have a number If you have a table one what? We can do it because implicit into dark parts and, uh, can I give one inside difficult or at string, And this is basically going to be converted into number one. Have you can see it right here. Now, if you want Teoh basically convert string to double you similarly do that. So I say, let me another. I'm gonna use that high value one more time. You know, when I print Hi. And that's right. Have you guys think it's ah converted? Um, and if you're trying to convert into seizure to a strength, he can simply say, for example, like So here is our string interpolation one more time and less on it. There we go. Okay, So this is how you can convert its frank do, uh, to basically hi. Or double or convert in teacher double into strength. Okay, now for the strings. Ah, string in dart eso. I mean, take this and move it inside Another function. Okay. Now, um, let's say for a string. So we're talking about strength, so let me get one here. Wait. String test. Hey, we're simply going to call that. Okay, so let's say you have ah, String one. Are the stores some value on we have string to and it's store some more painful. You have saying three. Okay. No, that's all you have to use. Three string. So it's well, he didn't remember. Oh, are you need to know that strength in dart are utf 16 and goaded. So you d of 16 gaudiness is what represents string. And he can use either a single coat are likely abused you or you can use dough coat, um, to wrap here, string around. Okay. Ah, cynical on. One of the important thing is cynical, and it's important for all the swift developers because, Peter, you tend to forget more often. Okay. Now, um, one of the thing that you have seen already about string interpolation. The way it works is, um you have strength and you put dollar signs. And that's that. You say it's $1 sign as to dollars line three. And that's how you get your ah, string interpolation. So that call string test here, huh? You can actually see thes three strings basically being printed out now for like, some reason you need to Ah, access. Object off this clustering that you cannot put dot in here because that's not gonna work. So what do you need to do if you need to use additional property owners say an object that you need Teoh Exodus Properties using God Operator, you're gonna wrap that variable after dollar sign into curly braces and then ah, print are 40 other properties on accessing a problem. So ah, let's say to upper case, for example, if you do that, then it's gonna convert that do first test one to upper case. So that's how you dio string interpolation for, um, for local Very bolts are of objects and object properties. Okay, Now you can also concoct in its strings using plus simple. Um, but I like this interpellation a little bit better because it's a little bit more sophisticated. Okay, now you can have multiple multi link strength. So, for example, if he had, like, you know, this three s multi line we could. She said, um, I led with more. So three, three guards. Uh, it's what represents hey, multilane. Strange. So you can have a little bit more structure in formatting in place if you want to. Um and, um, Let's see what else can be Can we talk about, Um I guess I guess we can talk a bit about bullying so he can create a bullion Sasol. Um, so he can create a bull test for acceptable so you can create. He confessed. Well, like, you know, for any variable you can, For example, we could say string. Uh, then you can check some bullion properties for that. So we can say print. Full name dot is empty. This is going to basically print bullion. All right, so his empty is true. Now, if you, um if you have, like, you know, if you wanna create a boolean, you can simply say and, uh, he can print flag Ali. Okay, So that's how you actually create your bullion and you can assert on billions so you can create, like, you know, simple assert statements. For example, assert lag equal, equal health, like so. And, uh Uh huh. So you do like a bunch of things, uh, like, you know, with, uh, with these flex and stuff. But, um asserts are something our if else conditions and stuff like that, he can actually check those as all with billions. There's something much. It is that we're 1,000,000,000 there, like, you know, another type. So All right. I think that's more or less about all the types and the labels. Next. Ah, in the next three of year, going to be talking about ah, are looking at a list how to create lists. Um, And then, uh, going to look at a few more things, Like a map. Um, hand some of the Then we can start, like, creating functions like the how functions and everything work out n tart. Okay, so let's talk about list and maps are in the next one. Eso, uh, hope you guys enjoyed this figure, and I will seek, as in next video, and we'll continue our our dart exploration. Okay. Thank you. 5. Dart: Collection Types in Dart: All right. So let's talk about collection types. I start eso perhaps one of the most common collection that you would see in any programming language is an array. Ah, but apart from Murray, you would also find some sort off dynamic list that grows on demand. How are the problem? Classically, uh, that have bean, uh, that have been present in most of the programming languages was having an array. Uh oh, geez, are for fixed sites. And then, uh, you would actually see something like a ray list that actually growth dynamically. Um well, darts her solution for that. It's how you only can I get one off these. So you're only gonna get one array, which is gonna be called list, and it's always gonna be called list. And that's the only thing you're gonna get. So lists are arrays and their dynamic nature in nature, and they're very, very fast. All right. So what is the most of it, right? Yeah, I guess. If you're wondering, are new to the programming array is basically in ordered group off objects, and you actually stored them as a collection. All right, so let's take a look. How we can create her Ari's or list in dark. We can simply creative able List one. Like so And he can print this hairless called lift right here. That's right. Has busy Harvey are printing 12 and three in the council. You can do are certain other operations. Like you can get lent off the list. Basically, how many members you have in the collection? You can also get they Stidham by index eso you square back and signable one, it's going to give you, um, the first, the element at the first index. So rumor. Raise her the index start from zero. So you have 01 and two. So you get index for one you can integrate over. So let's then list. I meant I know you haven't gone through loops yet, but he'll still be worth checking it out. No way. So, uh, I see. So there we have it again. This is an effort over a list. And what what we're doing here is we're simply replacing. I value how for the index and looking at each and every index or each and every element that he have inside the list. OK, Now you can create a compile time constant by defining a list constant. So that's a cast list. But example you can say comes you simply create. For example, 123 And this is gonna be a constant A to compile time. Okay, so you won't be able to assign anymore property that this is always gonna be like that. If you say constant lift one try to modify, but 90. Are you actually going to get in there saying that once supported in next because list, it's basically not gonna be because it's a constant. It won't be your be able to update it. Okay, Usually, like, you know, if you say do it here or Oh, yeah, that's straight. So usually when you do like, you know, try to update unless, ah, because this is her. And again, this was unplanned, actually. Get there because I was trying to assign a list off type string to an integer list. That means, like, you know, that shows that lists are typed. Eso uh, we're gonna go over that hair, but I'm glad, actually. Have you got that from the way as well? So list is her. Basically, when you create a list is basically simply list off type. So will you. When you assign hit sudden variables, it's actually created. Oh, with that, I mean, it looks at the variables type, actually create list off that type. Now they say they have and you can see it's ah, list off that shrink if you want her to have ah combination now for off thinks like, for example. So, uh, try this out groups I meant to print some other. Okay, So if you want to have, like something as a mix are like, you know, that mixed bag off different types that needs to be supported. For example, if you needed something for now, for example, Jason response. Because when you see a Jason response how you receive some spots, I could be a date. The values her could be date integer, float anything. So those are the timings. When used dynamic keyword to basically define or create that like you know, so I can accept any kind of value right now, Jason, it's usually a key value pair, and that's a great start for our next topics discussion, which is called map. So mad. Example. Tab. So in general, map is basically an object that has associative keys and values and about human values can be off any type of object number bad on each key, huh? Is only gonna have its presence once Sochi is unique, but he can have same value for multiple items. Given that key is different. Okay, and down. You can do all these different operations on Keys. Own map map is most likely in the user in the front of flickered development. How you're mostly going to use it to generate either argies on response that needs to be posted. Jason. Request that needs to be posted. Heart server rt sound response received from the server hand Decent responses actually combination off a key value pair eso It could be an array, but it actually ultimately. Akiva lip error. He is always festering and value could be any type. But remember, that's only for Jason Format, but maps a map here in dark programming language supports any kind of key. Any kind of object can become a key in any kind of hot object can become a value. Isis Keys has to be unique. Okay, so let's get started with our example. So I say he say? Uh, map he x one. Okay. And he created with this curly brace, etc. Then we simply say presentable. Key one. Okay. And check this. Call it right here and run. Okay, So this is what you get this where you get in response, like, you know, printed you kind of a key value pair collection, which is awesome on a map or in other languages is called the hard Dictionary. OK, now you can update Geats based on their index, so you can say map the X one and I was a key One, for example, is equal to okay. And you can also update them based on index. So another the next start index is next. Is it applies index for indexed? Your key has to be our India to archaic. He has to be of that type. But I should have actually pretty dead that and to say, if you want to add a new, um, new value now into the into the map that begin simply they be x one. Just create a new key, Greg Radical. Can you print here? Might be excellent again. You gonna get that new values added into their dictionary. Okay. Uh, now you can actually, um ah, you can look for key to find efforts. I first they're not. So it's a if, for example, map. If the value is there are not. So, for example, you could say oops. Outside of Cali basis. Okay, so it's not? No, we actually print that. Value s. So that's how you can actually get our do a look up operation. Um, Now, look up. Operations on maps are off one because they're hashed and he can directly get their value if you know the key. Okay. Now of again, again, her create a constant a map compiled them constant mapper simply defined constant keyword here, and that gives you basically able to define hit as a constant map. So that's all about maps and lists. In the next hour video, you can be start looking into fortunes. So how did great functions in dark language? Hi. Thanks again for watching housing in the next year. 6. Dart: Functions in Dart: I don't know, Come back. And that's what we are going to be talking about. Functions creating functions. Uh, we've been creating some functions, if you don't realize, like, already we've been grating, so functions to segregate How these snip it off codes, uh, that we were writing in earlier videos, but let's take a look at our functions a little bit are closer. So, um, now possible dart eighth, a truly object oriented programming language. So all the functions are actually, so even the functions are objects, So basically all the functions are objects. That means that you can actually assign that functions can be assigned as a variable. They can be passed as an argument to other functions. So that's what functions as object mean, because you can literally create an array and save a whole bunch of functions in here and start saving. Are these Cuba repair? So this key value pair can't have a function associated with key one. There's another function can be associated. Keep do and stuff like that because they are the act exactly like an object. Okay, Hope, hope that is clear. If not, go ahead and listen to it. One more time because it's an important concept to to basically taken our absorb before we actually start digging a little bit. More detail and reason. It is important for flutter developers to understand functions, because what happens in a planter is basically it's because it's a collection of any created you why it's the collection of digits. Your widgets are, uh, bound to grow in size like you know you're gonna, lest another reject inside one rigid and another one. And keep on going like that. And soon you realize that you have a long tree that actually looks like a Christmas tree. One side. Actually, in this script, it's going to keep going. So what you want to do is you on actually, how separated out in its own heart function so he can have, like, you know, a section dedicated for some budget Hand your turn that region as a part off like return statement for that for that function giving. So that is why, uh, it's actually a good idea to learn a little bit about functions. Eso You can actually create color, but more cleaner code are right more cleaner code when you do your mobile app programming, okay. And how that lets get started. So, uh, I'm gonna create a function here. So, for example, let's create is just a fictitious is status bail? They say if you're checking for, like, WiFi are it's connected. Stamp is connected, for example. Okay. And we expect of, like, you know, a type. So, for example, this example can say, like, you know, parameter parameter. Could be WiFi four. Sell. So way have, like, you know, uh, for this example, we have, like, it's connected status, returning a bullion. We're expecting a user to pass WiFi or settler identify her. And, uh, we're gonna say if, um for example, thank you know, just I'm just gonna write something here. Return for example, WiFi for so Okay, uh, different. Okay, it is. Don't worry about, like, you know what this example is for? I just want to show you, like, you know what? The parts off one of the pieces that function that's actually build off, and I'll use a a good example right after this. Ok, so let's walk, talk or walk through this one. So, bull here is your return type basically a return, a value that off dysfunction is gonna return. The type that dysfunctions got hurt in this case is going to return able bullion type. So it's gonna be true of falls. Then you have your functions. Name. Uh, after that, you can have a number of parameters. So this, uh, this princes actually encapsulate number of parameters and the way defined parameters is basically but, like, type of the grounder and then name, then you can use inside your function. He can use that name to do your operation, for example. Right now, here, we're just comparing this with one and returning. If this is equal to one. Not so. If you call this function, for example, call. This is connected. And, uh, calling means basically executing it. And if I pass one here, it should return me true. And if I pass to our any other value here, they should return me false. Okay, so it's doing that comparison or that operation on returning me a value and actually printing them you. So that is what function does. Okay, um, less dio something a little bit more meaningful. I'm trying to think OK, so let's do this. The screen a function that actually returns a string. Say say hello. For example. We take a name off the user. So it's a name and we take age. Okay. Like that. Okay. And now, hater, What we're gonna do is we're gonna say no return. So remember, returned type its strength of to return the strength doing us a Hello, there. How you string interpolation name? Um, you are This should be small case not. That's one of the naming conventions you are. Hold for example, we just creating dysfunction. Teoh get See the use. So if he say print, say hello, for example and it's apply, for example. Name we say Age to be critics. Temple. Right. Okay, lets see, Uh, position arguments, I guess. Okay. Okay. So, uh so there we go. Yeah. So possible. I was actually, you think sift way off writing functions and stuff. So but yeah, Hagel. So you first on the first printer, you expect your name to be supplied, And second, you expect age to be supplied. And that's what that's what it's applying in here. We're returning. Uh, the, uh, the output. Basically, the function has done something, and it's returning that value. So that's what that's a functioned us. They do. Ah, a piece of work for you. But it is more reusable. So imagine. Still, like writing this over and over. He actually right, in one sense, make it parameter rising, Then use it over and over. So that's that's one how we help writing function now. You can very well omit the type. Um, and, uh, this would still work, as you can see right here, So type is optional, but it is recommended for for your code readability. So I would actually definitely recommend you having a type. Okay. Ah, The other thing is, if you're function only has one return statement. You can actually shorthand this by using this Fahed Attal operator. Okay. And, uh, you can simply forget about return he and can simply right that, and it would still work. Now that there are some limitations to it, you can have your a conditional expression, like turn every expression where you use question mark and stuff. For example, if we turn this one this format, what's gonna be basically just a say bye bye or fell fecal? One question, Maher, True faults. Uh, and you say print. Okay, so um so when you use when you use a turn, every operation out would still work compulsion correctly. Um, but statements are not gonna work. So basically statement. I mean, you cannot put if else and stuff like that. It has to be like, you know, um, one line off expression that can be that can be evaluated in and, uh, resolved within that line of before you terminated using a sericolo. Okay, so this is this is a really nice way because a lot of functions you can realize you can actually, uh, dues all the operations for then facing a line so you don't have to write multiple lines of code. He can actually wrap them and once in a line, and that makes your good court look a little bit more a sink and more compact. So, uh so, Yeah, so that's that's what um that does. That's what the functions are like. And I hope ah, a did a good job. Like explaining functions are very, very important. So, um, I would actually I would actually recommend you looking a little more deeper into it, but thean production that I gave you it's good enough for us to get started. And during the flow development, I create more and more functions than staff Sagan learn. Ah, lot more about them Now, of one more thing before we go. If let's say your function does not return anything, you don't have returned statement how you can actually put a white in front of them, and that actually makes it so. Your function you tell, compiler than your function does not return. Hey. Okay, Cool. Eso thinks importing, and, uh, I will see you guys in next video with optional parameters. So you're gonna talk about optional parameters inside of him. Hi. Thanks. I'll see you next video. 7. Dart: Required Optional Named Parameters in a Function in Dart: All right, So let's talk about functions. And there the required and optional parameter. So in the last video that you saw, like whenever we're calling her function, we would have to actually. For example, if you call, say hello would have to provide name and age both of these parameters. But what if, if there's a way to make this age parameter optional and basically giving our user, whoever is using our function able to do is specify, like, you know, as minimal for for the information as as as you want or they want to provide. Um, why that useful a union you're gonna see in during the flood of development that a lot off flutter digits functions are even their constructors actually take, ah, lock how many parameters? But eventually, in order to make them work, you only have to provide one or two. So there could be any function. There could be like 100 parameters that is expecting, but you only required to provide one or two you're not gonna provide all 100 of them. They're just they're engaged. You need to use that additional functionality. So for that reason, you actually give that flexibility and that functionality of having optional parameter is available to you within dart functions. So let's take a look. How how this actually works. So you create a new function that returns a string, Uh, and we're gonna take you can ask user to provide the name, uh, gonna create function called customer, um, And then gonna ask them to provide their address, and, um, age breaks up. Now, I didn't leave how? What we would do is that we would I usually would just come, captain it these and and returned them. So age example. So if you call this to say, okay said you call this function right now, what's gonna happen? It how you can knows that actually prints out all these. But if we try to stay, Skip, we don't We don't wanna provider age. Now it's gonna given error that saying that, you know, But there are few do few positional arguments, three required to are provided or two or given. Now, how can we make our function in such a way where it's not required for us to pass this parameter? Well, it is very simple how you simply enclosed this last one of the optional one, which is usually at the end inside a squad record. Okay, now, if you run, you notice that they get value for our name and address. But we don't get any value for a so it prints No, are No. So we can simply do a check here if, uh, h is? No. Hey, for example. Ah, we're going to return this thing right here. Okay? Otherwise, be simply gonna rich on this much. Okay? If you want it right now, are you only going to see your customers name and address now, um, I want the other thing that you get. One of the other thing they can do is you can have multiple compel tipple, optional parameters, and you don't have to wrap them in their own individual square brackets seeking simply extend that bracket into, like, in harmony options you want. And, uh, that way Oh, be get do se. Yeah, for example, having it. That's got to be We're a little bit better, but I'm just going Justin example. So I'm just gonna say tight, not age address. Not equal to know Dan going to return. He's Jew. Otherwise, in order to just a name. Okay, so in this case, however, you only gonna return name because address is also, uh, option. Okay, uh, now there's one more thing you can do is you can provide a default value to those off show parameters. So they say, If you have that, Egan, um, simply say how, for example. Okay. And, uh, this way you have to, like, you know, you can have, like, default values, associate it with these, um, but the is optional parameters and that it's actually solved the problem off, like, you know, haven't for a check for no or you are sure. Are you gonna be rest assured that it use it doesn't provide a value. Then you can actually fulfill that. How common example could be like, You know, maybe you have, hey, Web server that you're creating and you expect user do pass support. If they don't pass a port, you actually a sign in the dresser were on port 80 80. So if the user is not providing the new, actually assign port 80 80. Otherwise, you actually open your observer on the user's assigned port, so it could be like, you know, one random example, but but you get the idea. Okay, Um, there's one more hard thing that he can actually do. These is he can grab them inside. Inside. Uh, these curly's And what currently give you is, uh, say age. So what you get is basically get this named ah, prompter. But named parameter is only possible in optional parameters. So you have an optional and you create a neighbor after that, Um, so in order to have, like, name, form parameters, in case you are coming from, I was background research background, huh? Then even know that served has this sort of, like notation where you actually but everything named and you have a way to skip that, but in darkness, quite opposite. If it's optional, how then he can actually provide a name. It something you can even name? For example, a TD R Oh, like, yeah, So, uh, not here, for example. Uh, remove all the other things. I need that check more, and we simply say something right. And what's gonna happen? The name parameter. You see ability to supply your ah, your parameters in any order s. So you have to like, you know, stick to that you have to foster right name than Everest. An age you can actually have, like, name, age and then the address. So that's a benefit off having a named parameter and optional, uh, a little bit about how main function So we discuss that mean is the most important function in dark language. And so it's so it is basically in flooded her because the entry point how that's where you're actually start from and, uh, main function how returns void. And it has optional off list off string type. It actually expects arguments. So you can have, like, you know, list of arguments. Kind of like that here. Um, so that is actually ah. Name so name can actually take arguments from the command line. If you're calling this Bob this program from the command line, that's the reason why is there? But yeah, that's ah, that's something that you needed to know, because only when you go into flutter, we're gonna use main function in, uh, they started gonna launch our app from. That's gonna be the starting point. OK, so that's that's it about about this named an optional grounders. And in the next hour, we were gonna see how can be passed functions as as parameters and and look a couple of other operations for foxes like anonymous functions, fortune and stuff, Um, and talk a bit about lexical scopes and, uh, then go from there, get some things in pointing and I'll see you guys next week. 8. Dart: Functions as Parameters and Anonymous Functions : All right, so let's talk about our more a couple more things about functions. So functions are first class, citizen in dark languages. All our soy is in Cortland and conserved house. So Dart follows the same trend adopting functions as first art objects. What that means is basically, you can have functions past. Most of the things that you do are like, you know, basically, you treat them as as an object. So you anything that he could do with the object I can do with a function so you can pass them around inside a private Terry can call them in animal spirits at at 10 point supplying them, like, you know, as anonymous functions inside another function and stuff like that. So we just can take a look at that s So let's create an example off a function off. Avoid. We're gonna call this print something, and we simply couldn't supply this, but, uh, hey, um, string off state mint. God supply this statement on. Simply gonna print that. How? Statement? Statement. Like so. Okay. Uh, um, what do you do? This is break Temple. I say, if you have a list has, uh 123 he can simply take that list and, uh, black for each on this and for each stakes Anonymous function. So you're gonna take a look at the inn on its function in a little bit, but we can actually supply dysfunction as an object as a parameter to this, And, uh, this is going to print each moment for us. Like so. Okay, so that is how you actually supply function as an object inside another function. Okay, It's a good time to just cause about anonymous function as well. So list is a good example. He can create an honors functioned, uh, functions that are supposed to be executed, like, you know, just once. So you create those functions as anonymous functions, function inside of function, and there's no name for it. And you can have, like, you know, he can have elements are item. So, for example, for each expects in another function, and it tells us that hey, I'm supplying item and you can do whatever you want to do it for that item. So we are simply going to print that item. I said so, uh, what it gives us to his basically dysfunction. It's gonna be executed once for each is executed. And, uh, it's basically exactly the same thing as year you're doing here. But instead of like having a function body somewhere else, he actually take that function body and 10 move it inside that function goals. So this function is not gonna have any name or anything. So which is why it's called anonymous function. Okay, let's talk about lexical scope. Eso anything that you see inside this this race is has its own scope. So basically, dart is a lexical the scope language. That means the scope of the variable injured remind ecstatically, uh, and the layout of the code basically followed the curly. And where of the audience, that's where the scope off the object ants. So you cannot call, for example, you cannot refer. I don't hear, because item is not gonna be known at this location because it's ah, scope has ended once this girly closed. So that's the this lexical scope, and that's that's about it for this video. In the next video, we are going to be looking at how some of the f else and four loose and stuff, because those are some of the things that we're gonna be using a bit in flutter might be using. So you just need to know about it s Oh, let's happen to the next video to take a look at if else for each. Ah, wow. And break statements. Okay, I think saying for watching 9. Dart: Conditionals in Dart: right, So let's stop. But conditions eso conditional czar, basically your FL statement like the names, Just how there's the value of the condition and they say I have disconnection satisfies and there's otherwise do that. So, in simple terms, Silas say you have a condition flag, uh, to be checking, like, you know, if the flag it's true Sprint have a otherwise. So this is if we don't have flagged a fight. So let's define leg with value faults, for example, initialized. If it is not true, that bring something else. Okay, so that is your That is your conditional statement. You check for a condition. If it is true that you print that or you do some operation on it and if it's not true, then you put it in a else. Now let's say if we had, like, you know, a simple check for age. So let's say if he had, like, label age and it's defined as 44 right now, if you put conditional statement if age is less than and I think it's a, uh, honey, apple health, uh, you wanna check if age is between a range? Are you gonna say age are less put 18 and then awarding limit. Great. Then I sent equal to I think we'll do it to say good. Then team and age is less than 60 five. Has another condition. Otherwise, that's like everyone, uh, older than 65. It's gonna fall under here, so we're gonna do some operations. Were going to say what we say. Like so he, uh oh, you can say Okay, So let's say if we had that, um, now, in this case, we gonna gonna print something. And if lcf and A to the end if that condition is not met, then repairing something else. So this is an example, like how he can put different conditions and evaluate on different conditions and based on your we didn't piece off code. Okay, so that's your conditional statement. Now you have conditional expressions as well. Eso, for example. You could have something like, for example, of able name, um he and he can say print. If name is equal to death right here, then print. It's a full name, otherwise printed. It's half name. Okay, so this is your This is a conditional expression. Or turn every expression There you have a question mark. First you have the evaluation condition Conditional evaluation. If it's true, execute this piece of court after the question mark. And if it's false, execute this after the colon uh, market. And, uh, similarly, you have something else. So let's say if he had, like, a address were created. And, uh, this is called a coalescing operator. But you can have like, if everything is null said so, No, check that he can say none provided, like so Okay, if you run this right now, what's gonna happen and you can see it's sort of seeing no inaccuracy Gonna see some value . So it's like a milk. Oh ah, no collating operator basically checks for, ah, short circuits. Thes expression. So you would and said you would say address equal equal. No question, Mark, have you, like providing and provided that the rights you put? Oh, address. But instead you actually say address. If it's no, then you provide how the string instead our print a string instead are executed Expressionist. I don't like that. So that's there are conditional those air conditional operations. Once again, if you can have, like, you know, one value, do you check it weaken, You can append if with else are else with f basically saying else check this condition if that is not true and you can keep going like that and at the end, he can provide the else statement for sort of like a catch. All like you. Whatever remains that's not covered under these conditions, you actually provide it right here. Uh, and, uh, then you have these operators, eternity operators and coalescing operator to basically do the conditional expression checks. Okay, Eso hope this was just makes how things a little bit unclear on is gonna be a lot of useful and sort of development. So hopefully, uh uh, you like this video. And in the next video, we're going to be looking into loops. So let's hop over to the next video and we'll talk about loops and start. Thanks 10. Dart: Loops in Dart: right. So let's talk about loops. Ah, and this for this example I don't like. I'll create the example and then walk you guys over. Um uh, each example. So how loops are basically no a tree items that you betrayed on so basically same condition running over and over. So, for example, let's say if I had an array ah, here for books where I have thes three books how Children's books in array and a string strong here Now I can If I want to do it right over, I can either go like, you know, books of it index 1012 Or I can actually loop over them using this four loop where our creator for loop of it, no index as zero and go up to the conditions to Basically, this is the conditional check to run the loop until I is less than book start land. Basically. So I is less than three with me. Is this gonna run your 12 and then gonna break? And this is where we are implementing of it. Plus plus, operator were incremental hit by one. So if you, uh if you run this how you gonna print all the books harder there in the in the array. So that's one way off, Looping another way off. Looping is, as you have seen already using for each where you get the current item as, uh, like, you know, ah has an object in the Nikkei and simply print. So we're doing books, not for each. And then we get, like, each book item, and then we can actually bring that or do whatever we want to do. So that's what we're doing here, representing all the books here. We can also do for in because the rays list set. These are basically in terrible. So you can Detroit on so you can put like, four in. So we can simply say who are four of our book in books on. Then we can actually print. And essentially, this is very much worth being utilized inside for each. So, for each actually ultimately runs this one internally in the dark. So that's what we have. And then begin have once again print all the books. Okay, Now, another way to retreat are loop over items is using vile conditions. So you do while and you actually check for condition and you say, like, you know, run this mile loop until this condition is satisfied and then exit not offered. So in this case is gonna run 012 and then because books lent the item. Let this three it's gonna actually exit out now, while is different from another Washington that's called do while. And that's why I'm printing just one element here because do while run exactly one a two least one time. So while if the condition is not met, it's not going to run it all but do while runs at least once. So here were saying, like, you know, Jay, while you zero um And then we say, Do print day than implemented, then check. And while is that J has to be smaller than one. Okay, zero is smaller than one, but still, this is going to run. So this, although this condition is not satisfied, but so gonna run this. Okay, now break is to break out off the heartful loop. So what we're doing here is if you're creating a loop, how that goes over indigenous zero to 10 and it's gonna break, but it's not going to go all the way to 10. It's gonna break after five. As soon as that Regis five descended, this condition is going to satisfy, and we're gonna break out off this loop. So if you for for any reason if you want a break out of loop, you can use break statement for that. Okay, then you have. Ah, continue. Continuous. Exactly. Opposite. So you wanna you don't continue forward. Ah, the execution. But you return the execution back to its initial position. So, um, what's gonna happen here is this I's gonna get implemented five times because it's not because this condition ist go is gonna satisfy until it reaches I ridges value five best when this condition becomes false and you'll start printing value for I averages were sprinting right here. So you continue. Ah, a continue statement puts you back to the initial pointer where the loopholes loop started , basically with the increment. So in this case, I was going to be zero initially and then it's going to continue. I would increment to one. It's going to continue. I's gonna become too is going to continue, and it's gonna happen until I becomes five. And then that soil. This condition becomes false, and you print five and then you continue forward because 678 are basically yeah, gonna value it to be false in this conditional statement right here. All right, so those are all the loops and ah, breaking. Continue statements that are there in dark. Um, and, uh, in the next video, how we are going to be looking at switch ah, statement and then exceptions. How to handle exceptions and stuff like that. Okay, though, thanks again for watching. I'll see you guys the next video. 11. Dart: Switch Statement in Dart: All right, So let's talk about statement and dart and Ah, the sweet statement actually is more or less like, if else. So, if you remember what we're doing here in this part was your checking for one condition or were checking If that position is not true, then we're gonna go to another condition and you can imagine, like, you know, if he have ah, whole bunch of conditions, Jack, then it's basically going to be like, you know how how big off this treatment this f else is going to be. So to make it easy, uh, we have something called Search which satisfies one condition. You give it a condition, and whichever case satisfies that you actually get to execute the code within that case. Okay, So dark language comes with, uh ah, search statement. That can be that he can actually use with integer or string type values. Eso the command that he supply here. The variable can be an interior, or it can be a strength. So, for example, in this example, we're using day. We're signing they as Thursday and when so it starts. It looks for the case. It's well, which, if it's Sunday, Monday, Tuesday Wednesday know that it's Thursday and actually executes the code that is hurting there. Now there's some other things that are written, but let's talk about case first. So case are your actual evaluations are basically, um, you can say, like, you know, if this equals this. So whatever comes in day equals there's than that case executes and each case his gonna require or requires basically a break statement to break out of it. So anything below this case, once it is executed, is not gonna get executed. So it's simply gonna exit the Swiss statement from there on. So nothing is going to get executed from here Now, there are some ways. If you want Teoh, fall through s O, for example, if you won't do fall through case, do you stay in case fans stay, Teoh basically executes same same set of code. Then you can combine those so you can say case using. And immediately after that, he can say case Wednesday, for example, and the need execute your code and break out of it. So this section executes every let's say you have, do you stay here And if you run uh, it's gonna execute that piece of code and exit out. And if we have Ben stay here, it's gonna do the same. So it's basically gonna execute the same goat. Okay, so that's how you do. Ah, he can fall through for different cases. He can combine. For example, we could have done like, you know, some Monday, Tuesday, Wednesday, Thursday, Friday are on weekdays. So we could have fallen through all of them and just sprinted. It's a weekday, sort of like that. Okay, Now I want to show you another case where you can continue to some label that you have created, so have created this someday a label. And right after executing this case, he can jump right onto that. Left that label and ah, you can actually execute code from There is also this some day, huh? Could actually very well be here. And, uh, if he execute, if he execute Thursday, what you're gonna get it's basically first you get it every day. That's ah, this accord execution. Then it goes to basically that label. And whichever case comes after that label, it actually prints that or execute the coat executes the code from that and then it prints out that I so hope that example is clear. Um ah, uh, if you need to do hope went off fl statement or conditional checks and stuff, such is a lot better way to do that. Worse is using, if NL's and wrapping it inside those Prentice's had to create a chain. So in the next video, we are going to be looking at, um exception handling in our dark. So we're gonna see how how are dark handles exception and how throws exceptions that stuff like that, I think same watching. I'll see you next week. 12. Dart: Try Catch Finally: alone working back in the Internet area, we are going to be talking about air handing an exception handling in dart language. Now, it doesn't matter how foolproof the code we white. There are chances that he gonna need some kind of exception. Handing to prevent or make yourself are secure from one of those unforeseen events. And for that reason, dark or white, try cash block and, uh, basically, also throw statements that help you throw exceptions when something heart doesn't look right. And you don't wanna continue your programs execution flow further before asking your reser to correct or so my bad. OK, so that's what exception handling is for. Um, we're gonna take a look at this exception. Hi. Example. So for stick Look, let's take a look at how you can throw an exception. So I'm gonna comment this exception through example Well, which is down right here. And what he can do, basically is ah, you can throw, for example, a format exception, uh, that if let's say if you're trying effecting an integer and use their supplying you, yeah, like you're expecting into richer off arranges there's a 1 to 10 and user is giving you a different range than Eakin. Throw an exception for right exception. For example, you can throw like you know this year, expecting a date format to be certain kind but user enter different kind. It's just just an example, but but yeah, so you can actually throw exceptions like those. So I'm throwing her former exception just a simple, simple exception and calling it a fatal error. The message is a fatal error. So if I run the program right now, what's gonna happen if you're going to see this uncaught exception now it is in red. That means it's basically saying it's unq art house. So you what's gonna happen? It's your program is gonna crash right here because if you don't handle it s o ah, you throw an exception. But at one point, uh, like, you know, when you let your exception propagate to the correct location, then you actually handle it. So as soon as he handle it, it's actually handled. And your program his your app is not gonna crash. Ah, but if you leave it like this just without catching, but then you're gonna get uncut exception um, into a program. It's gonna crash. So, uh but there are chances that you want to throw an exception, but you wanna handle them and show a proper message to your user. So that sort of dio we are, how we are going to take take that exception and ah are pretty inside tribal Try cash block and we're gonna capture that so we can catch that air and we're gonna print a nice message to adduce. They're saying something has gone wrong and you should actually fix it. So this is how you use try cash block. You could try. You put the piece of the code that actually throws an exception and then you say on die party exception. So you already gonna know because you're expecting this exception to occur. If something something that you're not expecting has been received or done, then you're gonna put that on an exception. Type Indeni, execute your code. How? Whatever it is, maybe logging to an analytics, saving whatever user has entered to a temporary location and giving you their warning back that Hey, this is not the correcting. Please enter the card thing and stuff like that. So you execute your your own code. How'd in that block? And then from there on the exit. Okay, so his try, try, catch, try on block. But let's see for try catch. So let's see if you have exception and unique case. All exceptions. Basically, you on a catch. Exception. Uh, you don't know what kind of exception it's gonna be. Have in that case against the police. A try catch exception E. And then you print eat up to strength. Basically, this is either to string is going to give you what? The exception waas. And what the exception message waas. So let's say if I didn't I didn't have this former exception. Instead, I had to throw something here. Exception. Then it's gonna show that this waas and sorts is this thing right here. Um, so this was something happened here? Exception. That's right. It Okay, So, um so you know that you know what kind of exception it is we have courted. We've done our due diligence to basically make sure everything is correct and then continue on for our novel program execution flow. So that's I catch now. Egan re tro exceptions. So they say you catch it about You wanna Solis. Do you have, like, you know, less did functions are fortune calls and, uh, um, at fourth level are deep down I eat or an exception, but at second level, you actually catch it. Then how would your do? It's basically you on a retro. If let's say if at a level one you're catching all the exceptions and making a log to analytics that way, you only have, like, you know, in place to make your now takes logging and you still how be able to catch hold your exceptions, but also be able to report it further like, you know, for for literally dating else's stuff like that for the Duchess. One reason or one example of, like you know where you are. Throw re throw. But I just want you to know that there's a way to reach your the exception engaged. You need to, and these examples seem like you know where simple right now. But as you develop more on, go a little bit more deep into, uh, basically doing your development. Egan axity running to these situations where you want to throw and accept him and you wanna cation, exception and re throw an exception and stuff like that hit doing those time you can actually use these things. So this is just the knowledge to your tool back. So you know that it's there. OK, so you just simply do your execution and he can re trow. And basically they can see how we're getting our print statement here, but the exception is re thrown, so we get 10 caught exception that has all Okay. Now, uh, last not the least block is tracking finally on a try catch. It's basically for your exception handling. So he had an exception. Hey, within the Trichet, try block, then you catch it within the catch block. Finally. Block is place where everything, what has been written here always executes. So this is the place where he can actually do cleanup work. It's a for example, you were trying to open database connection and database connection was open, but file database file was not ready. And the so you encountered the exception. You caught that exception. You actually let you know that Hey, there's something wrong with the database and you're actually gonna We try to fix it horror odour. But then you don't want to leave that to the best connection open because file was corrupt or something. So finally, Block gives you an opportunity to run that Reserve Court, where he can close your database connections to finally the block. It doesn't matter if a for execution flow her works are not her basically is still executes of your code. So finally, is a place where you always you can rely on, like, you know that closing, closing off, off your connections, cleaning up resource and stuff like that, I just commented, are exceptions. So this function is not throwing any exception anymore. And as you can see, finally block still ran. So that's what track it's finally is. Hopefully, this gives you a little bit more understanding about how track it works on I once again thes are simple examples and you gonna you gonna gnome or when you use more. But at least you know the syntax right now. So how when you encounter an example you can actually read through, and after some practice you can actually develop your own understanding off how to use these? Thanks again for watching, and in the next video, we are going to be looking at classes. We're gonna start with an immigrations first and then going to go on Teoh classes and objects. Hi. Thanks. 13. Dart: Enumerations: All right, so let's talk about enumeration. Um, so inspirations are basically user defined constant values, and you create a m orations when you know, like, you know that these are the constants that you gonna use and you don't think of it like, you know, um, either creating them, like as an as an index or in teacher or a flag. Awesome. Like that s So what do you do is that you can create an enumeration, give its, ah, give it relative our types and in values, and then go from there, for example, that we have, ah, audio player. And that audio player has argued controls on because those audio controls are related. We create an enema with enough Cuba are cured and we create rename it How do you control? And we give it value play pause and stop thes are comma separated values, and, uh, they start by default. Devalue. The first generation starts with zero. So if you look at internal value for this, the play is going to be equal to zero pause. It's going to be one and stop. It's gonna be too. Okay. And so, um, let me go to the driver functional, detained and let's execute from there. So if you go and drive function, what we're doing is creating a variable. Are you control dot play so control that right now stores value for play. Okay. And, uh, didn't we passed that into our genome example function that actually checks? If the audio is playing, it's going to stop that. And if the audio else if the heart has stopped, then we're going to start playing And depending upon, like, you know, what we have said, um, we can print and statement saying, basically, this is our action that we're taking that audio is, uh, playing or not playing. OK, so if I execute right now, I have two conditions. Eso first on his very actually sent control state to be play, so it should stop. And so that's what we're saying. Value has not playing. And then we actually set control state to stop um and then basically, uh uh, the audio. Uh, then it starts to play, so that's a printing audience playing. But you can see how easy it has become because of the venom that we can. We can send these values by its type and its names. It looks like it's a It's a property and one of the property were accessing. So that's actually the simple core readability and sexuality that in, um, actually provides Andy civil off the Inam list has sense for an integer value. So just remember that and every value is one greater than the symbol it proceeds. So basically, plays can have B zero part is gonna be one, and stop is going to be too. Okay. How so? That's home. That's basically how, um, you are You can use Denham's now. One more thing. I just want to show you that if you want, he can print value for by using. I believe I do you control for example dot play dot index. It gives you the index so they go. So, um, right now we are. Yeah. So you're actually checking for a play? But let's let's do it for control. Those three suited for control. So he now like you know what? What indexes being best. So as you can see, we are being passed. Stop. Um, when audio is, uh, help. The new state is being changed to stop. So I think Yeah, so you know what the state we have received in words going out. So, uh, let's do this after change and, uh, gonna have this basically state before change, it's gonna be this. Okay, so when you receive the state is actually zero now that needs it's that play. Then we say, what, you're not playing. We actually said that. Do stop. And then we take start playing state after changes to. And now next time we actually send Stop, which is like the next 2/3 saying state before changes to and nobody is playing now because we have seen that state of new state is zero, which is which means dowdy is playing. Okay, so that's how you get access to, like, you know, internal strolled around. Use how? For Inam for exhumations. Um s Oh, yeah, that's that's it about the names on the next video you're gonna be looking at classes has how to create classes and dart. Thank you 14. Dart: Classes: No, no, come back. And in this video, we're going to be talking about classes in ah dart and basically, how to create class and how to use a class. So here, uh, I have Ah, simple example. Created her class example. Um, so we're creating a customer class here. Now your class can contain properties on those properties can be off different types of bacon. Define them as in string. So all the older basic types that he have or complex types basically, you can have, like, you know, another class. Um, and you can create that class as a type of all. OK, but these are what's called properties and ah, the convention is ah, that you actually start your class property with underscore to, um, it's just a notation because Dark does not have private properties are public properties, Private properties says so. You know, like in other languages. Um, it's an accessibility decorator where you are if you define a private property. Ah, the object of the external class does not have access to that up private property. And you, if you want to modify that property, you would have to ah, excess it using its a get her or get her or center Now, in case of start, that accessibility. Ah ah, Decorator. Excessively identifier is not there. But the condition is that whatever is private, you define it with underscore whether it being a property are are being a method. Um, so that's what we have year creating three properties here. First name, last name and email, and then, ah, he can create constructor. So constructor basically is is a, uh, ish Leiser, you can say, basically, this is where you, uh, allocate your memory off of object off the class out of every, create an object you call its constructor. Ah, and ah, that constructor can be empty. Or you can have, like, values House set to it. So in this case, we're starting first name with F name hell. Name and email, and we're setting internal properties like first name, last name and email Do the value that we have received in the constructor. Okay, Now, along with default, I mean yeah, the default constructor, you can create named constructor and, uh, in Arctic create name constructor recently, right? Classes name by the constructor. Doing identify Constructor is ah, it's name is exactly same as a class name. So customer customer. And to create a name construct constructor, you create customer dot name off here named Constructor. So and this case directly creating from map. And we're supplying a map here off a string string type. So he recall in the last video and we discussed map. A map is simply a dictionary with key value pair. So you're supplying a map off customer. And inside that map, we have keys like F name l name and email. They her used to set thes internal properties. So that's your that it's your name, Constructor. Now, then you have functions inside the class. Basically, they're called methods. So they're exactly, say all the rules that you learn about function there. Actually, same same same rules. Apply for the method is all, Um so we're creating print customer, and they simply print their first name, last name and email. Okay, then we have getters and centers. Basically, these are these are the things that he used to, uh, get your private properties are set about properties. Now you would think or you would say, like, you know, if I can make this first name and last name available. Our need a really Karen center. But others The reason most of the languages, actually, or all the languages have getting in several because getting value is fine, like you can simply return like you know, this value. But let's say if you want to ah, alter this state are changed it the state are somehow before returning back to the user. If you give user directly direct access to your property, then you won't be able to make that modification. So with for that you create together where you can actually do some some other operation here and then return that value, let's say logging. So you on a track whose, whose basic trying to get the last name for the customer and you want to log it somewhere on the when you're in your database, and then you can do that right before returning that value. Okay, Now, Stender is, uh, just the names just like, you know, it sets value for properties, and this is very actually make sure that the the values that are supplied are actually correct s. So let's say if you gave your user direct access to last name now they could literally set the string two empty, but And you don't have a way to enforce any kind of check off for that. Now, if you have a center, then deacons before setting the value, you can actually simply say, Hey, this is empty and we don't allow empty. So you can just, like, bring that message or return from here for a warning or throwing exceptions or something and then not said the value, but only if the valid values provided. Then you said it. That's when you use a carers or setters. Okay, So created gets there for last name, email and first name. So that's ah, most of the things. So, like, you know, almost all like you know, all of the things that you're gonna you need in flutter the knowledge about about the class is comprised indistinct example. So let's go ahead and use this customer class. So we the way we created Hey there. We create type customer, give it a name just like variable and then we call it constructor and this is very provide sa like, you know, uh, thinks that actually is asking for, like, first name last name and email. So you cannot, like, you know, simply have empty Because how your default constructor is actually expecting first name, last name and email to be provided before it. Can I look at that object to you? Once you have the optic allocated are you can simply refer custard out email to find out what the email is. Now, this should be email. Really not underscore email because underscore email is your internal property. Okay, um then the next one. Okay, um, and in the next one. Ah, what fear? What we're doing is, um, br creating our this. We're career. We're creating this map, and the map actually takes this key value. Pair off first name, last name and email. Now, these three valleys first name, last name and email are basically ah, there simply denying you that, uh, that these three malley's, they're gonna be in the map. In your case, we are going to use that map and basically supply it to our constructors. So customer dot from map and resupply the map. And this is there your name, Constructor. It's gonna get basically trigger and initialize and object for you. So as you notice here we actually each lies using default constructor using named constructor Do the slides in the object. Next, Harvey, actually, just print that email are to make sure that we're getting this. Uh, take it out. Example dot com. So 1st 1 is printing email dot com. Second was printing example that come. And the 3rd 1 is we're basically setting. Ah, use off surrender. So basically, we're setting the email property have for customer, too, and we're setting it to different interactive example dot com. And when we print it, that's what we get so emotional, that's all. Ah, what class does, um, and ah, you gonna create? Ah, some classes inside. Um, inside flor eso. I wanted to give you instruction about what classes are how to created because you're gonna create Ah ho point of them how often we actually start looking into flutter examples. Okay, so hope you guys enjoyed this short introduction about not so sure, but our introduction about dart um and from ah next videos. How are we going to start looking into ah, flutter. Ok, so thanks again for watching and I will see you gets in next video 15. Flutter: Material App & Scaffold : alone walking back. And in this video, we are going to be, ah, creating a new app and African Explorer house on the basic Brigid's around our flutter. So let's go ahead and, uh, never get to the folder where you want to create a new our project, the first project, and, uh, that we're going to simply take letter create and, for example, this one gonna say explorer quiches with the head enter and what is going to do its magic and basically create a fuller structure and all the necessary felt's plans for us. And I saw Is that gonna get hold of packages? So there we go. We have, ah, all the AP's already here. Hit, ran. Let her Doctor one more time to make sure everything is looking right. Next thing I'm gonna open, we used to deal coat and, uh, simply gonna go navigate to this explorer bowel and click on open folder and find my new project and simply open it had the fall of level. Okay, I'll make the sauce screen a bit bigger. Um, so now ah, one thing that we're we're missing right now is the capability to run this so if you click on debug Uh, Bama, you got to see there's no are configuration associate. Do it So we click on Run is basically not going to know what we are running for stuff because simply add a configuration and we can select Darden flutter, and it's basically gonna add that. So let's close. And now we have showing up there, so simply got in quick launch and out, depending upon her computer speed. And if you have, like lots of all, make sure you have you have a device or similar open ah and connected eso it can find that that makes the the the build process a lot faster because it doesn't have to look for the device because it happens like, you know. And you, uh, when you build a further project, the last step is actually when stuff to look for advice. So sometimes it fails after doing like, you know, hope until work, trying to build everything. And next time I needed launcher devices can actually rebuild that. So for that reason, just watch out for that. Today we got our sample project is running. If I click on this button, thanking, see Dia counter going up. So let's go back to explore, and, uh, he'll go inside this lib Good, actually, and open main dart dart. Now, we have, like, a lot of stuff high in here. There's like Maine ap Ah, stateless village. It state for brilliant for two, which we're gonna our talk in a little while, probably in the next video. But, um, let's go ahead and actually removal that today. So I'm gonna actually go down the bottom selectively, basically move it. And the only thing that I want to leave eyes import statement, um, and, uh, the main doctor are someone actually, simply by this to get they mean, and we simply do not have anything. Right. Uh, first thing we're going to it's ever gonna create a class. Um, gonna call this, um, Explorer yet? No, this is going to extend stateless, Which it, uh, and we can talk about stateless it in a bit. Her. But in short, basically, it's just ah, rigid up class are evident that actually does not have our maintaining the state get. So your buttons, Not not even like images are labels and stuff like that. I think this Okay, so If you create that, you know that there is that this red squiggly that actually showed up. It sounds like this missing a concrete implementation for stateless fidget Don't build off method. So simply gonna type, build and, uh, gonna hit enter for the first method selected So that has built contacts. So 30 is a registered record. It's gonna fulfill that requirement for us, and it's gonna put the code and out for any stateless idiot. This is actually want the one of the most important piece where he actually returned a Bridget Lichens. After that, it's idea build method so and that supplies build context. Eso this context her that he can actually use her to do. Basically the two to the dependencies changes ah employees, whole bunch of whole bunch of studying that you can actually go through and look at its stock competition and find out. But context are actually provides you a lot of stinks about your current contacts that you're running in their current user interface contexts that you're in. So that has, like, you know, information about that. Okay, so if you command click on, um, on that build contacts, he can actually go inside, Dia. It's at the class and he could see, like you know what it has like. So context has, like, Avijit, he can get like owner auto digit. He can get, like, a final find render objects and stuff like that. So there's a whole bunch of documentation that Egan read upon. If you want to find out more about what context, it's OK. Um, so, uh, if I if I when I actually running right now because of your returning a salvage it, it can actually throw an arrow. So let's introduce Ah, um a very simple concept about how much a relapse so cool actually came out with this thing called material design which actually some divine guidelines how to create europe. So if you look at Google maps Google, Ah, Gmail gold, male, basically or any other APS, they're mostly looked like this. And they have this like, you know, this effect that you're seeing, like this bubble up effect flag design flat. You I there's, ah raised up Ah view where you have, like, you know, shadowing everything. So all this part off its part off material sign and material design has a theme and everything that you defined in change. It seems so. It's like a blue team right now, but its default. But he can have, like, you know, red or you're your own Children color theme that he just create a demotic and supplied. And then your design or you're looking for use can change to that. So that's material Stein, uh, Google material sign Ah, specifications. And you can actually find out more about it if you like to know. But, um, flutter already comes with a material app. Now, material have basically is a convenient fidget that actually wraps a number off visuals that are commonly required for an application to be built in material design guidelines. So ah, for an app most likely gonna need in F bar at that top are right here. Oh, are also knows that's known as Akbar in front of her. Ah, you need things like, you know, floating buttons, bottom bar, snack bar, snack bar sheets and stuff like that. So it provides the basic infrastructure for bad. So that is what material habits so we can actually return. And that's all. Salvage it. So we're going to return him. Do your lab to be simply gonna say material AP And uh, now if you hover over this, um, if you recall our dark class, we talked about optional values inside a function in If you notice most of these, most of these parameters are optional parameters, OK, except some of them basically are not marked. So Michaeli I try to look for that home is gonna be the one. So at least one off home route are on generate trout must be non so that's what it is. It's one of these. The home is required at home is something that we need. So oh, what you gonna do is I'm gonna say home and home actually takes a regent so you can have, like, you know, indigent inside home that you have a show. But what we on the show is something called Scaffold. So scaffold is another reject. Now, scaffold implements all the all the things that material app provides. So it implements that in a material denying mutual layout structure, and this glass actually provide mainly it provides thebe I for different visions operations like showing drawer so you can have like a drawer navigation at the on the left side. It actually, it's responsible for that. Yeah, it's responsible for snack bars like alert, alert. I loves and stuff bottom sheets and stuff like that. So that's what it builds upon. So it's very structural. So you actually have, like, you know, the first high level, uh, per se Like, you know, if if you consider this as a box like, you know, the outer boundary off the box is provided by the material app, and then you have sections inside that box. So you have, like, you know, left sections. If you can imagine like this as a box and there's like one section going dividing like horizontal vertically and then horizontally. Then you have, like, four different for different like areas to put stuff in. That's what scaffold this. So this dividing line or dividers, it's a scaffold that actually gives you like a little bit more organization inside your box . So that's what scaffold is. So let's go ahead. And how are populates Scaffold? Scaffold is, huh? The one that actually contains at Bar Ah at Paris, this top navigation bar, say simply, say, at Bar Indian, excited that yeah, bar takes Ah, a whole bunch of properties again. There's so much so many of them. You can take a look. But, Titlist, one of the most important one at that stolen that actually shows this title. Yeah, So you gonna say, uh, my full stop sign off stamp? Actually, so exploring just that makes us so if you notice there's a red quickly reason is that title is not does not take text. Because in Florida, everything is fidget. Said this also takes of it. So let's introduce one more which it It's called text how this is equal into a label. So that's basically ecstatic next, and this one actually takes a string. So you can simply I think this show this thing and if I run it right now, it's ah, it's basically not gonna It's gonna show this error because we have not called this app inside our main function. 90. Recall our one of our lecture during the during dart discussion. Um, Maine is the place where everything starts, so we need to provide a way for our app to be called from me. So that's what we gonna do. We're gonna simply say, run app. There's a built in method called run app inside mean and we can provide. Begin, say explorer widget is what we want and just create to stop it in facet to run up. So you can literally say he could have said something like this far cap is equal to explore rage it. And, uh right. So you're creating an object for this class, and then you're supplying that object into the running. Have you saved um and, uh, I does the heart reload? If it doesn't recover from that, sometimes you may see this problem there. Once you get an exception, you may not. Your program may not be able to recover from it. In those cases, you have to actually stop in reruns do that. So let's go ahead and rerun this. I'm just gonna build all right, So build is done and, uh, they go. Our app is launching now and everything. If you have done everything that we needed to do, we should see her exploring. Now, One more thing on this again, before we go on, actually provide a, uh I don't like this debug across a ribbon, so we're gonna see debug show check mode. Benner is equal to force. So it was simply saying that, and, uh, that banner I should disabuse. All right. So, congratulations. You have successfully created or written your own a widget. Oh, are your own app comprising a lot off Brigid's? And this is actually another region. By the way, in the next day, we can I start exploring some of the common popular layouts and stuff, like, you know, we're gonna talk about how to create a body inside a scaffold, then basically containers and stuff like that. Thanks. Enforcing altogether next year. 16. Flutter: Container, Center and Text Widgets: No, no, Come back And this again We're going to be talking about creating a body for our app. So let's go ahead and get started. I'm gonna create a new or add a new property our character in our skeptical, better called body. And this is ah, wife space that he's here. So anything that you wanna display here goes scientists body Panter and ah, what we're gonna first high school is a container eso container. It's basically a digit. That is the most common view heard the most to basically confined has, like, you know, uh, it has ability for like in a common painting position. Oh, sizing, uh, capability that it can price. So it's sort of like your give, as you can say, like, you know, in your web development, Um, So, uh, container can have, like, you know, a child. And this child, we're gonna still use Dexter in this case, and we simply going to say hello. Flutter if I saved it and run it. Ah, they go. You see that? Hello? Front right at the top. Uh, now, in case you on a short down at the center, what he can do is you can use another rigid. And that one is, as the name suggests, center and center has its own child. Property is all they can have, like another reject. So now you're you would start to see, like, you know, the trend that flutter follows. It basically comprises a whole bunch of fidgets. And you actually just combined on switches to build, are you? Why that you want to build s. So that's how you actually construct your app and most of time. Like you know, you can create your own videos by creating these video class with stuff like that. Okay, say we got We have our We have a container and center, and the text is now center. Now, you can actually give a few more things to your container, like you can give it a color. And that colors, for example, making these colors if I can type dot for example, blue. Okay, so if I get that how the container it's gonna turn blue. And right now, our whole apples are container, which is why I like, you know, you actually see everything turn blue, and then it, you know, turn your text to a different color, you can simply say text style. So it's a textile, and textile is another region that actually take color. And he could say colors, Dr White, and that's going to turn your your text to be white. There several of the projector that we can actually explore about a text like foreign and stuff a bit, Um, but let's do it, actually, you know, get here. So gets a phone site and you can provide. Couldn't for for example. And, uh, if I say that right now basically gonna increase the fund there we go. Now you can also have, like, you know, margins. So margin is example it is. Oh, so if I say that they would go askew can see there's, ah, there's a margin that it's created between our container and the parent of the container and now you have that gap between them. Okay, so this is just like you. No margin between that. So margin is between your between your your container or your child, child and parent and a padding. There's something called a petting and patting his between year between the child and its own internal containers. So, basically, the internal continue in that external container that's different between margin in the batting. Okay, I saw that was our container. Um, and, uh, how you, uh you saw, like, you know how you can combine based different digits to create, Like, you know, I simple or complex you I in flutter. I hope you guys enjoyed the studio, and thanks for watching. 17. Flutter: Floating Action Button & Bottom Navigation Bar: Hello. No, come back. And in this video, we are going to be looking at ah, floating Action button and Barden Navigation Bar. So I've just created a new app flutter basics, and, uh, just gonna create basically a class that class. It's going to be a state left stateless class called flutter basics. And we're basically going to extend from stateless fidget. Um and was he ever stateless Widget, If you noticed that red squiggly appears again So you know, make sure that we build our build method or override our bill method so you simply type build and that the other complete do its job. Ah, and ah. Then here we gonna basically return a material up and this material app is going to have a scaffold. So our home is going to be a scaffold visit. How it is gonna have an app are basically an app are it's ah once again looks like the top navigation bar, basically the one that holds title s. So we're going to give it a title and title can have any kind of visit basically inside it so we can use text fidget in this case and this text for Egypt is Are we going to call this letter basics? Um Yep. And then we're gonna also give ah, scaffold a body. And, uh, this body can have, like, any kind of like, you know, Children are in kind of other Bridget in itself. Gonna use center, rigid central region. Basically, a to the name suggests a putz of stuff and the center off the screen on We gonna for this example, we just simply put a text on the screen, and, uh well, uh, uh, place them, place the text with it at the center, and we're also gonna create bottom navigation. Ah, bar eso bottom navigation bar is just basically a a material widget that displays at the bottom of the app. And it is a view where you can provide a number of small other views and basically, like somebody from 3 to 5 other digits that act like, look like a tab or ex like a tab. So together. Look at another example where we can actually sent that part navigation bar. Um, So, uh, we're gonna said bottom at bar and give it a container off height. 45? Um, no. Lets her before you proceed further. Let's go ahead and try to run. This s o. I'm gonna make sure that I have everything installed for the flutter on the extensions. So everything looks good. I'm gonna go to D but and add configuration and have it just gonna add dark and Florida configuration. Now you have the launch configuration ready. So we're just gonna close thes two tabs and gonna click on Green Arrow are to basically launched the app. Uh, now, the X code built process is gonna trigger, um, while sexually, why is building the app now? There's one more thing that we're gonna add in here. It's called floating action, but so are floating. Action button is another material to fine button is basically a simple circular Aiken button that hovers over the content. And you must have seen this in your Gmail app where you actually can compose a new email. Eso That's what floating action Putin is. And, uh, well, the app is his length. So Okay, one thing One thing you forgot is our main function does not basically called. The sadness is a method called run app. Eso were simply ah, going to go in our main function and gonna call run app and simply in each life flutter basics cloth inside that just initialize in other words, creates a creates an object and then rig around So stop the app and we launch it. And this should ah, basically launched the app again and we should be able to see our bottom navigation bar A to bottom with height 45 others text at the center. That's that. Reach how this is center Richard says you can see how you have that and our part navigation bar. Hey, it's off color white. That's why you see that my color right there. So let's go ahead and fixed that. So Ah, But before you do that, how this add a floating button. So we know like, you know, how are ah, Button is gonna look like and Red is gonna replace Simply gonna create floating action button And this fucking action button, uh, beginning basically need one basic property, which is on press because it's a button, it's ah, it needs press to be present on, uh, otherwise x code of that excellent of you saw record is going to complain how that doesn't have required method implemented and we can also provide a tool tip tilt. It is going to have information about, like, you know what that button his I'm going to do. And because this is, ah, state less rigid. That's why we're not providing own pressed actions. Are we going to give it a child as well? And then this child was simply gonna create an icon. And further up comes with ah, bunch of icons built in and we're gonna use I don't start, ed. So the plus sign I got and simply gonna save And there you can see the button is showing up now and let's fix that bottom on navigation color. Um, so let's make sure, like, you know, we have, um, only we have the dinner height, but deals have color at it somewhere. OPIC colors dot maybe a light blue color and safe. So there we go. Let's increased height a little bit. And if you notice very willing to its height, the button actually moves off assault. So Button is situated in such a way where it's actually not intersecting with the with the bottom navigation bar, and he can move but in location it's all so you can actually have your butter said at the center on the top off your body navigation bar. So there you go. So some maps are you must 15 are this. Where do you have? Like you know? Certainly Burton, sitting on the top of the bottom tab are so that effect of give give You can also have, like center fluke, but it actually simply floats above other screen when you scrolls. How many? Scroll. So that's that's about it For the studio, we learned about floating action button bottom navigation button and a couple of other out . So thanks for watching and Chelsea gets in next area. 18. Flutter: Row Widget and Expanded Widget: Hello and welcome back and interventions Video. We are going to be talking about rob budget. So if you notice a in the last video, if you see, we already have our tree growing quite big for the number of digits. So what we're gonna do is a unitary factor of this a bit I'm gonna create in new method called scaffold idiot and cut everything that we have inside home and placed it inside that scaffold widget method and go returned that fitted. Now this actually simplifies our gold. How a bit and basically just it's better for the readability. And as you can see, it has no effect for our courts. If I update text and do a heart reload, it's a immediately affected. So everything is working Fine. All right, so this gives us flexibility to basically start creating other Villagers inside their own functions are inside their own methods. And then we can return them as Vigee it on. Add them basically where we want to, which is gonna provide a liberal more structure and battery but readability to our code. So I'm going to create a main body fidget here, which is going Teoh comprise a for container. So it's gonna return a container and this container eyes going to have ah, lineman property and the alignment that how we're trying to set is center. And then we're gonna said its color to be colors dot light blue. Okay, so that's Ah, let's let's start to blue, maybe. Okay, yeah, that's that looks good, blueberry because we don't want to mix with the bottom navigation bar color. And we also gonna add a child property. So for child, that's great. Another reject function and we're going to use Rove idiot. Now, row is basically like the name suggests, it's ah, roll off rituals that you can have S O s Avijit called Row that we're gonna add to our main body. And ah ro, actually takes are not child but Children. It's just it takes ah collection off off digits so you can have like, you know, a whole bunch of idiots are defined inside a row, and they're gonna be laid out in a horizontal row so we can add a text, create a text widget, and for this one, I'm simply gonna create ah home page text give it some styling for some reason my Dolphins is start working. So let's see how much how much we get type just by remembering stuff. So help simply goodness type style Here, Um, and then I wanna make sure how it's just hard freeload and take a look at the documentation . Okay, so style is going to be text style. That's what we're gonna define our style with. And our text style is going to have Ah, a color. So we can add first how? Listen, that's not use background. Let's use font her first foresight, and we're gonna give it, like a really big for inside. And you would understand the reason why you're actually using this big phone size in a minute, and, uh, we're also going to give it our front weight. We're gonna make this front a little bit humbled. So asking a total weight with W 800. There you go. And we're also gonna to find a color. So this time we're gonna use white color for a fund and let's hope he should be good enough . Now, I'm gonna make a copy of this text and, uh, gonna taste it, so it's gonna create to text regents. I did inside this role example, And we gonna basically saving run though the missing comma There's so that the air waas uh and we have rove idiot being returned to, and you can add that meet body, our main base. Basically, just gonna rename this to Main Beach and add that instead off showing that center our rigid . So we simply going to replace that with main page method and get a hungry look. So there we go, as you can see, are, um, Home page. Are Row is showing up Now Let's change this content to be something a little bit bigger than the screen size because there's there's a property that actually, can I turn encounter whenever you have overflowing, especially for row or column overflowing content. Are you gonna see this blue sort of striped rectangle? And there's an exception. So here's the detail of the exception, so it's saying it's over over flooded s so basically we need to use expanded, rigid to basically accommodate where it can containing can be contained. The text does not over flow in. It will be contained inside the screen, so expanded is more or less like a stack of you in Iowa s. Actually, there's a stack in predators. Also, don't get confused with that, but, um, expanded view is sort of like, you know, it takes the space and and basically tried tries to stretch your or filled your visit inside that. So if we have, like two expanded for just inside a row, they're gonna each how share on the space by dividing it. How 30 50% on change, the other text size to be 18 so it looks a bit smaller. But chicken, as you can see, both expanded witches are actually sharing that space equally. So that's actually one of the one of the really nice thing about expended. How is it now? There are some of the properties, so if you command click on rope, you can take a look at other other properties like, you know, me and excess alignment mean exercise, cross exits, alignment so you can check out the documentation. That's how to use it. But they're like various different configuration that he can apply even like text directions and stuff over on your roving it. Right. So let's say of handling normal time to make sure everything is working So that is our rope Bridge it, um and, uh uh, like, uh and that's where we saw, like, you know how row and expanded. How would it work together? So, uh, that's it for this video. And in the next week, we're gonna be talking about our column. Digit. So thanks again for watching, and I'll see you in the next video. 19. Flutter: Column and Padding Widget: hello and welcome back. And in this video, we are going to be talking about patting widget. So if you know this, the row that he created it was very close to the edge is on the each side when you're actually creating it. So the home page eyes on the left and, uh, other one doesn't look like but it is actually very close. If you feel rt whole text because of the alignment it to the local attic, it's gonna go any closer or negative is we are going to wrap this inside A new video called Petting and Bedding takes her a petting as an argument, and you can set edges inset all basically like, you know, apply patting to all four sides. Eso you're applying 20 points and we're gonna go and give Rowe um, a za child for despairing element. Let's say will run. And as you can see, there's a little bit of space now towards the beginning. Okay, so that's actually one thing. Art show you before we proceed on today's main topic, which is actually exploring column. Average it. So I'll come give me a column. Budget is very similar to what we have in the row. It's just opposite. So, like, you know, rubbish. It is how horizontal and call average it lays out. Elements were quickly, so one on the top of each other sounds like column. So we got its start off our creating a column budget by wrapping it inside a panning which it itself and then we simply Allah created column visit using column How any conniving and conversely, it again takes our Children as its argument. And basically around it is that real Copy what we have created in the last video. So we just take the same texts and didn't didn't copy based those, Um all right. And we cannot return column Example Mr Up religion example. And there you go. You can see, like in our column, split half enough on the screen on And, uh, this is out. It looks like How are you? Do is you can actually move text out off expanded. Uh, so it doesn't cover the and ice cream, and then the bottom one is going to cover the most of the screen. But Darkman is gonna only take what it needs. Then let's move that out too. From the expanded, that's all. And there we go. So this is the the column reject. Now you can start adding other elements into the column, and, uh, it should actually sure. Sure work for your layout s. Oh, yes, this is This was a column. Our project layout. And, uh, we're gonna be using these, basically combining them to create some You. Why? But I want to look like it at each individual region alone. So you can actually understand how they look on themselves. And once you understand how they actually looking, create and originally, then he connects to combine them to create more complex You I All right? So that was it for the studio. Thanks in for watching. 20. Flitter Image App - Flickr with Flutter: alone. Welcome. And in this video, we are going to be looking at a demo off the app. How that we're gonna create in following. Ah, a couple of videos are following few videos. So this is a simple ah ab we're calling it off. Litter basically combination off. Ah, flicker and flutter. So that's how the name originated. Basically, it's Ah, it's an app that you can very can see latest public photos hard that are uploaded in flicker. And basically, um, we can a list their title and ah, the photo inside these cards. Ah, and this is gonna be a scramble list. And basically the other thing that you're gonna notice Stay there. We're gonna create both through a fresh, and it's going to basically download Ah, and penned a new set of images that have recently bean have blown it. So flip flicker not flicker. Sorry. Flicker is actually very popular platform for uploading photos. Ah, and stepped on. A lot of people actually make them available for public use. So that's what beginning years of public FBI. So are you gonna and only learn about where yourself widgets? Um, in this during this, uh, doing building off this this app. But you also gonna learn how to download our data, create a custom model. Ah, and basically, properly, that ah, model class with the data that's downloaded from the internet and then displaying yet basically on the on the screen inside a list for you. All right, so I hope you guys are excited, and I will see you guys in next media where we're gonna create this up from scratch and, uh, gonna build out thanks. 21. Flitter App Creation: only welcome back. So have, Ah, my terminal window open. And there have, uh, moved this. Have to decide how severe Regan uses as a reference. Um, but what we're gonna do, but, uh, create our project, and, uh, we're gonna use ah terminal to create our project. So I'm inside a folder will not create my project. So what I'm gonna do is I'm going Teoh, create a new project flutter create, for example, which are hemorrhage. Um and, ah, just a reminder. Have any created a product? Your project name should be all lower case. If you want to use multiple words, I can separate them by underscore That is recommended. Ah, recommended pattern so you can hit Enter here. And, uh, player is going to do its magic and basically going to create ah, set of folders and files for us and it's working really hard. And we have ah, some files created. Ah, there we go. And it runs a little doctor at the end, and it can see, like, you know, I don't have android routine or android studio installed. Um, and, uh, basically, I'm doing all these are developments on IOS, but you can do it on infrared in IOS or Android or IOS. I just choose not to do not to install Android. It has an effect, basically the development process. It all you can take here as the same code and deployed on Android. And it's kind of our fine. That's the beauty of the foreigners. So you don't need all these things installed? Um, so just testify Height. So we are, uh we have our APP, creator. So let's td into that. And they go, We have all these finds created public camel and everything. Ah, so next we can actually in the next video, we're gonna open this inside. We just re coat and ah ah, gonna start typing self. Our own code are moving the Byler plate from remained our dart hand of basically start shaping up our flitter image Hap right cell. So you get the next fail. Thank you 22. Flitter: Creating Material App: welcome back. And in this video we are going to be going to start working into our app. So I have just read a code open, and I have navigated to the corresponding folder that we just created for image. And ah, this is the base off our project, these folder of her product of where all the files are looking. So I'm gonna just hit open here and ah, restarted code. It's going to basically open it and, uh um, create, like, you know, the folder structure everything for us here. Um, Now, how are we gonna do? You can ignore all these warnings. Now, what we need to do is ah refers to go, uh, you already know we write most of our gold inside Made are dark and there's a whole lot of stuff that it's actually written here. But, ah, let's leave this for right now. I want actually make it run and see if it's ah actually working safety koa inside your debug menu and click on this debug configuration A. So you can see there's a new configuration associated with this project. So we're gonna add a configuration and, uh, area configuration. You're going to see this one, like, you know, added by default. Um, he can use this, um, to launch, Um, and basically what? I should do it. I should create a launch. How? Request. And, uh, as he can see here, it's detecting my iPhone access in debug mode, and it's actually trying to launch. If you don't see our this configuration, you can have a really click on this and configuration, and you can add your own configuration. Basically, just selecting Frogger launch from the menu, and that should up basically give you ability. Do basically download this. I mean, basically, and the configurations, you can play it using the debug. Okay, so I'm gonna get controls a year because it's already created and usually just creates that that's energy. Click on this at configuration. So our sample happens running, and, uh, you can click on the button and I can see a Cunard's basically impeding the counter. So that means it is actually working. Fine. Now, to get started, trusting only do is when remove everything except, uh, leave main here. So listen, with all the by a break code from here, he had, uh, use remove you with this one. Um, down to six picks can actually write it a little bit better. Okay. So you can write what I mean and, uh, simply doesn't take any planters, and it's gonna call run method there. Ah, your app It's gonna basically get started are the entry point of the app. So we're going to create that now. So what we're gonna do is ah, you will create a new file under lip, and, uh, this file is going to be called Abdel Dart. Okay. And, uh, this after tart is there, we could not start writing our our code. Okay, So first thing we do is ever gonna import from package flutter material dot dart. Okay. And, uh, they're gonna create class AP State ful, which it and we're gonna select. Create state. And basically, it's gonna Are you gonna let out a complete do its job? It's kind of for Phil, the entire code for us now, as you can see, Yes. And if he saved happily looted hand, we have crash, huh? Not worry how we are missing an AP state. So let's create AB state first off type, and then we can all right, the build method right there and right here. What we could do is simply gonna return a center budget, my child as text. All right, Now we're gonna go to our main app. Pain. That's well, we're gonna include this newly created dart file. So we're gonna say import, uh, that slash so we can be at the mean, like, you know, the base of the border. And then we're gonna say after darts include that one folder, level up and slash and after start used that. So, um then, yeah, that after dark created and simply here, you're going to say ab Okay, so if you say now because we're in a crash state, it's not going to do heart reload. So we simply gonna stop the app and either click come in control of function and five basically a Mac R F five on Windows. Or he can go to the dealer grainy and click on play button and, uh, should basically launch our flicker image app. Okay, so let's wait for it to finish learning the files and now sexually thinking, setting all the files that we go, we still have hope. I know why. Oh, we're not returning anything here. So we should I didn't be returning upstate. Okay, so I hope that should how I should fix it, but has Good, uh, we can actually debug it through. Uh, and, uh, he didn't see, like, you know how. Oh, begin debug release different issues that we encounter during the development process. Because development process is not, uh, smooth. It's usually full of pickups and stuff. So it is great to experience those so you can actually learn from those. Okay, so no directionality how easy it was for All right. So we can simply to place this to a container and save it. All right, Um, it's strip search text requires directionality. So text direction. You need that hand. Gonna say text direction healthy, are there We go again. So we're missing text reaction from text. Basically, you need this when you're not using material design or anything like that. Uh, and we can actually very well change it to center. And, uh, I haven't actually looking at the center, so there we go. Uh, this is Ah, good start. Eso we have created or center. And because material happen already defines the directionality based on the the language configuration that you're using in local conflagration that you're using on your phone. It actually adopts that. But because of your creating our own region and we're actually providing our own Texan everything, we're not using material app yet. Um, this comes in do basically a play where you have to define your text direction. So we just told Frontex direction how Just to show, like, you know what we have. But that actually is a good start. Oh, no. Let's Ah, let's do this. Let's add, um, our material absolute. Replace this and we're going to say material. And it's simply going to have a material up here. There, we gonna show the app mean mean app structure. So let's follow. It's gonna have home. Let's give it a title. And this title is basically even your app. Okay, Um, it is complaining. Something text can't reassigned a single look. So title has to be a strength. Okay, I had second is basically give a home and they create a scaffold. And in this careful do you create app are And this at bar They Steidl Aztecs Regent. Okay, there we go. All right. So did you see? Ah, the pilgrimage. And if I keep this, uh, in are how basically in our app nap. Ah. Then basically ah, you're going to see Okay, so, uh, is picking up picking up the name as the app name, But this is where Android actually differs from IOS, and I want to point it out for that. The name said, you see at the top right here. Ah, these names are things. Name right here. So if you look at Android that that sort, that's what you're going to see, basically, is those that that name to appear, What you provide in the material lab. Okay. Anyways, um, so you have your APP hub are created and you have your little, ah, created And, uh, next how are we gonna create body for our, uh, view? And, uh, this body lists give it a scared of center? A new keyword is no longer needed, so that so I'm not typing it. Um, text. Oh, Cliff it. Okay. All right. So there you go. Ah, that is our, um our material app. And and now, in this case, as you notice up Excuse me. We did not have to define the text direction because sex direction is taken care by this material app. OK, one more thing I want to do is, uh unless removed this because there's no point having it here. Um, debug show checked mode banner. So this banner right here, um well, it's kind of family s Oh, we're going to remove that Gus and publish a false here, and that banner is gone. Okay, so that is looking good so far. Now, before we leave, I want actually create one more. Thanks. I wanna create a function. Our method that is going to return a loading widget so we can actually show loading which it right here now, because we're actually gonna work with images. How we're gonna do is, uh, when a creative list here list huff something. So there's something is basically the major model. So s create image model, and we're gonna populate this high feature radio are probably in the next video, but in a bottle dot dark. So at least I can actually create this so image model. It is just an empty class, and I'm gonna import this. No. Yeah. Second, create you makes marble images and initialized empty, right? So I can use this property to deter. Mind if I need to show a loading progress or I need to show him ages. OK, so we're gonna create a function that's gonna return Avijit. And, uh, dysfunction is going to be a loading indicator tooth. Gonna return center and the center child. It's going to be circular progress indicator, except okay, I would hit option space F or former document. Now, just to make sure all the inundation, everything is correct. And in this place where we're trying body, I'm simply gonna say average immediate start lend this equal is equally Kojiro Fidencio. Then I'm gonna show loading indicator otherwise. And when the show in which list so and create another project, Have a hand. This is simply gonna return container for now. And, uh, x a you made. Okay, so now what we have is we have these two functions and depending upon how many images we have in the array, be either gonna show the image images are ah, basically list of image or a loading indicator. Okay, so let me do he quickly fresh and her Relaunch it. So you have something missing here they go a semicolon with missing. So this relaunch this. And, uh, where were, uh, support we're gonna basically see is there's a circular loading indicator will be shown at the center of the screen because our current image sites image every size is zero. All right, so there we go. We have our of this infinitely Ah, loading. Ah, indicator. That's gonna keep showing. So in the next year, we're going to start working on our image model, um, your creator memory model. And we also gonna work on our image fetch basically from the from the internet. So fighting and populating that model that we will create the next week. All right. So I'll see you guys in next video and we'll get started. Thank you. 23. Flitter: JSON Data Download: hello and welcome back. And and they figure we are going to be working on the image model, the model class that we created in the last video, Basically just a placeholder. So that's probably this And this is going to be the model that's going to represent our images, basically, is gonna have to property. So there's gonna be a title, and there's going to be a u R l. And, uh, we're gonna popular these using the Jason Data that we dangled from public flickering FBI. I named this app such a way that I'm actually getting confused sitter and figure. Sorry about that. Okay, so we're gonna download that data from public FBI or flicker and then and then we're gonna populate it. Ah, bubble it. It right here using the image marble. So if you start so created string and, uh, this string is gonna be the property name is going to be title has the other property called String two R l Now we're gonna create constructor. So, first constructor, uh, basically the default constructor is going to take a table, and uh huh, Girl, it's They're not doing anything extra. We can just are simply type it like this way in one line and and just leave it that way. It's gonna set these properties, so it's gonna expect them, and it's gonna probably set them. Um, and, uh, because we can only have, like, you know, one unnamed constructor in the dark language we have, uh we have to, uh, basically create a named constructor if you want to do something else now, we do want to do how something else. So basically, we do it when we download this Jason data from from the Internet of Yuan actually populate our model using that constructor. That way, we don't have to actually Powers basically, for each file for each record when we downloaded, we can actually do it right inside the constructor within the model and model. It's going to create the image object model object for us. Okay, so let me show you how to get to that. So didn't simply say you may marvel Dr from Jason. So this may be a name constructor, and this is gonna expect is basically it's gonna expect a string and dynamic map. So map is huh? Map is just a, uh, dictionary. Ah, develop air. Basically, um, So it's gonna expect a key value pair Ah, map. Their key is strength, and value can be anything. Eso That's why dynamic. And once we once we once we are supplied with this data and this constructor definitely gonna say they start title, for example, it's going to be Jason data that we have received and way know that that data is going to contain type. And I'm gonna show you the model. Actually, it's let me Philip the model. Quick. So liquor. Ah, photo feed, eyes what we're, uh, looking for. So let me you pull this up right here. Okay? So all right. So this is our This is the flu group. Yeah, and, uh, is one Ah, suggesting endpoint. Others. One parameter that's missing here is Jason. Call back. Should know Jason call back. Should be one. Because if you actually don't put that at than dysfunction, this Jason is returned as Dow Askar callback function, and ah ah, your flavor is basically going to throw an exception, saying, like, you know, it's the function. Just not Jason file. So you have to actually do extra work in order to sort off parses out. Or you can actually specify in the FBI letter on the FBI on the your levels that they should not be any call back. Message heard. So So it's not gonna be a callback matter that way. It just sent you the Jason. Okay, so this is the day sound that he had returned. And now we are not interested in these, um, thes properties is simply going to ignore this. And then we're downloading our Jason. We're gonna get items and basically it right over each item, and each item contains a title and whole bunch of other properties. But I think that we're interested in a Steidl in this am inside media. And this is actually the file. How that that we are actually image file that we're actually gonna download from this. You are now. One thing to notice is ah, this image is very small. So if I remove this m from the from the link, it actually gives you a nice, um, size photo. All right? And if I do I guess if I do Oh, I should give me the original. I think so is no longer valid. So good to be Yeah, be is very yet, like, you know, more high resolution image. So you can actually either have, like, you know, be our In my case, what I did is I just simply removed it. And I got my size photos. I started using that so that so again do eso We're going to be parsing title, and we're gonna be parsing this media, the sub sub tree off media and gonna be extracting this em out. Okay, so that's what that's what we're doing here. Were saying, like, you know, or title just give us anything that you have inside title. And once again, it's not this title. It's actually titled under items. So when we gonna supply this Jason data to our image model, it's gonna be one off the this item, the highlighted area, one of this item. Okay, So you gonna trade oh, items and we're gonna hand over this section right here. Okay, I hope that's clear. Um, so we're gonna say this start you're ill now. Before we do, they start your URL. We have to actually do some some cleanup work, so I'm gonna create a final ah, string. And this is going to be media you are. And I'm going to take these on data and say, go to media Key and go to its M Key and give me that value. Okay, So you gonna, uh, going to get to this media and M, And that's whenever you have this access to this link This, you know, for the image. And that says they're gonna say they start to you All is equal to media euro dot Replace first, begin a user place first, and we're gonna replace underscore m dot j peg to dot gp. This way, um, it's actually gonna remove the these last extension and underscore m grab jay pay and basically simply attached doggy bag. So you're gonna get a good resolution image that we can show in our in our app. Okay, so I just saved that. And, uh, now it be head back over to our, uh, Abdel Dart. Oh, look into his. We are good to excellent create. Hey, a new function here and this function is going to be returning a future wide and reason we're gonna return future ward because began to use the same function for our refresh for fresh controls. When refresh control expects a function to refresh data. A niece, a future return type, and we can say future Avoid that way. It's actually it's conformed to that. We could have actually simply returned. What if they're not using? Um, if you're not using the the refresh intro, But we are in this case. So that's what we're gonna actually leave feature Boyd. And now here. I'm going to use a think, uh oh. Wait. So I'm gonna die a think you're And then how are we gonna download our data? So before we actually download data, first thing we need to do its unity include a CDP how model? So, um, the way, um, you can actually you know, basically what you what you're going Teoh need, um is if you go, let me start it for your floater. It it's and there is a link, but you can actually have. We just can't locks, pull it up in the screen. So see, if you search for a city P Hi. Um, yes, footer ASAP. Reject, but crested from the internet and, uh, gonna have at a city V package. Now you can go to discern site to sever I was trying to go, but pub that startling that our packages and, ah, this is the website. Very gonna find all third party packages. Ah, that you need to actually third body as unless off letters own. Um And, uh, this is, uh, like, you know, place where if you're gonna get access to, like, you know, those packages you could you would know, like how to add the dependencies, how to install them and basically some examples for them. OK, so we're gonna be using STD B in this case, but he can actually simply search here, for example, A should be, and it's gonna give you. Oh, see, you simply click on the 1st 1 and I want it with Went on, install it. I'll just copy this dependencies history to be wolf. Uh, go to my bub spec dot gmo, um, file. And under Cupertino icons, just paste it. And as soon as I save your Syria code will install this package for me, and, uh, this actually gives me access. Ah, and ability to connect my AB to the internet basically using STB package. All right, so once we have that, we can actually go back to our after dark and you can import this package. So we simply going to say import package STD B dart. Yeah. We're also gonna need dart convert. Basically, that's used for Jason. Jason decoding. So you can actually important that that dark convert now back to our back to our function, being actually gonna get our images. So, uh, that's created available response. And, uh, this is where we're gonna bait get so get it The function to make a get a call to the internet on be simply supply. You are all here. So I'm gonna go back, huh? And, uh, basically and let me take this. Copy it, and we can have based it right here. So interruptus euro is simply gonna basis, huh? Connection? Harthi ap I end point. Okay. And now, basically this call. Ah, wait, because we're using a weight. Ah, what's gonna happen is, um it's gonna person immediately the future. Ah, feature object. And basically, it's gonna wait for data to be downloaded in the response, and then it's gonna proceed from here. So what we can do as you can simply check if response that status code is 200 that means he had successful have successfully received our data on the status color is 200. Create a map, Jason, that decode and then supply a response body. Okay. And then we're gonna create image his Jason, And this is going to be our map, um, and items. So once again, um, we're gonna get all of this back. And what we need is because it's a que l a pair begin simply you never get to items and take items and extract its value out. And the items is an array off dictionary. So that's what we're gonna get here. A collection of dictionary. Um, so he's simply going to, uh, do for each and gonna print. Maybe it's a standout for each, and this takes a function Hi. Hand simply on a print. Our that's gonna more Dari may trust. So you're going to say file image m just a temporary variable or image model dot from Jason . And I said, Are you going to supply our image? Uh, so we're gonna supply this portion right here. This object right here, Um and, uh, that is Theo image. And once we have our inhaler image data parsed week Simply going to say image m dot title and you gonna pray that for that? So in here and the image list, what we're gonna do is, uh, are at the center. Actually, let me temporarily reprinted right here. So just click on that and state and we stop. It starts the app. So we should do is ah put a break point. How? If you do is issued download data from the Internet, Jason, and populate basically Digard that body that we have received in the response part of his pants, regarded into Jason and then navigate to us maps key it Zielinski and basically, uh, load all the all the all the collections basically map all the collections into this images Starches. So mission started its on. It's gonna contain ah, collection off these individual key value pair items. And that's where we gonna use that and treat that as one map and supply to our image model and get our image model object back. One thing I forgot was that so make sure we have that in where you run it. I was saying you going missing? I said, it's actually, uh, launching. Okay, middle process is done and, uh, a second Now it's gonna launch. Okay, so you are a break point with it. Um, Then we're going to new It's gonna hit the next break point. Um, that's what we're going to get this 200 s. Oh, I see our service goes 200 that's the response that we got. And as you can see, the body year seeing upload from everyone and there is so there are, like, a whole bunch of takes. But But he had This is where our items object is. Look at it. So let me step over this. He had, uh there we go to get the map off are basically data, and there you can see items. And if you expend this item you see, like, you know, the key is items end. There's late that, like, 20 items Ah lister right here and you can actually check out each one of them. Um, so what? We're doing it. We're going over each item and printing, converting them bust into my model and printing their titles. So if I continue Ah, you see, all their titles are printed right here. I said, that's a good starting point right now. You have successfully downloaded and polished data are that that we have received from Gregory P. I. And in the next video, we're going to start hard working on our rigid to display them on the app. Thanks ST Rising Else against next year. 24. Flitter: Display images in card: all right, so so far in this year, getting all the images and basically printing their title. But really, what we wanna do is, um, well, actually populate This image is variable that we have created now because this is a state ful our widget. As you already know, we in order to set any of the elements that we're actually using inside the state, we need Teoh go this set state method. So that's what we're gonna do. Are we gonna basically call set state method inside our get images? Okay. And, uh, it simply going to say images doubt insert. Now the reason we're doing insert because you are Now I'll bring new image and basically a pendant to our existing images collection. But if you're simply ah, if you want to see just like no brand new images set off brand new images and you don't want to like, you know, basically you want to throw away all the existing images that you have a near in your Babel are in your collection, Then you can use ad on and and then you can simply go from there. So let me show you the insert and then I'm gonna show you. Add it all. So you simply say image em here and this is going to actually create are basically insert Ah, new image in our images collection. Okay, um, if you want to discard all the images, you can simply say egregious. Um, So right before you actually go inside here, he gonna set images. It's equal to blank array. So you gonna basically re ah, initialized Thackeray to make it empty, and then are he can basically removed Are elements removed, like, you know, first last at range and or anything Hurry can simply re initialize. So we're going to really try this, and, uh, then it simply going to say my just start, add image him. Okay, so this is going to basically add that those images basically replaced us images for the new set. All right, so let's keep the sun. I'll show you both behaviors. Um, okay, So now, uh, in our build, her method, we have ah, this body were checking if images lent zero, then we show ah, loading indicator. And once we have loaded all the images, we actually call image list, which, actually which is going to return us. Ah, the container That's actually gonna be responsible for displaying those images. So let's work on this now. So what we're gonna do is we're gonna replace this fidget into something called list view. Now, let's view you can initialize it, just list for you and like have Children, property and everything. And you can have, like, you know, basically elements defined inside that Children property. Um, this, uh, list view is not going to be dynamic, though, so basically, when you create ah, this list and the elements into it, they always gonna stay in memory and they're gonna memory hug your app. Also your memory footprint for the app. It's car going to keep on increasing. So there's no usability aspect off, like, you know, for the images or for the cells that have gone off screen. Similar concept eyes known as table view dot de que, um, cell in iris in recycle review for the android eso. What? What we're gonna do is we're gonna instead use a builder Ah, method that actually creates a dynamic list. So in a year's builder inside this builder, it takes ah item builder. So item builder and item count so I don't count are going to say images ha dot length. Okay. And, uh, next one is going to be item builder, And this'll is a function that actually gives us access to context and, uh, index on, and that's it's basically, um, where it's going to show you is just like a Roy it and expat for Iowa's. But it actually gives you the current index, and we can go inside this images collection and say, Give me image or give me sell for this index s so you can actually get the image model for that particular index. So you're gonna see, like, you know what I'm talking about. Once we write that goats, I just hit options shift F to format like old, and now I'm gonna type. Basically, we're gonna take something here that is going to be displayed in our app. So this list for you is going to return. Let's return in a simple text rigid form and this text widget. We're gonna show images index begin to current index dot title. Um, and that's a look in return. So just gonna notably run this and, uh, you download the app. So what you just see, basically, um, is once we have her images downloaded, um, then we can actually show the title off the images inside that inside that list for you. All right, so, uh, build is completed and outs installing the app. And there we go, the fish. See? Ah, loading indicator for a moment. And then we should actually get the data downloaded. There you go. So this is the list that we have and these are all the titles that were getting the empty that empties faces that you see. Actually, those are titles that those the entries that don't have any kind of title, I'll be just fine are directly okay with that. So let me introduce you to a new, um, which it now. Ah, this one is called card. So beginning. Use that card. Um ah, widget. And before that, we create a final Babel here. So final, you meet data, you make it. And we're gonna keep our reference to the current image into this images, image, data, people. And from here, you're going to return the car now. Card takes Ah, some properties like it has a margin. They can have like, margins said guns at all. So it's gonna actually appear as a card. So let's give about 10 points here, and elevation is see how ah, drop shadow. How hard the drop shit is gonna look. Basically how much elevated the card is gonna look in the shadow is actually gonna be, ah, shadow effect that's going to create give that elevation feel to the card so we can put four here and then we gonna put child. And this child is going to be something that we can actually put our all of our other visuals. And so we're gonna you create a Colum budget and Colin takes Children. It is a collection off collection off idiots and hear how we gonna simply give our image. So let's give our image image is one of the cart and, uh, for we're gonna download from the network. So we simply gonna say, Mitch, stop network And they were going to say image data dot you, Earl Hey, thought in a refer and, uh, second Gillard is going to be image data. Sorry. It is gonna be text. You mean data? Don't take a look. If you run this now, you should see basically these images getting downloaded and, uh, shown in this card view. Okay, so this is what we have. And as you can see, we have thes card. How? Card? We are showing up, and we have our text, and we have our image, and we are showing those images properly. So it's ah, it's looking. It's already looking very nice for the amount of cold free have written, but, ah, just make it a bit more better. So what I'm gonna do is, um, first of all, if you notice ah, these edges right here around the image, they are actually not, um, not rectangular. I mean, they're not circular, but their conflict sharp rectangle. So what we can do is we can use something called clip are wrecked. So Larry type, it s so we're going to create a new element clip are correct. So this is a project that actual eclipse. It's a child using a rounded rectangle. Okay, so we have two choices we can do is so we can being clip the card right here. Uh, with with this how clip are. So let's try that first, um, I would give it a try and see the colic How that looks. It's a clip. Lower, direct. And, uh, it's going to have, uh, first of all, it's gonna have border radius. So, um, uh, we're gonna see Border Radius, and you're gonna say they get interested in all three cases, so we'll just say 10 our escape. 20 points for each side. Okay. And town. All right, so, uh, this is basically radius dot circular and to give it 20 points. Like so. Okay, Next, we actually give this, um, a, uh, child property and this chap property is what our card is going to be. That how once I get I am going to Harsha, Uh, press option shift f to form it. My document. And then I'm gonna save it one more time. And, uh, no, I don't think we had, uh, didn't any change, so OK, um well, I did not try the thing, so I just want to want to give it a try and see, like, you know, if this works out, but it gets it didn't That's Carly. Out already has its own property for for clipping. So what we're gonna do instead his we are going Teoh clip our image. So we're gonna say clip are wrecked and we can't give attack in Porter Radius. And, uh, we're going to say it this time I'm gonna say border. Uh, radius Onley. Okay. And here we're simply going to say we're only interested in top left. So radius got circular 10 point and top. Right radius. Secular. 10 points. Okay, uh, now we're going to give a child property as well in this child. It's basically going to be this guy right here. So this is gonna be our image is going to be the child. And if you notice are corners have actually turned ah into rounded corners. So I see you can see it this one a little bit better. Um, this one too. So, uh, yeah, this one is actually perfect, because you can see the rounded corner right there, and we can actually give it eight point, I think, if going to look little bit better. All right. So that it's good. Okay, so now how we have our image and, ah, images being clipped. Everything. Um Now, if you notice, this text is very close to, um what we have this image for So what we do is we can actually create a simple container in the middle so could attain there. And, uh, give this container some padding. I mean, always gonna have is basically this batting for bottom off 10 points, okay, that we is gonna be a little bit off breathing room, so it's gonna be named property so bottom and hi. So that's going to give it a little bit more padding. Now, our text doesn't look very nice, you know, because it's touching the bottom edge, and we're gonna give it a little bit padding to that. It's also we can actually create a container. But there's continue reason I created here because it acts like a divider other than this Carly out. So for that reason, I'm actually creating this our container, but less add something new to this so we can create something called panning. And, uh, this batting can have child and child can be this text right here. Okay, Now, what we can do is how we can give this, uh, batting some style. So I mean, some betting on it. So padding edge and set all 20 points. Hey, so that's going to give Ah, this text a little breathing room. Now this taxes are looking very plain. So we can do is we can give the stepped texts some style as well. So I can say, come on text, um, or basically style and the super to be text style. And, uh, textile can have color. I'm gonna use colors dot Can you something? Hold black 87. And if you hover over this, it's gonna show you list off how black? 87 Actually. Look, it's gonna look like which is, like, dark gray. So that's what I want. And then we're gonna have fun sites to be about 16 points, and then you can have a makeup text alignment to be a center. I think so. Uh huh. And how we can also have overflow. So in text overflows, what do you want to do? So, text overflow dot clip is something that we want to do, but he can do ellipses. Um, I'm going to do a quick formatting and, uh, in the safe, okay. And basically gonna stop the app and restarted so it can download on new data. Just get, like, better images. Because there was an image that was very tall, but there was not taking, like, you know, the entire rental space, so we can actually get a little bit better images. So let's restart, and it's almost almost ready that you go. All right, so this is much better. Uh, says you can see we have, ah, text showing up nicely. Uh, how these So these images are looking really good. Now where you have ah, no caption of, uh, if you noticed we're not showing anything, which is which is actually fine. It's not. It's not a problem. And there we go, like, you know, we have multi line text and stuff. So, um all right, so this is already looking great. Now in the next video, or we are going to be adding a refreshment also, when you pull down. Ah, this, uh, this list for you, we're gonna show our fresh controller, and it's going to download on new images and basically going to update our dear said and display those images at the top. Right? So, uh, hop onto next video, and, uh, well, actually, um, wrap this up. How would refresh control and, uh um and then we're gonna do some re factoring at the end. So I think the writing all Seaga's in next video 25. Flitter: Add Pull To Refresh: alone. Welcome back. And, ah, this week, we are going to be adding the pull to refresh our functionality to our flicker image. App eso So far, if you remember, basically we have our app Uh, that loads flicker images on load. Basically. Excuse me. Um, And, uh, what we're doing, basically is yeah, announcing the app and then ah, loads images after a little after a little bit of delay. Like so. Basically, it's been stumbling. We have, Ah, the show loading indicated. Then loading indicator disappears when we, uh, get list off images. Okay, But we do not have ah ah, way to get, like, a new set of images. Or like, you know, fresh images. So we're gonna do is we're gonna add a pole to refresh eso we have. If you pull down on the list, it actually refreshes are the images and append them or replace them basically, um, and show the new it is. So let's go ahead and do that. Ah, so we don't do is, uh, we're gonna use something called refresh indicator. So when you type that out here, refresh indicator okay. And this takes Ah, child and child property is basically going to be our list. So you gonna take this? And, uh, you gotta put our list inside this and then be simply gonna ad miquelon here, and I'm gonna removed its return from here and added back here like so Okay, what do you have? What you have that, um, there's one required method that we need to actually provide for the refreshing. It's called on refresh. And this is there where we need to provide, ah, method that actually returns a future. So if you remember when you created this this method get images were already returning future void here that tells, Ah, our refresh. It'll that this a p I is going to return something in future recently? Yes, and it's included eso you should rate for that. And when Theo the promise basically, it's fulfilled or when the data has received, then display the data. So that's what that's what this is. So, um, we simply need Teoh type get images without parentheses. Okay, Eso if you do that are happy is gonna start working again. But if you now, if you pull, you can see that refresh. Ah, refresh icon has appeared now, so if you leave it, you get a new set of images. Yeah, There you go. So, at this point of your actually, um, what we're doing is we're replacing, like, emptying the D array and then adding new images into the budgetary. So at any point, we only have 20 images inside our inside are listed. Now, if you want to change that behavior and upend Ah, you simply need to comment. He slings out, and you have to say images not insert at zero, and then your images will start to upend on the new ridges will depend on the existing images at the top. That way your image, the way it's going to grow this keep in mind and take this as a challenge for yourself to basically implement some sort off for reality out there at one point actually trim these images and make this, uh, this array not growth too much. So basically can put a condition that if disarray grows like more than four year 50 or something like that, then you simply No, take that, uh, and and remove last items last 48 hours are so from there. Okay, uh, one, um, one last bit that I want to show you. Like I just want to show you how you can take some of the some of the sexualities and move them in, do its own file. Basically. So what we're gonna do is we're gonna create a budget and move refresh indicator inside that I m in it list is gonna appear from a different file. So that's that. That's a reflection going because, if noticed, most of our work is being done in Abdel Dart, which is looking really, really big, so you can actually make that change right now. So I'm gonna create a new file. I call this image underscore list dot dart and we re factor this cord on basically moved this gold out from here and put it in a sock on a stone file and creative agent. So but so far, we can import package. Let her tail don't start. Okay? We also kind of need back his dart of packets, scdp, because we're moving the portion where we're converting Jason and everything as well. So beginning. I need convert darken work, and, uh, they need our image model. Don't start. It's all okay now what we're gonna do is we're gonna create a state full region. So if you die Esty f u l and hit enter, it's going to create a state for Bridget. And simply gonna name it. Gonna say image lift he's gonna create, basically image list state, full budget and state has all, uh, Now, um, this is where we're gonna start making from changes in the state are gonna create a variable, just like what we're doing in the last time to meet model images to hold our images. And, uh, then we're gonna have in its state instead of the place where we actually call your initialization. So, um, our get images, it's going to get called from here. So I'm gonna take get images from here tens and, uh, basically putting right here so I can use get your ideas. He had a step. Okay. Next thing next thing I'm gonna do is, um I will take the, uh, build method and, uh, a return tous from the build method. So it's, uh, returning. I'm going to return if they made certain length is equal to zero. Return loading indicator. Otherwise, return image list. So as you can see, I'm simply copying and pasting or cutting basically from our Abd ar dirt and moving that code into its own file. So, uh, we really says us a sick this last one and could move that one I hear saw. All right, have you Now you see that error because you don't have any of those methods that were saying Do you have your calling them? They're no longer there. But we simply can I need to do computer, clean up first and, uh, don't say import dots life. Um, maybe it's too dark. It's in place of party, is simply gonna initialize. He made a list, and, uh, then Kuala There we go. So we have our app working again. Same functionality. Everything is working fine. And if you notice are after dark looks much more manageable. Now you can further re factor that you can actually extract all these guard functionalities . All these clip direct into its own, huh methods just like we did right here for the loading indicator. But I'll leave that up to you guys to re factor this further, to make it look a little bit more nice, so you can do that re factoring and clean up your code. So this was our flitter image app. Hopi guys. I enjoyed this video and, uh, thanks for watching. 26. Flutter Calculator: Stateless vs Stateful: hello and welcome back. And in today's video, we are going to be talking about one of the really important topic in flutter how called Stateless and State ful regions. So you might have noticed s. So far, we've been creating state less widgets, and we haven't really test upon Ah Staple s. So that's what you gonna do today and for for sample. What we can do is we're gonna build out a calculator, a simple, very simple carefully wrap, which is gonna show you how state ful widgets work in ah, combination with stateless image. It's so, um so let's get started, and I'm going to go ahead and launch the creator in your project. You simply say, um, letter create and, uh, we call little on simple Kalac, uh, and hit. Enter it is going Teoh, create all the necessary files on well, lives for us and create the structure and we are ready. So now we can actually quit our our prompt and go back to registry that code click on open to open our new project. Okay, there we go. And, uh, if you are vehicle off during hard last, all of our last experiments our we've been actually looking at made our dart file and we've been removing everything that we have all the same level. We're gonna be still gonna do the same thing because you want to write her on coal and learn how flutter actually works. But before we do that, this sample that's created for us out of the box has some stateless and state for which is still the stop about that. Okay, So stateless widget is basically something that does not have a state. So, for example, something that he just want to show off for visual aspect out. For example, you want to show an image or a label with text in it, It does not have a state. So you don't change or save new value in that, uh, label, I mean, even change label and stuff like that. But again, that's actually modifying its state. So you have something dynamic and you have something static, just like invemed development. You have some static resource is like images, stuff like that. So you, when you put them, you put them inside of holder and package it and then you have that mimic stuff, which is more sort of like a code that you put like, you know, inside it Always good file. I see female sometimes, like, you know, SB and jsp dot net and stuff GSP and hasty shot and stuff like that. But you got the point. Basically, wherever you need the dynamic behaviour, yet you're constantly changing Ah, state. And you're basically you're getting, ah control in modifying its values somehow to displayed again on the screen. That is what ah state Fallis. Okay, so So we're gonna ever going to see the example. But most of them, what happens, like, you know, when you have, like, a splash freeze screens that are launching another screen or like, you know, there's a home screen that's actually gonna host all the other screens and stuff like that . In those cases, you actually create stepped aside so anywhere. Just remember anywhere you need to simply dio presentation aspect of your car. That's where you use stateless and but anywhere you need to use a, uh, a vegetarian actually changing state. You're doing some calculations you're doing performing some work and displaying that on the screen that's there. You're gonna need basically a state full widget Now that's that's it for the studio. Actually, I just want that I just want to really cook to talk about that. So in the next video, let's get started. Like, you know, building this calculator app. Right? So I'll see you guys next day and started. Thank you. 27. Flutter Calculator: Home Screen: hello and welcome back. And in today's together, we're going to be started starting to look into creating our own simple calculator app and learn about state lesson state for which it's okay. So let's say started. I'm going to simply remove everything that we have here. I must have fallen. So that goes blamed, Dave, go import. And you always want to make sure you import trust. So you're gonna import packages package. Dr. And you are important material. Dart so engaged with you and talk about import statement imports statements are, um, basically the way to include packages that you want your life within that file. So, um so basically, you can just import, like, you know, as the cats. As as as, as eagerly a project, you can actually important things that you need to work on. That on that page. Now, beginning use. We've been so far. Have you been using import statement to import library stone printer In future, we can actually see how to import libraries from third party packages. And also today we also going to see um So this is so Caitlin Lewis ever. It's out today. We're going to see import from package from flutter, which is love really dumb. And we're going to see import from another file. So we're gonna create another file and we can actually import bad s so we can actually use it on this page in reference. So that's gonna be important. You're gonna see today in ah, in next project. But we couldn't create next project. That project. We cannot see Blake in how you can import third party packages and use them putting your foul high. So that's that's coming. It's off. Okay, right. So Orlando is first, we're gonna create our main so mean remember, Maine is Maine and it is needed. Then you're gonna create your state less urgent. Now you type like no class off name extends and all that stuff are you can actually use a short cut. So from what comes with hope on the fat person, one of them is STS. So it's a pretty eyes conflict, a template. Others have pretty ricin for us and really available. And it's called SD l s s. So if he actually type that and hit enter, are you going to get this attempt is created for you and they changed the name. So I call it my app. No, Mike Elk. Okay, so So didn't call it. And you just save it and then go. So now we can call this. It's able a nap. My coke? Yeah, right. Lesser include Ah, a child. So tell this going to be our markets material app And this material app is going to have a title. They simply say cow curator And it's gonna have theme. The team is away basically for you to define, like, you know, what kind of teen years a navigation bar and everything is gonna follow us again. One another material design concept and makes it very easy for you to define how your navigation is gonna look like bottom bar is gonna look like stack parts and stuff like that . Everything follows that theme so you can actually referred to state out later on like, you know, call team and say, Hey, give me this Seems text box. Our battle font tar title color our body color and stuff like that. Get that? So that's what we're doing. Actually, their material app is our base level lapse of yuan actually provide theme at the base level at the very top level, so it can set the tone for every other page that you're gonna create. So you're gonna use primary colors and find Bugler, um, primary squash actually use. And, uh, we are going to say colors dot blue. In this case, he also Then it could get home. And, uh, for now, I'm simply going to say, contain there and a child is going to be text with some daytime. It really simply Okay, this is what we're gonna have a reason is our to run this Belen, run this so I don't having configuration added. Still last ad configuration and boom, We have configuration hit, run, and you have to go. So while it's building and doing its own thing, what I'm gonna do is ah, I'm gonna go to live folder and they begin right? Taken, add new file. Okay. Now, Ah, remember all the work that you do in flutter you actually, most of time he actually going to spend inside a slip ful? Uh, sometimes you're gonna go to pump spect out Thiemo do have dependencies and stuff like that , and, uh, and basically, then they're gonna then going to go on and add those dependencies. But all the other folders, like android I android I waas build. These places are basically there for 40 year for your android specific or I specific content native court, which has already generated for you. But sometimes he had to do some art configurations and in those cases, you going to do that? But most of them couldn't be inside of the lip. Okay, They got you have our app and let's do center Santa. It's gonna look much bear. Yeah, they someday that high that looks that looks pretty. Okay, so, debug Jack More banner to be false said that create any file. Okay, It's a new file. It's going to be cold, Jack. Later home Don Dart. Okay, so this file again and do import letter. But Dale daughter And here. So here, we're gonna create state full lap state full with it. Why? If you go back, this is a recreated steak. Listen, because we're not really maintaining any state for anything, they're simply creating this dear lap and putting it on the screen there, not interacting with that. We're not doing much with it. So, um, calculator is a place where you won't actually interact with the number saying, do calculations, addition, subtraction, stuff like that. So that is where you actually made a mistake. You modify state you actually do something with it. Okay, so that's why your guy create this as a state full. So remember, again dynamic stuff goes in, then you get the state full. And if it's static stuff, then you get the stateless okay. And creating state full is very easy. Simply type STs, SCF ul. And down he actually hit. Enter all the place of a beating you to change the markers already highlighted. You have a concern showing up there, some simply going to start typing kill you later home. And as you can see, it can actually change that for you. So what happens when you read a state forwarded? Well, state full visit? Yeah. Base class, which is gonna be stayed for a couple of home in extent for a state full visit that has e method that actually creates the state. Now the state is something that he create for another control that actually maintains all the states so it actually extends state off capital it or home Okay. Now, here in this part, this is gonna be more or less likely the same thing as you do the state message it, except it's gonna actually in hurt from state, which gives it ability to have something like set state and in it state. So you get a much less stuff in there inside in state, and you can have, like, you know, you could change stuff and set their state and stuff like that. Okay, 30 metres are going to go in there, and you're ever home isn't actually managed against that. So it's creating that creates state, and that is a required matter to have a quiet function to have inside state from region. So Ah, what we're gonna do is I'm gonna positivity right here. And from the next video, we're gonna start looking, filling this space slowly, and I'm gonna render everything on the side on our screen and make a couple of working. So ah, that's it for this year. And I'll see you guys in the area. Thank you. 28. Flutter Calculator: Input Fields: All right, hold on. Welcome back. And in this video, we are going to start looking. Creating are a couple of home page. So let's first do fixes error. So, uh, first, let's create its careful now one thing. Um, I want you guys to, uh, you guys to know that whenever you create an app that make sure at the home a two base level, you have a material app now from their arm, you're not going to create a material because material APP has a so navigation system, its own theme, its own everything. So think of that adds like a container. There's actually that has wrapped olive here, content around it. So you if unless you want to launch a new container, you know you are not gonna create material. So for every single page that you're gonna create from further on are you can always create if scaffold Okay, so that's what again do It's how you could create a scaffold and scaffold is going to contain our page in information about our page students at bar and that that bar is gonna have pedal. And, uh, what is the next kill? Que later are just a complete okay. Now this app are can contain or hit will contain body. It's all for now. We simply gonna center and, uh, put a text. No, but a child. It's a text someday. Down time. Okay? And let's be wise complaining how course that is? Because body is not part of that bar. I'm sorry about that. Body is part of careful. Okay. Okay. Scaffold has body again. So there you go. We have that. So let's go and see how I can use this inside our main. So And I run. We talked about import segment. This is where you got to use that. So he simply go into top. Many say import impart. And the way you reference your local power. Simply dot slash You know, get to that same level of holder. And you say I only used calculator home. Done. All right, that's good. And then I simply gonna replace its center home to ah, the calculator. Help and create an object past that, and voila. You have your you have your page created. So you just learn how to actually further, um, separate out here code and re factory restructure code to make it look clean and, uh, put it out in a separate file and stuff like that. So that's a good start. Okay, So, um so let's get started with our body. And, uh I mean, do close. Everything are two weeks. Everything okay? So we need to delete it. Center. Go. So that first create a container. Okay. So, cantina. Yeah. And inside this container busting do it's gonna add some padding. Okay. And patting is, uh, again, this is a constant. So simply going to say it's a constant in edges all. And I wouldn't give 40 points, I hear. Okay, so it's gonna be our entire container. Um, Then I'm with your child. A child is gonna have called as another picture. Now, this column. If you remember during the column video, we discuss about that 1,000,000 excess element and stuff like that. This is where you actually get to see it, and it's actually a little bit more clear once we actually use it on the screen. So let's go ahead and use it. So there's a main access alignment, and this is going to be main excess alignment. Let's start with center. So I want to put stuff on this, Start putting stuff from the center, then gonna have Children. And Children are, like, you know, year all year components, other components that you gonna protected, place him here. So next text in there and this is a very gonna show our total. So that's what this text death? No. You say, uh, this is going to show our it's old calculation and dollar result. Now, there's a dollar result created that year, so let's go ahead and create some Babel's. So we're gonna do we know that we're gonna do operation on two numbers. So state number one our number one, um, and simply size CEO and we're gonna have now to Yeah, simply 50 and we gonna have results. That's what that's gonna hold our result off the calculation. Okay, Phil, But that go back. And, uh, this result is going to show Ah, the result that we have calculated. So just a recall on how do you use strength in dark? That's what theatre using string interpolation. Okay. And then I'm gonna use some styling, so face style, text style. And here. Are you gonna give it on site? About 18 points uh, maybe 22 points of scared and, uh, then give it for wait, Can I make this point? W go colors our color it's going to be This area is because of a missing comma, comma, and, uh, color this dot Let's give it deep orange. So there you go. As he can see, our, uh, result is basically showing up right there. Hi. Have a good um, so that's where we're gonna show our health in. Then, Are we gonna have other other Children like you gonna have text field? How about a type here text, And, uh, we are going to provide our ask for a key war type. So we gotta say, keyboard type and this is going to be text input type that number get And, uh, that we have big in the EU's decoration decorations are like, basically, let me So basically what you have is like text. So these are so these air, like, you know, um, some stylings, basically that are defined 44 year controls to adopt. Okay, the text decoration actually creates feel like a text box. So that's or text decoration. It's there are not text decoration, import decoration, because we're gonna show it as input. Oh, there you can enter input and it has its own property. Like you can go to him. Text in there. So I'm gonna say enter just a number here, Okay? Now, Ah, one of the most important thing that he create on extra is a controller, a text controller. And that controller is basically controls on, and that's where you get it can actually get all the values from Okay. And you can associate for that for states get the value for the tax and stuff like that so you can actually create text editing controller. Couple of depth right here. Say final. Next editing controller. Next. I told her one, and we gonna any slide that right here. I had a copy that and based it. And we know this text control too. And we're gonna use that, um, right here after our decoration, we're gonna say controller and the controller is going to be text control or one in this case. Okay, so that is our, uh that's our text view. That is right here. Now, if you notice are we have thes hovering close. So what I would do I'm gonna create a patting element here, and, uh, gonna put some spacing between. Okay, so let's add padding. It is on Lee, and, uh, it's a constant again. And when I had bottom, you can have top. It's all and basically moved out of it. You obviously have a little bit more gap in here, So let's copy death and pace it right here and put about, like, eight points batting under the sex feel and reason we are doing patting like you know, not the margin on the text field. Because if you move any of these around are patting stays. So are so. We're kind of like creating sections and we're creating, like, you know, space between those sections. So if you move your stuff around your pending stays, there in your section stays there. So you know each section you need to move doing house. So Okay, so let's go ahead and create our second second decks for the old. So I simply copy that and paste it. Yeah, yeah, into second number here decides to create the second number. Okay, cool. So that's Ah, that's all of our input fields that we have. And next of in the next year. What we can do is we're gonna start creating our operation buttons. So we're gonna create, like, four buttons, add, subtract, multiply and divide and gonna put some operations so going to make them do something with these numbers. Whenever there. Okay, So I hope you guys, I don't distribute and I'll see you guys next to you. 29. Flutter Calculator: Calculations : hello and welcome back. And in this video, we're going to continue developing our Capitals queen. So let's go ahead and get started. I want to add this batting copy dispatching. And at that at the bottom of this next text. Me, that's all before we start heading our new controls. So once he had done that, let's go ahead and create a role. And this row, it's going to have a flexible Let's give it main excess alignment and, uh, in the main exits alignment. I want to give them space evenly. So that's what I'm gonna select. Distribute my controls evenly. And then I wanna create our Children budget a collection of idiots, And this is that we're gonna, uh, and to do the new control. Our new Bridget called Raced. But so this is just like your normal button if raised and it hasn't properties that makes it look like race. So if it's evolved, we're gonna give it a child, a child and the many things that average it's gonna give it a text and, uh, also on it. Give the style, um, so text style. And, uh, my favorite as a Z can see our Ah, buttons already started showing up. Can't, uh, is, um is great right now, so you can't really slick on it. That means it's ah, it's in a disabled off state. Reason is, if you see the screen swiftly, you can notice that it has a quite parent or missing on pressed how? Which is what gives your button for sheltie. So when you press on it like, you know, something happens, that's what impresses. So let's give it its style. And then we're gonna come back to that on breast thing. Gonna feel that. So when they put 35 points with the phone size and color to be colors, not quite have a go. Okay, So next, um, I still disabled. So let's put on pressed and accepts the function Anonymous functions. I'm gonna give it, like, empty function right here. Okay, So now our button is enabled. Has you can see this effect, but it's not pretty looking, so let's give it a clutter. Also on a gift. It Yeah. Color off colors. Dark blue. Excellent. Let's try that. There you go. In. Our button is blue. Um, Okay. Uh, now, um, I don't like yourself. It's corner like, you know, sharp corners. So let's go ahead and give it the shape of the seven shape. And it's a rounded rectangle border and out. This is how you give border radius in clutter was a border radius. Your sex, your select circular and settler takes a float are no value. So you to say, get this and they go. As you can see, our button is nice and wrong. It If you want to give Blake to slightly rounded feel. There you go. You can change it to 10. And, uh, there we have it. We have our our first, um, but I'm pretty now. All we do is I'm gonna simply take this. Copy it because you're gonna pretty much doing the same thing for all the four wardens. Other for putting. So want Teoh three. Okay, so it's gonna create three more copies and you notice we actually conflict overflowed herself. So, uh, that's that was unintentional. Kids. What I wanted to do was, uh, just do to in a row in that you nicely date there the entire roll copy. And because I would like to in to on the Metro, they've got that looks better. Okay, so a team just do Minus How? Not this one. Just one to minus. Okay. Down next. 12 multiply And the last one to divide. We also want a change. Close it up. That's no green accent. Orange accent and issues. Purple accident. So you have are for buttons. And now we have, uh we have you done with, are you? I part. So, um, that's that's that's good for a good stop for this video. And the next week, ever going to talk about how to basically put functionality in there so you can start showing results in there is little column. Okay, so thanks for you. I'll see you guys next video. 30. Flutter Calculator: Functions and Finishing the Calc: No, no, Come back and we're almost done with our calculator. Are the US ready? Now? Let's put up some shelves so it can start seeing results in here. So, uh, what are we going to do? Basically, do show calculations and the risible 12. So first of all, there is. If you remember, there was there was a thing we discussed about Set State. Now that sets state is the place where you actually set or change our stuff or showed the genes stuff. Okay, so you change stuff on, and it's it's triggered in this. If it's triggered inside the cess state, it's gonna show up on your screen. So you know what I'm talking about once we start typing some cold, so I'm inside of this edition Operation button and begin a inside the on press, you simply say set state and this takes an anonymous function. So you simply gonna save that? And, uh, pin, I'm gonna say numb one is equal to and we're gonna parts. Whatever user has entered in the text box. So you're gonna say into dark pars and now we can have ah text our field, but text field is not the one text field is the visual aspect. But text controller is the one that controls, like, you know, the state of the text, like, you know, the text and like Bally's and everything that actually you get from inside. So that's text control. So you wanna get to text controller and we're gonna get its text property, so text controller one dot Next. Okay, so this is going to give us a string, and that string is gonna get converted into int. So that's number one And now do is gonna be the same thing, Except it's gonna be text control or two dot text that we go once. We have both of these numbers to be simply, say resolved if you go to no. One. No. Okay, I So we have our first operation ready. We have said everything inside states that if we enter some number here Whoa, That was a good effect. And I know what that is because both of these texts have the same text controller. So there you go. That's why. But so to save it and then be how our changes in effect. OK, so 12 and three, if we do addition that we got. Our results are showing up as 15. Okay, So what we're gonna do is Abigail. That's simply take this home press. Gonna copy it. You don't want to see me typing? Call this code. So just going to copy it, change the change, the operations to reflect, like, you know, the appropriate accomplishing. Okay, so let's go back at the top. That's that tradition. That's good. Our subsection is gonna be number 12 Yeah. Our multiplication is simply star multiplication between those two and division is basically done. You think this, Tilda, he didn't actually put till that. Because if you can't just put like you now slash because that actually creates a problem converting this to double and stuff. So he escaped that by putting Tilden there heading up. So now we have saved it in and out. Now, we if we try to do these operations or see what happens. So if I do minus you see nine, if I do multiplication, you see 36. And if I do divide easy, far. All right. So that's that's about it. That's the rap for a camp leader. And one last thing I want to show you, uh, I actually totally forgot about that. It is. You see how this whole thing is center of the screen. Um, if you want to put it at the top, he simply have to set this alignment and start, and, uh, everything is gonna move up top. Okay, I think this looks a little better. Something. Leave it that way. Okay, so hopefully you enjoyed creating this calculator, and thanks again for watching. 31. Flutter iMovie App Demo: hello and welcome back. And in this video, we are going to be creating this movie's app where we're gonna be cut downloading movies from Internet and displaying them inside a list for you. So basically, it's gonna be similar to a devil view in I less And he gonna have, like, movie posters, their titles, that old reason stuff, and we're gonna show them as cards. And each card is uh huh gonna have information, and we can render that after 20 meters turn and we're gonna render all of them inside, they are inside the mystery bust, and then we're gonna give it to detail, huh? So we're gonna have movie detail for you can tap on a movie, and you can actually go and look at some more detail for this. Happy just gonna have ah name and an overview listed over there. But you can add whatever you want to add, okay? And you can go back. We're also gonna look at hero animation. So if you noticed, whenever we are actually navigating to the screen, uh, the uh image is sort of growing. So let me click on this one and see how this flies into the screen into the next screen and its 60th at the top and then grows. There you go, get. And if you go hit back, button actually goes back to its own position. So So, Yeah, so that's Ah, that's what we're gonna cover in the next three videos. You're also going to see how you can better organize your gold by defining it in it in multiple files. And we're gonna also take a look how you can navigate between different hub different screens on and passing values along with, like, you know, those screens when you're when you're navigating photo screens in I vs it's known as a Segway. So So when you segue way out, you never get from one screen to the other. You're a pass one summer information so you can show that information on the second page and we gonna learn how to actually pass that. All right, so, uh, then the next year, we're gonna get started with our I movie app. Right. Thanks again for watching. I'll see in the next video 32. IMovie App Creation: All right. So let's go ahead and get started. I have my terminal open, and I've navigated to the folder where I want to save or create my little project. So I'm simply gonna type, flutter, create, You know, this already thought I movie? Yeah, a good example. Get in the center and, like, flutter do. There's something basically to create all the while saying necessary folders. Ross, once it is done, it's gonna come back. And, uh and we have our new app today. So, uh, you're gonna simply say open. So it's gonna open that folder and from here, Simply gonna are I don't need that folder. Actually, I can open visual studio code and navigate from there. So let's go ahead and open JIA code. And, uh, no, But I just navigate to that folder, so, you know, have you got tested? See, I'm will be capped at recreated, and it's open it. Okay, so it's closed toe welcome screen. We don't need that. And, uh, suicides it to a proper started. So begin, cover most of the screen. OK, so let's take a look at our lives. We have ah, the standard project. Standard temperature. That's created. Let's go ahead and add the configuration so you can run our letter and go ahead and click the green triangle to launch the app to make sure that everything has bean created successfully and he can see Yeah. Okay, so this, uh, building right now until the time it's building, let me show you the place from where we can actually download worry data so you can actually go there and, uh, get yourself registered in Get the api AKI. So there's a subset called the movie the movie d v dot org's And you can actually go here to get, like in the movies and TVs and stuff like that. Ah, and they're really good because they actually provided free FBI that you can actually do a whole bunch of things. Like, you know, you can search data, you can discover movies can find movies you get, like top rated movies, upcoming movies now playing popular movies and stuff like that popular TV shows. So all these things you actually get for free there they did some pricing to some feature for penalties, but if you're doing like, you know, basic, if you're using it for some basic use cases, Like displaying a movie in the sort of use and stuff like that. He should be fine. Basically using this movie. Okay. Um, so, uh, there was an a P I Okay, Guide tell. Right. Yeah. Gonna go in there. There you go. And, ah, this the documentation and simply is called on to movies and you could test out the a p i simply by, uh, having your p I key in there and thes air all the endpoints that just AP offers. So has he begins a now playing? Let's say fi looking not playing says like, you know, this is not playing is it has all these different properties that he gets So you get, like, poster path on adult a bullion value starting with movies of adult others. An overview that's like description about movie released eight genres ID's original title. If there's this movie, what's in different language? And, uh and you had, like, you know, basically how in English title, So they do it. So you're going to see that other language title in this is your language. Where with who has created entitle backdrop popularity would count and stuff like that. Okay, there's a date range. I think this is, like, you know, for search happened. Really? The I wouldn't use that dates feed, so I don't know what that is, but total patiently hope they trained. I think dates is basically you can search between the state and the state. Like you know, what the movie's playing and stuff like that. Total pages is like control. Number of pages are there. That's it's returning that it has and total results of, like, how many movies there are and which page you are on. So you can actually have are paid based navigation in case if you that Okay, So, uh so, yeah, so we're gonna be using this S o. I would actually in create you to register yourself and getting the p I key. It's free. Eso I just sign of the female and get any peak in that a p a ki is what we're gonna need, basically to create our app. Okay, so that's eight for state of year if you're successfully able to launch rap. So in the next year, we're going to start according this app up from the ground up, and basically look at basically built the whole entire entire movie detail movie and did a lap out eso. Thanks for watching and out. See you guys next video. 33. iMovie App: Getting JSON Data: Hello and welcome back before we start developing our app, there's one thing I want to tell you guys. Eso uh when you actually go to this a p I and you get to this link, you can click on, try it out. And, uh, if you enter your A p I key that you have registered, um, you're gonna get natural. You are l here and basically we can do is like you can send a request on the store. Oh, and it's going to give you response back. But what I did after entering my p I key, I simply copied this link and opened it another tab. And this dab actually ah displays. Uh, all the Jason that's being returned. Now I have that. It's Jason Plugging called Jason View is sexually a chrome extension. Eso you can this you can use this Gromek station do nicely for mature Jason responsive and browser so you can actually easily see what's inside there. Okay, so if you're still look her like their sen, if it looks all in one line and little bit messy, uh, just installed Jason View chrome extension. So Jason view chrome extension and then reopened this page and you should be able to Ah, nicely format. You're Jason within your browser. Okay. From the response. Okay, So why do we need that? Because what we're gonna do is we're gonna use this tool, basically, this tool that somebody created online that can help us generate a model so you can actually create the entire class. Uh, just by uh, like, you know, by hand, simply like, you know, rapping like all these things, how within class, objects and stuff like that. Or he can let this online dio do that for you. And that's gonna be the topic for next video. For us to see basically how we can convert this Jason into an actual class using that online toe. It's gonna help us. But, uh, what's the class file is generated. We can copy it and take a look. At what? That what that online tool has generated for us. Okay, so I just want to let you guys know that, like, you know, how you can open the the a p i and then basically have this this page ready If you're following along, and then we can actually continue in the next video to generate our model class using this online duel. I think 34. iMovie App: Generating Model Classes: Oh, look, Mac. And in this video, we're going to be generating our mortal us for movie by movie up. So, um, one thing that I want mentioned the plugging that we discussed last in the last video where that Jason View plug in that actually converts your your, uh, Jason into a readable form it on. I remember this tool does not play very well with that. So if he have installed plug in like that in your browser, you can simply open this deeper this incognito mode. And then once he had the income, you tomorrow open, you can just paste your A p I you are that you have gathered and just like, you know, get the get the data. And from there you can simply based all the data without any spaces. As you can see, right here is what we have without any spaces or any taps and stuff. And this little gonna basically pace here and simply click on generate dart as going to generate a dart file for us. And from here we can clipped art cord and to clipboard and, uh, gonna pace it inside our project. Okay. And, uh, this is going to be You called movie model dot Dark. And we simply gonna bases here and say this hall. All right, so once we have saved, um, no, obvious. Simply gonna control at this are generated and replaced with this with movies. Our movie. I see it having a list of places more model because movie is represented. What's inside the results? Okay, so let's replace it with movie model right there. Go high. That's kid. All right, So, uh, now Aziz you notice are are if you look at our a p I it had, like, results where all the movies were listed than he had page total results, date ranges. So that sort of your dates are and, uh, your total basis. So, um, the results in tow is so that's what the structure that it has I created this left. Uh, we are not going to be meeting any of these, so we can simply remove that and, uh, get get rid off. Okay. Hey. And don't need your keys. Yeah, Okay. And and results is actually our movie. So, uh, so it's glass has created We don't need that because we are not using days classes those who stood in that up, that's all. And I'm gonna rename this to that's renamed the Constructor ago. Okay, so once this, it's said we can just call this this stuff movie new, more from Jason, and this is going to be movies. Okay, so they start movies. Okay, so that is good. Are we have no error or anything, so our model is ready in no time. So, uh, so this is what I want to show you guys have. This is very simple. So it's like, you know, you're a stranger class that has, ah, property, movies. And then you have, like, a constructor I named Constructor. And then you have named Constructor to convert movie from Jason on P pass. Basically, the map and I simply show results inside. Lord results inside movies and stuff. So and there's another constructor to Jason that can words are movie into Jason and stuff. And then you have movie glass that has all the properties. And there's a constructor, uh, your populating all the items here, So yeah, that's that's about it. That's the are modeled. So in the next video, we'll start working on the map and start looking into the home page. I think they've watching pulse again the next year 35. iMovie App: Creating Main App and Setting API Keys: Hello and welcome back. And in this video, we are going to be starting our app. In the last video, we created our model. So let's close this file. And, uh, we're gonna come back to this saying a bit, Um so what I want to do, but, um, on actually clear this, um, all the template up and basically create my own portion off Maine ap mean poking so we can empty it out because we're not expecting any of the argument to be We're not expecting them to youth. So first, how are we gonna create a set list state list? So just select template called SD LSS and hit Enter and give your app name. So movie. And, uh, in this on are basically gonna return. Hey, center, reject. Or now that's gonna have a text. So and, uh, you gonna call run app will be happen. I think so. And, uh, one more thing we're gonna do is going to wrap this inside material ap with home to be center for now and, uh, home to be actually scaffolds. So that's Korean. A scaffold to that bar. Tell to be next. Okay. And body, it's going to be center. That would be getting around for a long time. Okay, let's go ahead and former at this document. Uh, I'm gonna, uh, stopped the app and restart eso New state can be initialized because earlier, there was a stateless our state full Bridget that was created by the template. How it is why he was He has no loading, so they should actually give us. Okay, now, Uh, see, we are home and had to go. We have our basic temblor. Ready. How? Now? I do wanna remove this debug out, uh, ribbon right here on the corner. So if they debug show mode, Banner falls And, uh, we also want actually put a theme together. So let's use team data. And, uh, primary squash that's been in use is going to be deep. Colors dot deep orange. Okay, so that's better. See how orange looks? I mean, that's good. So let's keep it orange. And, uh, let's keep this in place. Um, one more thing I want to do is create a new file called Keys. Don't start. And this is there. Are we gonna basically store are AKI So ap AKI that you have received from imdb that you've been using to basically. How quickly are the FBI this is? We're gonna store it. So that way when you actually leave your app, like, you know. But it didn't get. Have something. You can mark it. Something you can either eliminated or basically just mark something like this so he can create a class call app. Keith, Any concrete available in type love? I am maybe Keith. Like so. And, uh, you can just simply say in devil courts a p i a p I Okay, so this way your user knows that this needs to be replaced with the FBI, so I'm gonna actually replace my A p I key after we end the video, which is gonna be pretty presume. And I'm gonna actually populate this, but you might want to put your own a P. I key here because this Ah, now this happy class beginning utilize in our next video to download the movie. Did we different data and, uh, uh, just gonna go from from there, So So Yeah, this is Ah, is it s so this is the end of the video. I'm gonna actually replace this with my own key, and you should replace with their own. And then we're going to continue in the next video by downloading data from the Internet. I think the interesting off together next video. 36. iMovie App: Home Page: I don't know. My last video. We created our keys. Uh, file. Ah, and our main dot dart file to basically give our have some theme data and create a simple widget, uh, as a placeholder. So, in this sir video, we're going to be creating our homepage. Since stuff like showing this house center, we're gonna show loader home page movies home page and on that homepage, we're gonna show less stuff Movies eventually. Okay, so let's go ahead and right Click on live and create a new file. You gonna call this one movie home? Got dart, Okay. And we're gonna import few things here. Now, before we actually start working on this, I want us to go to a pub post packed out to GMO file, and right underneath this Cupertino icons add a new package, and this back is it's going to be a CP on the The version we're looking for is greater than zero point are $12.0 or greater than or equal to discourage. So just based that and hit save. So we just heard a code again. How resulted of discipline insee and tumbled this package. So packages being downloaded successfully so we are good. And now if you go back in our movies home, let's start importing some packages. So, um, import and we're gonna need material dot dart He Also gonna need are keys, so key start dark, then gonna need import for our model. So moving model Dark, Dark. Um, we're gonna need dark dot com. Werth. That is he filed that you need actually for Jason Conversion. We also gonna need STP the recent module that we have downloaded. So just say studio P and s you don't Art is the one that we're looking for and create as STD people that so we can start calling this, but it should be dot getting stuff like that. Okay, so, uh, that's I think enough and begin important me as we need more more import statement or more access to, like in other classes. What? I think this is still gonna do this is going to do for now. So Okay, so this create a straight for Bridget. So s d f u l and I'm gonna name this will be home, okay. And ah, right here, have beer. Simply gonna replace this with our main doctor to take the center and I'm gonna cut it and move it here like so. And that's all right. This document. Okay. And now we go back and mend our heart and we call. We do import for this to reference this file like, so you can simply call it movie home and, uh, reload. And as you can see, there's not much difference are quote. It's still working and everything is fine. Let's make sure that actually is hard. The home page. So mobile home. And we should see that next change. Okay, there we go. So of its not cashed is actually the life rendering that's going on. So it's good. Now, one of the thing that being expecting is we want Teoh. We want to send this this movie this title to the APP and get you need it. So let's go ahead and an update. Our state full budget class and we're going to include a final string here called Title, Okay. And we simply going to say movie home. This is just to show you, like you know, you can supply your you can supply some values inside the constructor, and I'm gonna show you how how easy it is to accept this value. But let's go ahead and fix this first. So simply past if s title and, uh, there you go. And here we can How preferences. So if you call Rigid Dark Title or Richard actually is referencing this class, and if you do dot you can access local variable, and this local variable is titled right now, As you can see, it's that it has changed this. Do I movie so And get you need to supply any of the data to a state full class region, then this is how you can create a constructor and get access to that in your state class. Okay, so I just want to give you an example for that. So I don't like, you know, I love you know, begin a You that, um we can even actually we can even do this so we can remove scaffold. Um, from here and home can be I don't believe this. Not not even that, actually, um, like this dad with that. And that's for men to document. Okay? And it's go back or home, and it's Europe returning center. This is where we are going to actually return our scaffold. So you're going to construct are scab. Hold here. Reason this is important. Because whenever you create, if you go back to one for a previous videos, um, whenever way we talked about material app, whatever you create, like a nap material happy you're like, Is your pace Uh huh. Base template. So it provides of, like, you know, the navigation and everything. Now, from there, you can actually have Ah, whole bunch of scaffolds are scaffolds represent pages. So, um eso your you can have, like, scaffold with apple and everything installed on your material happens. It is It's responsible for navigation saying, like, you know, Segways and stuff like that. But here, Scaffold is responsible for displaying goes things, those projects on the screen So you can have, like, you know, multiple pages by creating multiple scaffolds, um, and uh and then calling Those are including those coupled inside the material up. But if let's say if you want to launch a brand new screen, so in that case, you should create a new material. So, for example, here be not going to say that we want to create a new material app because if you create a new material lab, what's gonna happen is this material app is gonna have its own navigation controller. It's so navigation. Ah, scheme. And this soon it's only the world where it's gonna execute inside. So we don't want that. We want our movie home to be associate with the main file main dark. So whatever, whatever, uh, whatever app that you have created, the structure that you have created supplied by material help you want to utilize that? So when you wanna reviewed like that, you simply say scaffold and he creates scaffold for all the peaches. Okay, so I hope of that is clear, and it's gonna become more clear once we have more than one pages. So let's keep going and we'll get to that point. And when we get to that, what, we'll see it in action. So Assange decks for title in that this is there, begin saving. Okay, We also gonna have body year, and this body is going to be now. We can actually, uh, we can start working on our movies, so let's create a movie model. So I'm gonna go and create this inside the state at the double D state class so you can create available. I'm gonna call this great movie model. Louise breaks up. Okay. Now, um, you are now when we're when we're loading our home screen we're gonna do is we're gonna show a circulate indicator until movies are loaded in the memory there downloaded past using data on and then loaded in the memory. So until that point, we want to show a circular progress bar. So you say more teeth. If it's equal to know, then show center and on center show a child. That is circular promise indicator. Okay, Now, if it's not the case, gonna show list for you. That means if we have some data and we're gonna show this year builder and inside this builder, we're gonna have item count. First is going to be movies dot But, um, Reese dot Movies that count don't length basically or item builder, second rounder. And it's a very gonna show our well, we double. So for now, let's just play movie title. Cygnus e sytem builder actually takes It's a function that supplies builder context and, uh, Index to begin. Simply take that and begin a return. A text widget with movies stopped movies dot Title like so good. All right, so, um, as you can see, we have Ah, we have this double, um, double navigation. So let's see why. Why we have that, um, or double that bar. We have a nap. Are. And, uh, there our home. Our main file does not have a nap bar, right? Yeah. Stop this right here. And, uh, the three start it could be all the state things could be. So let's take a look. So I'm gonna give it a minute. I see what's going on. It's trying to launch and, um, building now. So I think it's going to start the app any minute. Well, assume that, uh, some make sure are documented for murder. So we know now every single thing is correctly placed. Okay, think, uh, it's actually good. Some always center exactly together in that list of Wilder that we should the title. Yeah. Okay. Is there okay, So that's better, right? That we got So we have Ah, just one. Ah, apart now and are circular view is showing up. So? So That's actually that's actually good. Okay, so So this is it This is such a good stopping point. We have actually started constructing our home page eso in the next video. We're gonna download the data, convert it into into movie movie model object and then gonna display movie titles inside a list. Okay, so I'll see you guys. An excellent thank you. 37. iMovie App: Downloading JSON: Hello and welcome back. And in this video, we are going to be ah, continue to work on. I'm gonna continue to work on our movie home app Oh, our home page for the movie app And today we're going Thio going to download data on data from the en Pointe A p i n point off I am DB database or the well we database Dr Laura. Okay, so let's get started in under our state, I'm going to create a new string for you are. And, uh, this string is going to be the same That that I showed you. What, Rex Exploring the documentation. So, uh, let me cut best. Okay, this is going to be keys. Dr. I am DP keys. Okay, so this is a CBS uncle and double slash AP. I thought the movie database start work slash three slash movie slashed. So its version three movies slash now playing. So it's gonna get not play movies. And this is how we're gonna use r and r e p I key into the string. OK, so we're gonna call a p I key start. I am diabetes, and it's going to return us the a p i g and going to construct that euro. Okay, so once you have done that, we're gonna create a function, and this function is going to be get Molise, and this is going to be think. And let's make sure that it drums a future. Avoid just to be consistent, you can simply return, avoid or future wide, but get movies because they say it's anything method. It actually written something in future. So future object is basically putting represents a potential value are an error that be available at some point in future. And this is how In bladder you make sure that year work. Whatever work that you're doing that does not involve you, I update, um, gets executed on one of the background threads. Okay, so we're going to simply say response and await. You gonna use http dot get message and call that you are No. And basically gonna wait on that euro. So this await keyword is gonna make sure that response is before containing on the next next line responses available. So it's gonna wait for that. So that's sort of a way death, and then we're gonna say air response that status coat is 200 or is not 200. We are going to return from here, So, uh, we're going to simply return. If the status score is not 200 that means there's some interstate that has happened, so we don't want to continue. Um, and we can actually continue to show our movie Upload state now in in the production I have You might wanna love this, and you might want to add a retry block or or maybe a try again button if you see something like this. But in our case, we're gonna follow the happy, but and we're going to say if it's 200 if it's not 200 just returned from here. Otherwise, continue because, you know, our movie is actually under our and point he'll actually returning some data. Okay, so we're gonna take movie date, and this is going to be Jason Decode. And a sandy God is one of the methods are from the function available inside just on dark. Convert. This is their This is why we actually important this Jason don't convert. So we can simply supply our response, not body into that and get our Jason paused inside this object movie. Jason, once we have that, how we're simply going, Teoh say set state. And if you call or text, it is the way to set state for a state for military. And this is where you want to make sure all of your updates are actually gets reflected. So you're objects gets new value and every other you I element that subscribe to that. That value can be updated just by listening to are subscribing on out serving. Do that value change. Okay, so we're going to simply say movies is equal to will Be Okay, so movies here's equal to movie model dot from Jason. So remember, this is only the function that was created by our helper online helper You are, and this actually takes a map. Map is basically a string and dynamic, and that's actually another representative and representation off. Jason, I said, if the result is not know, create a list of movie and then for each I just Richard over it and added to the movies object. So that's what that's what we are actually taking advantage off. So we're simply supplying our movie. Jason. Yeah, and this is going to return us. Um, actual, the movie object. So want to get that? Are we simply going to print belief? Don't moviestarplanet. Okay, uh, now we're going. What we're gonna do is we're gonna call this get movies better inside in its state. And this is, um So let's see, why in estate it we already creating that straight? I think so. So, Okay. Fate. I have no idea why it's not recognizing about. Anyways, he can simply say wide in its state. And, uh okay, so I'm gonna say at override, I think so. And this is going to all right, and we can simply say super that and its state in a combat. And here we're gonna call get movies. Hi. So, uh, what's gonna happen is our I just say it is going to call this move function and should try hard, freeloading and see if that actually reflects this change. And if everything works, are movie movies, object should receive some values. It's not working. So unless real Ajit, but yeah, movies object should receive some valleys, and we should see that printed. And then we should also see title being added inside or list view. So let's go ahead and re run the app, and, uh, it makes sure that everything is loading correctly. All right, so we will succeed. It took 16 seconds to build, and, um, now you're thinking the file. So, Exodus, sending our okay, Have you go? So we have an error, and it actually get I'm glad we got that there. So we can actually learn an important concept about Jason. So Jason can return any kind off value, Basically, because it's type Jason's type, Usually always gonna be is always gonna be a string. So basically keys all this 100 representative string, but the value could be anything s So that's why we have youth dynamic here. Now what happens is when that model is creating our object, it's actually creating that based on looking that, looking at the data and predicting the data Viper of now, because there is a mix off values sometime the day that can contain in, sometimes it can get contain double, um are help her online help. Uh, Ural did not help us of in this way, so it actually ended up creating a wrong type. So what we'll do it has actually, because it's tough US record and which had created a double. You cannot Indarti cannot directly add, like, you know, and into double or typecasting. So what do you do it in use? Numb. So wherever we're seeing Um, yeah, um, and a number of type or you do. It's a reality that to numb. Okay. And, uh, that should take care of this error that we're getting. Okay, so you're gonna have to relax, because we ended up going into a narrow state, and so now we should actually try to rerun, and hopefully everything is going to work. All right, so Bill started, and, uh, it's gonna take a few seconds to complete the built. Don't you think in this time And, uh, now wrap its guild and being realized Anthee our secular loading for a brief moment. And then we should see all of our other movie names to printed there. 20 of them that we have printed. So these are the moved out. So we were successfully able to make a call to our endpoint a B. I get all the data, parse it successfully into movie object and then print its length and printed title is Well , so this a good ah stopping point for this figure In the next video, we're going to start to work on basically the format for individual movie cell. So we're going to create a new randy file and we're gonna and we're gonna create all off. Are you? I inside that file, which is gonna be repeated for each record off the movie. Okay, so that's what we're gonna look at next thing Saint watching house to you guys in next year . 38. iMovie App: Movie Cell: I don't know. Come back. And in this video, we're going to be a continent to better about my movie app. And today we are going to be developing movie cell. The cell that will display are images basically ourselves. How? With images off the movie poster and liver description, but movie. Okay, so let's get started. Create a new file here, and I'll be going to call this on. We sell. Okay. How are we gonna start importing personally? Make sure it's true. We sell stopped dart someone. Really? In this. Here you go. Now, let's start importing material, not dart. Move, my little tart. Okay, that's good. That's good. Now we'll create a class called movie cell that will extend stateless Egypt and, uh, PR Teoh, right idea build matter. And for now, what we gonna do it simply, um, what we have in movie home. So we have this text in movie home, so we're gonna take that, and, uh, I'm gonna cut it from here and that base and here. And so it is. We couldn't say movie dot title. Now, um, that doesn't take this year. So that's what we're gonna get that are so Let's create that they can create a mile Moby, Moby and, uh, you gotta take movie. You sell Aunt Constructor. It's going to expect a movie to be supplied now and get you forgot. The movie is this movie that we created. Search represents our movie hand all the other rather use, like you know, it's property in here. So that's what more we is. So let's go back and hear how we're going to do is just gonna import well, we sell and then you're gonna say movie cell and we can supply movies, docked movies Index. That way it's going to give us that individual movie, and, uh, he simply going to stop with and really connect to make sure that everything that we have done still works. Okay, But, uh, here in a minute, how to the build kicks in. And, uh, what do you do next? Basically, while us loading, I can talk about that s so we're gonna It's a text. Ah, veg it. We're gonna use a card which it And in that car digit, uh, card is another widget that shows that shows data in like a rectangle cord that's placed on it's like a cell. Uh, and you can add, like properties like shape elevations have margins and stuff like that. So Okay, so our example is working fine. So let's go hide in and moved its and out of the night insert card. And this card is gonna have a shape. Money is rounded rectangle border, but border radiates to be sector 10 points. Okay. How are we also going to give it innovation? How? Hi. The card A P s tree from the service that actually gives a shadow effect. So car looks a little bit more elevated from the from surface that you get to see, Like, how it looks in a minute. Let's give it a margin, That's all. Uh, no changes at all. About 20 points. And for edges, he can always but Constant Valley in there because that's not going to change. Then we're gonna put child, and this child is gonna youth something new here, so typed out. And this is basically a new control equal. So well is basically a, um, sort of like a bucket. And we have seen that in previous against. So you conferred it like you know that video to know a little bit more, but I think we're gonna You think? Well, because you're gonna provide our custom, um, custom animations and custom properties into the button that we can actually click. Ok, you don't have to. You think? Wow. Ah, you could have very well used a regular container place everything inside that container. And then he could have used gesture. Recognize er to basically or see you tap in. Received, happened, showed detail. But we're gonna use inkwell because I feel like, you know, I think well represents a little better. So for what we're doing And it just gives another example of, like, you know, how you can make a complex widget and customize it to your your need. Okay, so that's why we are actually using it. Because it's, like, you know, showing another example of how you can customize. All right, so So we're gonna say red. Yes, 10 Dato. That's our inkwells. Yes. Used. This child is to be column remain. Excess alignment size line is going to be made nexus inside, man. Cross access alignment is cross excess. I miss start and Children is going to be basically this is where we're gonna put our hero animation. So what we'll do is that information where you tap on the image that may actually seems to grow it anyway, it to the detail with girls in our own space or efforts like at the bottom it flies in space, thank you know to be visible on the details screen. That's the animation that's called here and emissions trying to city. That's a hero. Give it a tag. Every hero tag every hero tag has to be unique. And we're gonna use I d. Because this your attack has to be, um, has to be same in the details so it can make the connection that this is the image that needs to be shown eventually in this place. So I did unique on, and that's what we're gonna basically used to display Child is going to be container with height 200 points declaration. We're gonna use box decoration box decoration and border radius. It's going to be Porter radius. Circular 10 points. Image is going to be decoration image and, uh, give it image network image will be done. Poster path. Ah. Okay. So let's, uh I just remembered something, so let's talk about that. How? Box it cover. Okay, so, um, one of the thing Ah, about Well, so I think you see, like, you know, the card is showing up Now. They're like a bunch of guards. I was showing up here, and we have an exception because you haven't actually provided all the information in our poster path is wrong and that sort on top. So if you notice this is the file that is trying to refer to and that I was not there, that's why is showing an error, but, um, the style, but this. So when a b I returns you image in the poster, Pratt A actually returns to you in this format. They have, like, you know, Theis highlight format, and you can take a look like, you know, that's how it is returning it. So we want to change it. How you don't actually have it return a proper path. Basically, you're full of fully qualified euro an absolute string, which can be which can be accessed without an issue. So what we need to do is, um we need to go in our model, plus and, uh, let's go in a model plus and whatever. We are actually populating that path A poster path right here. It's sort of death began. Actually, have Teoh do this. So I found this. Ah, like in the documentation. So what it is is basically whenever used to force her bath poster pats is not fully qualified. Your l So what you need to do is you need to upend, actually ps colored of us last image dot tv pmdb dot or slash t slash b slash w 500. This is the width off the image, okay? They're like, Well, yes, others there's, like, 10 24 I think. But here you can go in the documentation and you can find out, like about comedians for size, support for me, for our app. Actually, this w 500 it's gonna work. Fine. So we're gonna use then from there parameter rised poster bath. So this actually creates the fully qualified you're out. Okay, so that is what we need to actually use. Okay, so that is the same thing that you can actually do, but the background bass, although we're not we're not using backup, and it's I would actually leave it as a challenge for you guys to, um, to basically extend the sap further and include more details about the movie and used back backdrop path somehow basically either, Like no change the car to show movie poster, like in that corner and then show backdrop path and like, the entire movie and then in, like, a and E and I regularly and stuff, but yeah, I think off Think of it like you know your own way. But, um, this is what you need to do, basically, to make sure that your your app has fully qualified poster bath. And I groaned, Pat, you know? OK, so let's go ahead and put you in jail and out we run this. Let's go back to the model to we d del. We don't. Okay, so continue on. Um, he also gonna add So it's a box decoration container. And, uh, that our hero So we can readily they're here. We're gonna add a padding, so padding is going to be so we can actually show step ago. You can see we have our images showing up nicely that it's good gonna add a little bit of batting. And this petting is ah going to be again cautioned just all uh, 20 points to give a little bit room to give a little bit room between the image and the title off the movie. So in the say child for this, it's going to be a call. And, uh, within this, we can actually add are moving so we can actually sort of, like bad it. And then inside that, begin the show movie title and deal Gonna have column across excess alignment. Eyes across Access Kliment Start and the Children as I want to be Children. So going to be text Holy top title Max Lie It's just going to one overflow text. It's good pretext Overflow! We wanted to be left it so it all flows show Leptis that style is going to be team off contexts Next theme Don't battle. Okay, so the statement, as you can see her are moved out years title of bs They're so that's good. Now that's to create a text or are Cory so more talk for you? So right, True. So it's gonna wrap the content and, uh, have Max lined before overflow. Next we'll obsess and then last but not least thing context fixed thing body to. Okay, so that's how we gonna shar we detail can see her movie details showing up now. Okay, Now what we need to do is we need to give our inkwell a, uh on tap. So? So if you tap on it, something should happen. And that's what we need to do. So we need to show movie detail here. Okay, I So that's all set. And, uh, but the help off heart reload you could see, like, you know how thanks have progress. So as you can see, your images, uh, are being loaded from the network, and they're being cashed and everything, but but yeah, your movie Hamburg is already looking nice. So, yes, that's awesome. So that's it for a difficult. And, uh, and the next year, we can wrap up by creating movie detail page and, uh, but navigating do. It s so that's gonna be like, you know, in the place where it could also see how to navigate from one base to another. Seven years on navigation, routing for the night phone. Okay, Thanks for watching. And I'll see you next 39. iMovie App: Movie Detail and Wrap the App: Hello and welcome back. And in this video, we're gonna create our movie details Page. All right, so let's get started. Uh, I don't mean to collapse that. Okay, So creating a new file called will be It's called detail, doctor. Okay. And what we need to do is need to first import some of the statements. So they import, um, material. And we also get the import. Are moving what we model and what do you? Hi. So, in a create stateless reject one more time. So stateless. Bridget, There you go. Will be detail. How so Smooth. This container. Okay, so we're gonna start placing some content here. Ah, but for that create and your movie, uh, April and, uh, this creates less populated under constructor to start movie with God. So now we're going to start creating her bill matter. So basically here, how you're creating a new page essay for this new page. We always start with this. Careful. So scaffold represents our new page. Okay, Uh, no. Got cold. Asking, can have bar at a bar and have a bar. And that bar can have title. And we cannot give up this title and title is going to be movie that title. Okay, so we're gonna show movies, that movie that you have selected as the title, Okay. And, um, next thing is gonna have body and this body is going to be a list view and reading. We're creating a list because of because we want to create a, ah detail page that can be scrolled If the content is big on now. We don't wanna, like, you know, fill the page. And if it's shown in a different a resolution off a phone, like for a smaller former bigger phone, Uh, the uh huh. If it's looking at the smaller form, then even find that exception If you remember, like, you know, screen over floats are shown with, like red, squiggly and yellow, squiggly and stuff like that. And you're happy is gonna crash because your content is not fitting on the screen. Now, list, view it. Make sure that there's a scroll. I ask all of you associated with the list. We said make sure that he can actually scroll the country up in down. Okay, so are left tonight. So that's what we're gonna use it because we can wrap our content inside the list. Now, one more thing. Reason we're creating this movie and this movie detail because we wanna use dis constructor are tearing our page navigation and have you gonna learn how we can supply data from one page to another? Others a video like, you know, there's a video in Prior. It was in this course study. Must have seen how to pass data to one from one place to another. And that's what we can actually utilize here the same technique to basically supply movie inside this class so we can actually use it for the deals. Okay, so let's talk. Continue. They're gonna have Children, and we're gonna have having Bridget. And, uh, it's padding. Regent, Yes. Going to have padding constant edges instead, I'll 20 points and then you have child. Hello. And it's column. It's going to have a cross excitement both excess alive went starts. We're gonna start at the top and then it's Children dis affair. We're gonna have our Huo Bridget first of all, And this here is it it's gonna have same tag Aziz movie. So this is how our movie poster knows where to. Uh I mean it can basically relate between the move, the the image that's bean animating and image. That means shown eventually on the on the details by using that unique identify. And we are going to use that evening around the fire as movie and you're gonna have a child container with height, five points decoration box decoration. Porter Yes, to be porter. Idiots of circular. About 16 points shape you made decoration. Image, image and work image will be not most are bad, thanks out and then for it. It's going to be box fit Cover today. Now, um, so that's our That's our image. So let's go ahead and go to our movies out and can actually I try to never get to that rich . So it was, uh, navigator that gave her not push context. I doubt it's going to Material Page route, and we're gonna take Builder gives us context. It takes in a lot of assumptions. So keeps us text and then what we return it. We detail now. He would include that. So let's make sure it is actually imported. Thanks, detail and supply. Except all right, So the death, which, if we click on on the while the images, as you can see, it's actually it seems like it's ah, never getting in and growing in size. And if you notice we have our, uh, movie tattle showing up and our back button is working awesome. Cool. So you have successfully created a movie detail that's populated with this a little bit more Allibert Mora detail like a show name an overview. And then I'm gonna let you continue on basically fill the entire entire screen with whatever you wanna you wanna followed with. Gonna create a size box and size boxes Height, 16 points. Okay. And after that size box, we're gonna take his text. And sexy, it's going to have a movie, dark title and style. It's got to be Team. Oh, contexts Next. Next theme. Dark title. Okay, so let's show that and gone are detail. Gonna see that name appearing over there? Um, then we can have, like, another size box. Okay. And that size box up again. The same height, 16. Just far. Giving us a little bit space between between items between rows that reassuring and, uh, have another text. So let me copy. They saw based here and this is. So the show's happened. Uh, it's subheading, so it looks a little bit Okay, Cool. All right, so that is our movie detail. So if you have click on the other, as you can see, you can actually scroll on these. And if the title is if the description is big, you can read that description in the entire beach. So that scrolling functionality is what list gives us our screen doesn't overflow and can stinkin still scroll and see the content. Okay, so, um yeah, this is it, guys. Uh, well, you have successfully finished an entire movie app. Now, I would actually encourage you to extend this further to have, like, you know, all the other details, fill them and believably out a little bit more of try out different things, like, you know, placing stuff inside content. This example was important because you could see, like, how? Begin nest Half Bridget inside, rigid inside widget to make it like a really complex off layout. But still, like, you know, have it load and, like, you know, be efficient and fast and stuff like that, you fulfillment and everything. So so with that hub, that's actually, uh huh? That has brought us to the end. And thanks again for watching. And I would really appreciate if you give me some awesome feedbacks and thank you. 40. 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. 41. 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. 42. 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 mistake that we made those really seconds And the other one as's. Basically, we forgot to a sign our an emission do animation controller toe animation controller like that. Okay, though, that's got to be the error. Okay, so let me re certain this now, and, uh Okay, let's go ahead and stop this and rerun. This is actually initialize our animation and basically the source completely animation. Is Mahdi called? You know also, um, hopefully that's gonna actually, otherwise we will do what makes you all right, so list. Wait. Ah, wait a few seconds toe to basically figure out how long the bill wait a few seconds to that the build finish, and then we're gonna figure out what's going on. If you saw, you're not okay, Right? So build is finished. It took 30 Texans, and, uh, now our app is launching once again. Though some take a look. All right. Any time now. OK, that go. So we have our a chocolate already, So I'm gonna click on this button. Yeah, they go see this Kander and, uh can drop down. For example, take 11 2001 of the date for to those 11 and click. OK. And there you see the animation going that that is the animation that we're actually trying to build. So let's go. I didn't take something Partidos six and selected eight Click. OK, And there you go. So that is the age calculator that we made to calculate age and apply ice and animation for the number of current. Okay, so that is it for this video and things ain't watching. And I will see you guys in next video. Thank you. 43. New: Tic Tac Toe Game: blown up, Mac, and and that's really gonna be creating a tick tack toe app. Okay, so, tic tac toe game, that's what we're gonna create. So let's go ahead and get started. A basic template ready? It's got the brain function that has a scaffold and this change this name so amusing. Take tack Dio and, uh, basically gonna leave all the other things at this on. We have, like, this home base created, so I'm gonna import dark, dark mats. It's all because you're gonna need that. Same for math. Okay, so let's go ahead and get started. So we have our home page and in the home state, let's start creating some tables and, uh, you need a list off. Oh, something called game button. So let's go ahead and create that game button first, because that's gonna be a class difficulty use. So they created down here game class, game button. Okay. And, uh, she's gonna have an i. D. A strain the background color and enabled or not. Okay. And then we're gonna have its any slighter. - All right, so this is gonna be he any sizer go on our game button. Okay. So, Lesko and go to our home peace now and create a list off buttons first. So go right here and, uh, create list off game button, All right? And this is gonna be called, but the list, and then you're gonna create our players. So we're gonna have player one and, uh, bear to, and we're gonna keep a a bow. How that's gonna track Houthi active player. So active later. Okay, they're gonna have are in its state, and they're sinister. It is gonna have but in list. And basically, we're gonna create a function that's gonna initialize all the game buttons for us. So in it, game attendance. All right. And, uh, get a function here. Just game button in it. Game button. Like so. And, uh, then we're gonna first Guitar player one. It's gonna be an empty list player two and have the list of all and active player. It's gonna be one when initialized. Then let's create our game buttons game button, and we'll need new. Actually, we just say game button and, uh, I d and we're gonna initialize some buttons, someone a copy and paste, and we're gonna create nine of them. The lists count. So we have to tree or I takes seven, eight and sign. Okay. Awesome. And that is basically going to be returned. We could return are game buttons. So All right. Okay. So, uh, that is gonna be our And he felt any section in the initialization state. Oh, and then we're gonna create a function to play our game. Okay. So as create a function oId play a game, and this is going to take a game button now, this game, But this comes dysfunction is gonna set the state. Okay? And you're gonna say if active player is what then? At the king button sent the text to X and came buttons. Background turned that into green. So turn that into green color and said active player to to, uh Then you're gonna take the player one ad, that button stating that that place has been claimed by player one. Okay, that space. So and detector, you have, like, you know, tiles and you tap on them. And that space is claimed by you and other opponent. Your opponent actually claimed the other place and you create a series off combinations alliance to basically in the game So it's pretty standard game. We already heard that eso TV not text his equal to No, otherwise, it's gonna with the other player. It's gonna say tv dot text physical 20 x and O and back on it is going to be color that well, maybe red co stock Red. Okay. And, um, active player, it's gonna be one. So yeah, put active color back to play one. Once this player has played and, uh, player to Dr Add G B don, I d. Okay, so that's gonna add Is it clean? Um, the spaces that are being claimed by those players and you say enabled identical to false. Because we don't wanna We don't want to leave that space for another play off that button for another player. That tile or another play. Okay, next, we're going to create an integer for winner, and you're gonna create function to check winner. Okay. And, uh, we're gonna come back to this one. The first lesson is just dysfunction. So we can ask. Simply say if winner IHS equal to negative one. Right? And if button list So came still going on and say importantly, stock, every case of Chicago are every element. And we say element, Doc text is not equal to empty. Okay, then you guys show dialogue. Sure. Dialogue okay. And showed up. Takes a context. We're gonna give it a Conker context, and then we're gonna give it a builder. And this Wilder is going to be custom that low. Okay? And create that and it's gonna take And an argument for the string. And then that Another argument. The press recent button who start game I can. And 3rd 1 is he said game. Okay. All right. So let's go ahead and create Oh, create these functions. Go ahead and finish this. So if is this, then it's gonna be else active player. It's gonna become if it's too thin auto play. It is not a function here. I'm gonna create and the wife know. OK, so now let's go ahead in and create our our crushes. Okay? So frustrating, Creator. Audibly. Okay, So out of play is basically simple auto play, and, uh, he's gonna say, Plus, she's gonna create an empty cell list. Hey, and then fate list is equal to list up. Generate. And we're gonna generate a list off length nine in X plus one, and we're gonna go over each cell. So are so I d in a list and going to say if not, player one dot contains player on that contains that Sell 80 okay? And not there to dock contains that cell I e. Right. If you don't continue added to empty cell, that's so I d all right. And, uh, outside the formal, we're gonna create a random vehicle so random and we can simply say random in next first r dot next end, but from empty cells Stop. Lent my this one. And, uh, we're gonna get the stele i d from MTC shanty shed empty cells at random index. This is for other player, by the way. Okay, um and then I fear the fell leg you can actually you created into your eye for button list index. Where to begin? A search for the elements. So you say element, Doc, I d It's equal element dot i d is equal to sell. I d. Okay. And we're gonna play game on that cell. So But list So all we're doing basically here is finding an empty cell. Hey, random, empty cell and We're playing our game on that. Next comes our check winner function so and check winner that we can I have your fun? Uh, a felts conditions no player. Unthought contains. So if player one contains 12 and three rose, right, Stan, we never is one, all right? And what I'm gonna do is I'm gonna copy this because we're gonna be repeating these conditions. So So next up is if Player two contains one or and two and three. So all these consecutive, um, sales, right? I player two contains three. Then Player two is the winner. Okay. Eso that's your first role. Now let's compute the second row and second role. Claire One contains four by and six. Right. So, player one if the big winner, if they're too. All right. So copy this. And, uh, we're gonna simply arat f player two contains for five and six. Then player two is doing better. Okay, now, our third row. So been a copy. These two guys right here or third row? It's gonna be basically seven through 7 10 years tonight, eight and nine. Okay. Similarly, here, seventh, he's and right so and hope you guys are Oh, you guys are falling along because we have a Easter egg in here. And that's actually a challenge for you guys how to solve. Um, okay, so now we're up on the column. So we're gonna check 14 and seven if those three are whoever has those columns, Our player, that is to winner. OK, And in next column, it's 25 and eight. Okay, too. Um, five and eight. So all we're doing is basically going rule by war and call them by column and checking. Uh, who has those cells claimed? Once all cells are filled. Basically, you're going to run this operation every single time use, actually blaze. So we check for the winner. Um, So we're gonna have our last column. That's gonna be on three on six and on nine. So fine. Six and free. Okay. And are two more checks? We have basically for diagonal civic an hour. Bagwell, check and back. Most check. It's gonna be on one fine hand. Nine same Jack Paar play to Okay. And, uh, last Bangles. Check with the other side. It's gonna be three fine and seven. I All right. Uh, so here we have checked for all these players and every say no, we never. Yes. Not equal to negative one. Right? So there's some winner. So if we never is one the show Diallo, Right, with context and builder. And this is once again gonna use our custom dollars. So, lovey, let's create that. Get the custom dialogue class, uh, created cause you're gonna use that a lot. So, class custom. I know stents state less. Which it and it's going to take title. Scott, take content. I'll take you call back, and it's gonna take action. Text and, uh, got provided provided, sir. Initialize er's talk. So dialogue his good Erica's don't title content call back and up show on extra next we set . Okay. And, uh, and can simply creator built function. And the bill function is going to return our good old alert dialogue. And I have title text and, uh, is gonna show the title for the content and hammer text content. Our actions gonna have a flat button, and this flap button is going to have on press. And that's gonna be the callback. Never gonna call color. It's gonna be color stumped white and child. It's gonna be text action. Thanks. Okay, that is gonna be a flight button, So see? Okay. All right. So all right, back to our custom dialogue. So we're gonna have our, um, custom dialogue Where we gonna show who the winner is? OK, so use that custom and I look, and that custom Della takes. So Planner 11 Okay. And then start again. Question Mark press reset. Okay. And, uh, and he said Okay. Okay, so that is gonna be basically when we have are played one want. And, uh, it's gonna be an else Ghaith hand. We're gonna show same dialogue player two on okay. And pressed a state. And what? We want to do it. You want to return our winner? All right, that's going to create our reset game function. That's how, as we've been calling, it s o gonna simply create reset game function and, uh, kind of say, if navigator dot can pop context. All right, Um, then navigator don't. I gave a shit about context and go all right. And then I'm gonna set state. And they said they were gonna say button list is equal to initialize game buttons once again. OK, but that's going to basically recent are, but okay, so let's make sure we have every single function that we defined forward have created. So we have everything creates. So let's go and create our build function now. Okay, So we're gonna return a scaffold, she's gonna have Akbar. She's gonna have a title, okay? And, uh, and then we can have our body. This body is gonna have column and column has main excess alignment, which is main exits. Lyman don't start. Are even Put it on center, asshole. Okay. And, uh, Ross access lamb. It is gonna be cross Excels line in that stretch. And you have child our Children, actually. And there you have expanded razor tear to expand it region. She's gonna have a child. This child is gonna be basically a great view. All right? They're going to say, could you don't builder, And, uh, now we need to basically provide some property. So let's go ahead and and first create our own. I see. So honorable this Yes. Control T OK, builder. And, uh, you're gonna start with, um, Patty. Okay. And we're gonna say, patting his edges, it sent Oh, 10 points there. All right. And then we're gonna have our grand delegate, and this is gonna be cellar. Great delegate. Okay, with fixed across excess count. So face across Texas, count that storm that we need and cross access count is gonna be three. So we need to show three items and child aspect ratio is gonna be one. Okay. And, uh, cross access spacing is gonna be nine and main Texas main access spacing is gonna be nine points, okay? And itself formatted and they go, OK, except is our item count. And I am Count is basically are button list Scotland. And after that, up to the adam Country have item builder And in this item, builder gonna get context and index. Okay? And we can use that to build our size box. Okay. And in that size box, we're gonna have a whip about 100 points. Bite off about 100 points. So it's gonna be a square. And for child, we are going to have a raised button, so raised button. Okay? These are gonna be our self and, uh, gonna have batting and reading. That's gonna be edges instead. Oh, about eight points in between and then on pressed is gonna call but a list at that index doc enabled. Okay, so that's going to be on press. We're gonna check if it's enabled. Then we're gonna play the game by that, but in list item, otherwise, in a path mail are No. That is basically if the button is not enabled, that means we've already played the game on that. And there's some user already either player, when a player to have has already claimed that space. So the only two do anything on that and for the child is gonna be brutally start I a fixed . Okay, so that but not that Index. We're gonna get that for the style have textile. Okay? So we can have our next already for that. And, uh, next up is gonna be a color. Okay, so we have our text here. All right, so let's check it out. We have our text, and, uh, takes has a fund and the text. Okay, Can your color but list that index that color, right. And, uh, disables color is, but the list got asked that in next. Uh, I gotta call her, okay. And you have your, um, a sparks type sparks and expanded. So here we're gonna create another race button, and this is gonna be basically for our reset game. So we're gonna simply say tout text and this text is gonna call, like, have reset that style. Next style in textile is going to be color color, start white and on size is gonna be 20 points. Okay. All right. And so that's our text. We gonna have color. So color it's gonna be colors don't read. But the recent padding is gonna be It is in the interests all or 20 points And on press, you can call reset game the doctor antes All right, that I feel we have everything. So let's go ahead and run this. And, uh, I see if you have talked a lot of gold, So, uh, check out leggy. Now, if there's any is an issue, so all right, this building right now, um, let me pause the video or less building, and then we're gonna resume SNL's bill. This finished. All right. The built finished, and, uh, it took about 36 seconds to build this. And let's go ahead and wait for after install. And, uh, I run so all right. So let's take a look. We have, um What have you time? All right, so there we go. We have this tic tac toe game tile created, and let's go ahead and try to play it. So there you go. As you can see, we played an auto played, played one and another one, and, uh, they go play 11 All right? So we can keep playing, and in the middle of we can actually you and do reset And, uh, like that going to get our, um our detective game created. So this is it, guys. Uh uh. And, uh, we have our tick tack toe. OK, let's see if you can lefty other one when you want again. Anyway, it's nice. So this was your detector game? Hopefully he learned something new hand. Uh, you'll enjoy this game. Make your own game. So yeah, that is it for the studio thinks I'm watching. I will see you guys in next video. 44. Flutter2020 Staggered Grid View: Hello and welcome back. And in this video we are going to be looking at a staggered grid. So basically, we are going to be creating this grid layout that is staggered in layouts. So if you notice, the 0 style is bigger and First Style is little personal, second tile is big or small. And we're alternating like that. And basically, you must have seen this layout in photos, app or various different apps. For example, Pinterest for sort of follows the similar structure. But they have a picture and a title in there in their app. But you can have like, you know, this layout basically for anything that you can think of for mainly I would think of like, you know, to have this layout for photos because photos look rather like, you know, appealing. Basically when you have this kind of payout. Reason is you can actually focus on some of the key moments in the photographs with bigger tiles and have like smaller tiles are present like their subsequent events. So there's a lot of engineering that he can actually device into this. But yeah, we are going to be building this layout. And the way we are going to do that is going to be really simple. We are first of all going to use a third party library. And we're going to use the library that's called flutter underscore, staggered grid view. And we are using worthy and 0 dot three dot two. Okay? And once you have included this library in your both bank dot yaml file, if you're using Visual Studio, you just need to press Command S to save your file, to install doors, dependencies. Smes, your dependencies are installed. Go to your main dark, dark file, and we are going to first import the package. So let's go ahead and import the package. Right? The package itself is called flutter, staggered grid. Okay? See, and onComplete should actually. Okay. So let's go ahead and check it out. If there is that cup staggered grid. You and we are looking for that dark violet. Ok. So we are looking for Package on Package, colon, flutter underscore staggered grid view. And slash flooded the staggered grid view, dark, dark. So that is the Dart file that we're looking for. Next, we are going to create a stateless, which it, so stateless widget. We can name this widget. Staggered grid example. Okay? And inside the container, basically, or not inside the container, but for the return value, you're going to return a scaffold. Okay? The scaffold is going to have a bar. And this app bar, this AB bar will have title. Title is going to be a text widget, which is going to recall staggered grid example. For the body. We are going to add a batting widget. Right? Batting widget need spanning a servo. So you're gonna say coast. So constraint, edge, inset, all Valley, we're gonna keep as four. Okay? And then for the child, we are going to say that we're going to create a staggered grid view. So staggered grid view is the view that actually comes or the widget that comes with this, with this library. Okay? And we're gonna simply say count builder. And in the count builder, you have two items. You have crass access count. We're gonna give it a value for. Okay? And it also takes item count. So let's go ahead and see all of these values. So what I'm gonna do is going to say, okay, this, alright. So we are going to need in an item count as well. So as Jake item count, an item count is going to be eight, the number of items. So if you look at our grid, we have 0 to seven, so eight items we have. And then for the fourth item, builder, begin to provide a builder context. Okay? So we are going to simply say builder context. Context and index. Color will be close start and green. While the child, we're going to create a center. And you're going to create the number. So we are going to have a child for the center of a circle of Adar. And the background color is going to be color dot colors dot white. Okay? And for the child of that, we are going to create a text with simple index passed in it. Okay? Like that. Okay? And then for the staggered tile builder, it actually gives us the access to the index i. Alright, so we're gonna take that index, we're gonna create a staggered grid view out of that with the count. And we're going to supply to, for the item in index. Dot is even too, otherwise one. Okay? So this is going to be the tile size. Actually, this is a giant boulder. Sorry about that. So we didn't need staggered tile dot count. So cross access to settle count is going to be two. That means it will not show to cells. And USA is even. So index dot is even. Then give to otherwise one. Okay? Alright. Next up. For them, main excess basing. We're gonna give data 4 spacing and for cross access spacing. And I'll give 4 as well. Okay, with that, our example is ready. I think we made a mistake when he practice, so let's go ahead and make sure we have all the brackets correctly. Pleased, okay, that looks good. And I'm going to start executing to see if it actually. So in order to show you the difference, what we do is we are going to change the color to blue, okay? Just so you know, like you know, that you have created a different example than the sample one that we are looking at. Okay, so let's wait for the build to finish and then it's going to be ready for us to check out. Ok, so it feels like the view is ready this launching now. Okay, so let's go ahead and wait a little bit, little bit more. So we're gonna take a look at another example after this one to basically see how we can use the standard view to basically provide individual tiles, okay? And we're gonna see how we can actually provide tiles. And you can basically distribute those styles for each row. And we're going to like, you know, have some text visits are displayed on those roles. Okay, so just to give another radiation, we're going to create another example. Okay? Alright. That must be the reason why it's not loading because I made a mistake here of not calling the right class. So I can go ahead and stop that. That's my bed. Okay. And I'm going to try to run and debug one more time. Okay? So hopefully it's going to launch very soon. Let me go ahead and pause the video till that time and I'll come back to this launched. Alright, so it has actually launched, and this is what we have. So we have successfully created are staggered grid view, as you can see, it is a grid that can be scrolled and it has distributed items based on a staggered pattern. Okay? Alright, so that was one example. It's going to take a look at another Campbell for the same thing. So what we're gonna do is I'm going to leave everything as is. But I'm going to clear out the padding from banning actually, and only leave the scaffold. Okay, awesome. Okay, so we're going to actually create another example of the stereo view. So let's create another body and we can create staggered grid. Staggered grid view. Okay, and in this job could view, you're gonna give pick the count property. We are going to provide our own parameters. So first parameter we're going to provide is going to be his primary, gonna make it false. And cross access count is going to be for mean. Mean, excess spacing is going to be 4 as well. Cross access spacing is going to be four. So you can sort of like enough, create all those early on. And then you can have children directly inside. And this is a widget basically. So you can say const, rigid and const type widget and an array of that. And basically this array can have some, for example, some text in it. So constant text. This one I'm going to say. And I'm going to copy this line and pasted. Have like eight entries. S. Good enough. Okay? So those are all the children that we are to have. Then you can define this dagger tiles. Now staggered pile skin BAA, constant as well. I'll type staggered tile. And then you can have constant or staggered tile dot count, and you can have count for cross axis in main axes. So I'm going to basically copy this and change the second one. We're going to have 221. Third 1 is going to have two to ten to one. And you're going to repeat that. Ok, so just make sure this count is actually same as the other one. So 12345678. Perfect. Okay. So yeah, so those are are the are staggered pile. So let's go ahead and reload the app. And there we go. I, as you can see, we have this staggered view. And if you notice, our first cell is right here. Second sale is right here. Third cell is right here in the center for cell. And fifth, sixth, seventh, 8. Okay? So that's how your cells are distributed. Now, as the previous example, we could have used in other view, but like you know, this actually gives you an idea how you can have your how you can have basically child element staggered along with the staggered grid defined inside with the child, children and staggered tiles to pattern. Okay. All right. So yeah, so that's about it for this video, I just wanted to show you how you can create a staggered grid for yourself and basically tried to implement it in your photos are related apps to practice a little bit more. And I would recommend reading up and opened up documentation. And basically you just see how the standard grade staggered grid actually works and what are the things that it provides. Ok. So this is it for this video. Once again, thanks again for watching and thank you. I will see you guys in the next video. Thank you. 45. Flutter2020 Animated Pie Chart: Hello and welcome back. And in this video, we are going to be creating this pie chart. So we going to see how to create a pie chart in a flutter. And we're going to use one of the external API that makes it really simple to create this pie chart. So we're going to be creating this view where we gotta have a pie chart. And upon clicking on this refresh, it's going to update with a random number and basically random distribution to show the pie charts and distribution. Ok, so this is what we are going to be working today. So let's go ahead and get started. All right. So first thing I need to do is basically we are going to have to include a dependency called flutter circular chart. And we're going to be supporting version grid than your dot one dot 0, okay? So under dependencies include this platter underscore, circular underscores chart. And if you're using Visual Studio code, then you can simply press Command S or save your document in. It's automatically going to install the dependencies for you. Okay, next, we're gonna go into our main material app. Basically may not art file. And what we're gonna do is here, you can have like my personal thing. So instead we're going to create a material lab and home, we can agree it. So for home, we are going to actually be including a Pie Chart example. So let's go ahead and create a state for widget. So we're going to type FDI and begin to use this first-world stateful widget and foreign autocomplete. We're going to name this animated Pie Chart example, okay? And escape to accept the changes. All right, and this is what we are going to be calling in our Material apps. So we're going to simply say animated eye chart example like that. Okay, now, next up, what we can do is we will first import the package that we have just included. So So package. Alright. So if you look for packages, if everything went fine and he didn't see any error in the debug console. Are you going to seeing flutter circular chart under your auto-complete and Holly you need to do is simply take package, colon, Vernor, circular, flavor underscore, circular underscores chart slash flutter, underscore circular and discourse chart dot, dot, ok. So that's the import, OK. Next, we will create a list of sample data. So we're going to use quarterly profit simple data for this. So we can say final list of lift. Circular stack entry, okay? And we're going to call this, okay? So we're going to call this quarterly profit pi data. Okay? And here we are going to be creating a circular stack entry. Strike stack entry. And this is going to be an array. And we can simply say new, Are, we don't need new. Actually. Just cycled stack entry. And we are going to say circular stack entry type. And here we're going to just give some random data. Alright, harangue keys basically ought you on what this number represents. So we're gonna say Q1. Okay, put this example. I'm going to copy and paste it couple of times. And we say thousand here, 2 thousand here. And here, one more time. In jail. Green, blue, orange, or yellow? Yellow. Ok, Q2, Q3, Q4. Okay? All right. Now we can give rank Key, do. So this is basically our array, okay? This is a sense a and what this circular stack and to kinda give a rank AQI. And we're going to call this one the quarterly profit. Okay? Alright, so make sure everything is perfect. We have every single every single parentheses closing. So, okay. Right. So we're going to include a, another entry here. And this entry is going to be pretty similar. So we could copy. Okay. So just make sure I have this entry closing here and a circular entry closing here. Alright? And right after, right after that, we're going to create another entry. And I'm going to copy this. Okay. So we're going to have another one. And let's give 151750, maybe 2003 with their dogs and leave it there. And I'm going to leave everything else that seem okay. And then let's create another one. And this gives us eighteen hundred, twenty, nine hundred, four thousand and seven parts per this just random data to randomize are basically values. Now what we're gonna do is we're gonna go into our, into our container. So basically animated by charting examples. State, okay, I load the state. Who we are. First thing we're gonna do is we're gonna create, we're gonna create a global key. So final global key. And this global key is going to be of type. Anyway, did pie chart any mutual circular charter sticked to animated circular chart state like that. And we're going to call this chart key. Alright. So once again, global key. Anyway did shark circular charts state? Alright, and initialized angle. Perfect. Okay. Now we need a couple more things. We need a size, so final chart size. And we're going to create a constant for that. And are we going to simply say size of 300 by 300? So that's going to be the sides of our pie chart. And then sample index. So this is just to show sample data. So we're gonna indexes that zeros temporal data is going to be extracted out from this data. So this data is something that he can generate it on your own from the API or you can fetch it from the remote server. Okay? So what we're gonna do next is we're going to basically create a function. And the cycle through the samples. So we can simply create a cycle samples. Okay? Set state sample index plus plus to increase, to assemble index down, we're going to get the list for circular stack array. So sort of color stack injury, circular stack entry. We're going to get that. And we are going to basically use our quarterly profit pie chart data. And we can simply use sampling next, marred by three, because marred by three means like, you know, it's index is never going to go out of bound. So it's gonna basically cycled through. So when the value for sample count is going to be, for example, one, in that case, one mod three is going to give one because one needs a remainder. One divide by three remainder is one. That's the best marred operation. So it's gonna get 11 from there. So if, if the sample index gets du, then is going to be two by 32, remainder is two. And then three by three is like, you know, remainder 0. So everything is going to cycle through 1-2-3 by giving its gonna keep on going. If the sample index goes like know, beyond three, then the same cycle is going to repeat so far for index one is going to be generated because the remainder is 14, five's going to be 26, is going to be fewer and sort of like the hat. So 012, that is going to cycle through that. So that's the, that's a MOD operation that we just discussed about. Okay, so it's going to get the sample. And then we're gonna simply say chart key. So we're going to populate the chart key, began to say current state. So we can set that, so current state. And we can update data and use data for that. Okay, so data that are collected here. So this is basically going to cycle the samples. Now, this makes it easy for us to build our container. Because all we need to do is we simply need to create a scaffold, a bar, okay? App bar, gonna give a title. So dipole is going to be a constant text quarterly profit for the body. We are going to have a center widget. And inside that center widget, what the child, we're going to create any medium to circular chart. This is the main meat of the radio show, are key for the key size is going to be Chart size. Then we're going to have initial chart the data. So initial chart data is, we can say quarterly proper data get to 0th index from there. Okay? So the very first value chart type, we can actually say char, circular chart types are killer. Chart type dot pi is what we are interested in, okay? And what we're gonna do is basically we can have a floating action button, which is going to have, she's gonna basically cycle through our data. So basically it's going to update that. It's going to call this function that we created cycles samples. Just do basically show different examples and animations of that circular, the pie chart that we're short. So we can simply say icon. Alright, con, start, refresh it on press. We are simply going to call cycle samples like that. Okay, so let's go ahead and stop this. I'm gonna go and run and debug. Okay? So we're going to see errors. Okay? So I guess we made a mistake here. So let me see if I can actually get this. Get this. Okay. So for the quarterly, we are going to be based data and ever gonna review this getting so okay. All right, so we're going to have quarterly biter data and it's going to be basically an array of circular stack entry. And we're going to create a new circular stack entry that's going to have a, an array of values, right? And then a rank Key day. Same thing. Okay? So I'm gonna tell you, made a mistake of bracket. Okay, database. Let's go ahead and run this here. We can see if we can get this. Get this going. So it is launching. So let's wait for it to launch. So the build process, build processes kicking in. So it's actually building on Xcode right now. All right, I keep going. And there we go. We have it loaded now. Where and there we go. So if you notice, let me pull it up. So this function right here is not getting calls. So if you notice, our button is not working. So let's go ahead and find out why. Ok. So our button is okay. All right, so on press, it should call void, end set state. Okay. Alright, this is the mistake I made. Set state is a closure like that. And it should basically be called like this, not like this. Okay, so let's go ahead and refresh and try it again. There we go. Alright. So as you can see, that data is loading and it's cycling through our sample data. Once again, the main things about this is basically this data that you can fetch from the API. And you can actually populate your data for the certain re-entry using that. And I'll then that basically you all you need to do is you need to call this any media just circular chart and provide a chart key size in initial chart. Well you, and if you want to refresh, all you need to do is refresh the chart keys, update data, and that'll take care of basically animating the changes into the pie chart. Alright, so that was it for this video. Hopefully, you enjoyed this new API on creating charts. So, yeah, so thanks again for watching and I'll see you guys in the next video. 46. 2021: Instagram Home Complex Layout: Alright, so let's go ahead and get started. So I have empty project created right here. As you can see, there is literally nothing. So we can start from scratch here. So we're going to do first thing is we're going to add our dependencies. So what else I have done is basically I have downloaded some assets. So I've gone to a website called Google fonts dot and I downloaded some fonts. So I downloaded ebony D medium and have irregular and Bill are born PDF files in start out od. So all these points are basically available in the on-point dot or I'll actually upload github project for this. I mean, I'll upload these forms in the assets and providing the GitHub link so you can actually download it from there. So that's one asset that I've now are. So simply created a asset folder and creeps up fonts folder and downloaded and basically stored those assets there. And also created an image folder and I downloaded instead. And so grams image, logo and I actually loaded it over there. Okay, so go back to bootstrap dot yaml. How are we going to do is we're gonna add some dependencies here. So what those dependencies are going to be dependency that you're basically going to need. So under your dependencies, right after you have flutter SDK, right? We need Cupertino icons. So you probably already have this. Actually deleted those. So I'm going to add it. Okay? Same thing, more than 0 dot. Do you route to 0 dot one, dot two. It's going to be fine. Okay? And then we're gonna also have Font, Awesome. Collector point. Okay, so anywhere if you're not, that would be great. Alright. So after adding those two dependencies, and we are going to go scroll down under users material design. We're going to create a basically an assets section so we can look at we can help our assets. So let's say our efforts are located at assets, right? For the images, the image in Star, Logo dot b in G. Alright, so that's where the image is looking at. And for font, we're gonna say, basically, fonts are so foreign to this and other assets level object, so speaking as a performance. So remember, these two levels should be same. And next, indent this with the app. And family. Is going to be Bella wants OOP. Asset, flesh. Dbf. I scrapped the asset is gonna be located, so that's going to be first font family. I'm going to copy this and paste it right here because I need another one of these. Okay, so at the same level, so there's another font. Family is ebony. And font. This is going to have any tea regular or d f dot or d f. Okay? And what the style is going to be? And there's going to be another one of these assets. And there's going to be d medium. The medium. And this one is right, that like okay. So these are going to be the fonts. So I'm gonna go ahead and brand compress command S, save the file, so all the dependencies can resolve the issue. He's gonna see this here in the output. And you'll be able to basically figuring out, okay, so if you notice, I have made a mistake here. Images and this basically complaining that image does not exist. So I'm gonna once again click save. And then you're going to notice everything went fine in that parent is gone. That means all of our issues are fixed. Okay, so once again, add Cupertino fonts at fluttered level, Font Awesome, polluter declutter level, and then add assets for the assets font, for basically fonts, okay? Like this. Alright. Once you have all this setup, let's go into mean dot dark file. So we have done our work inside the assets and does Baghdadi M0. And let's go into main.out YAML. And basically here we are going to have our main app, launch rate Home app, right? So before you like how the home, we're going to create a home dark file in a minute, but we need to add a few more properties. So what are we gonna do? It's inside the main. We're going to change it a little bit. So I'm gonna change this to return app. You, my app I noticed doesn't exist, so it's going to exist in a minute. Okay? And we're gonna create state less budget. Okay? We're gonna call this sleep less region, my app. Okay? And excuse me. What we're gonna do is we're gonna create a new material app. Okay? And this new Literary Lab is going to have a title. And title is going to be Instagram. All right. We're going to say debug, show checked mode, banner to false. So you don't show that banner fallen a theme. We're going to say new, new theme data. Alright? And we're going to have say, primary storage is going to be color dark blue, a striped blue. And primary color is going to be colors. Dark. Black. Button color is going to be colored black. Primary icon. Theme is going to be icon EVM data. And we're going to create a color or there's colors. Black. And primary. X team is going to be text theme. Where their body text. One is going to be text style with color. Colors. Black. And font-family is going to be, you can say m. This is basically the font that we have created. Okay? Alright, so it's close. One more bracket and then how we are going to, so that's our text team. And basically those are body text one. Okay, we're going to create a txt theme as well. So we'll go ahead and find that point right here. And we're gonna say x2 is going to be x2, two y2. So we had x style now texting. And so. Okay, so there's a primary text that hold on. That's primary text theme that yeah. Right. Yeah. Okay. So let's make sure primary texts team is closed here, okay? Next theme, theme. In this text team is going to be text theme. Okay? And once again, we're going to select body text, one, which is going to be text style. Color. Color is dark black. Alright? Okay. Now, basically our seemed data is done silicon that create our home. And this is going to be centered, for example. Good. We're just going to fix it in a minute when we create our Instagram home. But for now, we're simply going to say center. Okay, so now we're gonna create our home feed. And in order to create whole bead, we're gonna need a body. So let's go ahead and create Instagram body object. And then we can actually get their list and stories and I would think, okay, so first thing, less, less creative Instagram stories. Because Instagram Stories is gonna be, is gonna be they needed for the list. Okay? So we're gonna create a file in star stories, dark, dark. Okay? And we can then import material. So just type material and baggage that Purdue early is going to basically a beer. Then we're gonna create our stabilise objects. So a stateless object, out-of-state Paul de, state less object. Okay? And we're gonna call this instead stories. Okay? And now this insert stories is gonna have a, have a final rule basically. So let's create a find out dark text. And this is going to be a row. And this row is going to basically your first main access alignment. So less defined me in excess alignment to be main exercise I'm in dark space between so space between with electric admin access, diamond space between okay. And then we're going to clear this children. And children is going to be a widget. Type, widget type, and I simply create a dx dt here in this text is going to be stories with style. And the style is going to be text style. Font weight is going to be font weight, bold, right? And that's where our text is going to end. And then we're going to create our role. And this is going to have children. So scheme it over budget. So it's going to be pixel periods. We can have icon, icon and start play. Harrell. And we're going to have text, text rigid. And this text widget is gonna watch our table. Style is going to be text style. Font. Weight is good to be foreign to Alright, so let's say your text is, let's see, your text is going to end. Okay? And we just are going to add your ROI is going to end here another widget that top-level rock, and then the entire role. All right, then you're gonna create our stories. Okay? So we're gonna create a static stories. So let's go ahead and create a dose. So final stories, stories, expand, we're going to use expanded widget to call this, okay? And child, You're going to have a batting widget. Okay? Let's give it a batting. Adding a constant edges instead, we're going to say only DOP at eight, so agent's insect only. And we're gonna say is gonna be equally. Okay. So that's your padding. Then you're gonna have child element with this one. And we are going to have a list view. So let me push center here for a minute and let's go ahead and see that formatting. Okay, didn't go to foreign writing now is in place, so I'm going to remove Center and we're gonna say is gonna be a list of view. Okay? And we can use this builder. So ListView builder and I'm going to remove lesbian builder, goes began to have some more properties here. So first of all, scroll direction is going to be horizontal. So excess horizontal. Item count is going to be five. And your item builder is. Basically. So item Builder gives you context and index, right? So we're going to create a stack out of this stack widget, okay? And we're gonna give it an alignment. And alignment is going to be alignment. Bottom right. Okay? And it's going to have children or widgets. So we're gonna say container. And the container is going to have a width of 60 points. Height. 60 points. Declaration is going to be box declaration. Alright? And just go down a shape, box, shape, the circle. And the image is going to be a declaration image. Declaration image. And this declaration image first, let's give it a flip. So fit is going to be box bit dot fill. And then image itself is going to be a network image. And I'm gonna take this random network image or your prom URL. And I'm going to post that should be a string. Alright? Okay, so this is going to be a random image. So let me show you what today is. So basically the search site called random word where you can get images. So if you go in there, you can find images. So I found this random image, so I actually just pick that one up. So that's what I have posted down here. Okay? Basically the link for that here, okay. Alright. So what's your network image? A year. So your network images, Dan and Bill box decoration. It's done. Okay. So decoration images done right? Next hour you need is right up there at the box decoration. You can need margin. So we're gonna say monitoring is going to be constant. Edges inset, and we're going to need symmetric area then search, so we're going to select edges and so dark symmetric for horizontal space, we're going to say a point symmetric on, in horizontal direction. Okay? All right, so that's where our container is gonna end. And next, we're going to basically create. Index first we check if the index is 0, right? So index object we are getting in the, in the item builder right here, right? So the index is 0, gonna say position. Widget, right? Pollution widget we're gonna use. And let's first and give it to you, right? And right, it's going to be 10 and tau is going to be, let me give a dissenter project for now. Okay. Alright. Reason it's complaining because it doesn't have or conditions of Mina say, just eat container for the OR case this ternary operation. So it is 0, then it shall position widget. Otherwise she'll container, right? So we have both of these conditions. So let me take out this center now. And instead I'm going to use circle up there, sir, go out there. And for the background color, we can see colors, the blue accent. Okay? Radius. We're gonna give ten points. In child. We can give an icon. And we're gonna say icon. So we need icon start AD, so we need to add icon. So let me say I start add. Okay. Now we also want to provide size for this icon. So I'm gonna say 14. Size and color is going to be color or start. Wait. Okay. Alright, so then our icon is going to end. Basically, we don't need this. So our CircleUp dot and positioned Richard is going to end. You're going to have or condition or container. And basically our expanded now is going to end right here. Okay? So this is our, this is our stories stories project. Okay? So we created our stories widget. Now it's time to build, basically create our builds. So this is going to be simple. We're gonna have our margin for the container. So we're going to have constant and edges instead, we're going to set edges and said all 16 points. Okay? But the child, you can say, well, let's take a column widget and cross excess alignment is going to be cross axis x alignment, dot stretched or stretch. Main access alignment is going to be mean excess alignment. Start. And main exercise is going to be mean excess size, dark men. For the children. We're going to say it's going to be children sort of gonna be tarp text, right? The produce that we created at the top. And stories Excel. Okay? So these two are going to be, it's, it's children. Put this context container for the column. Okay. Alright, so this basically created our insta stories, right? So our insert stories is now complete. Press or what are you gonna do with this story? Basically, ready? We're going to go to main screen. Maimed are dark and can include insert story inside R instead of container, right? Or center, whatever. Centers. So we can simply create, add instead of stories. And that's actually going to import our installer stories from the sample that from the file that we have created. Great. Once you have done that, we're going to go ahead and launch a debugger to see if our, if our bead is looking okay. Alright, so this point basically is going to be missing a few things, but they don't have to worry about that right now because this is going to be contained within another container. So we can actually have another container that's going to contain it. But for now, we are simply going to see if our content is showing up or not. So this is what we have. So we have like, you know, these stories with the plus icon and you have stories and white. And these are gonna be formatted in a way and so I don't worry about that. But yeah, I Keith our budgets are showing up correctly. Ok. So once we have got the the stories done, then we're gonna go into our list. Okay, so let's go ahead and I'm going to start this. And basically we're going to create a new file here, and we're going to call this file instead list. Ok. And so install underscore list dot, dot, dot. All right. So we're going to import, First of all, material. Import our Font. Awesome. Butter. Aren't out some router dot dark. Okay? And we're also going to import our stories, dark, dark. Right? Now what we're going to create our stateful Egypt. So this time we're going to create stateful. And we're gonna name this instar list. Okay? Alright, so inside our state, who you can create a Boolean is pressed, is equal to false. So you're going to use this in a bit. And then we're gonna go into our build, okay? And we can create first, get the device size. So we're gonna say device size and we're going to use media query for that. So media query, we need media query ARF contexts. We can just say, give us the size. That's only going to get the size. Then we're going to return a list view. And we're going to use builder to build our list. Okay? Alright. Alright. Item count is going to be five. Skill to pipe right now. Item build, island builder is going to be, once again, give us context and index, right? And basically I say index is 0. Then do something. Otherwise, do something, ok. So first, do something less poor, a center budget. So we can get the errors go away. So it doesn't confuse us with any issues. Okay, so what we're gonna do here is we're gonna create a sized box. Ok? And the size of the box is going to have a child. And this is where we are going to contain our stories. Okay? And we're going to also give it a height. And we're gonna see device, device size dot height times 0.15. Okay? Alright. So for all condition, right? So if the item is not the 0th index item or condition is basically, we're going to display a column. And column is going to have a mean excess alignment. It began to say You mean excess alignment dot start here. In excess size. It's going to be min. So main access size? Yes. Men. And cross access alignment is going to be cross access alignment dot stretch. Okay. For the children would be you cannot create widgets. And these widgets that are basically, first, we're going to add a banding rigid. Great. So let's create a padding with constant. We're gonna see edges inset, and we're gonna save from left to right bottom. So from left, right, bottom, 1616. 816. Okay. So these are going to be our reading. So was given a double value. Okay? Alright, then we're going to have a child. A child is going to be basically raw widget. And this row budget is going to contain our children, okay? And this is going to be more widgets. And this, these widgets are going to be basically a container. Now this container is going to have a height of 40 pixels. 40 points, sorry, pixels with 40 points. Okay? And decoration is going to be a box decoration with shape, box shape, so-called. Okay. And then we're gonna have a fit. Sorry. So you have barks, shape, the shape. Okay. Then we're going to have an image, right? And this is going to be a decoration image. Fit is going to be box fit, dot box, dot film. And we can use an image. Once again, I'm going to use one of that random images that I've got from the random image generator. So I would actually, I recommend you using your image or getting it from the random image. So I'm going to use this image right here, okay? And we can now basically close our image. And we're going to close our image, network image and decoration image with this random image. Okay? So our box recreation is going to end. Our container is going to end. Okay? Then we're gonna create a new size marks. So you gotta say a size box. Alright? And inside this sized box, we're going to create our rate of 10. And then we're gonna create text. And can have text here. Right tip Jackie, style is gonna be x2 style. Weight is going to be font, weight, bold. Right? So our texture is going to end here, our widget, it's going to end and the rho is going to end. Okay? And right underneath this role, you can a create icon button. So let's see. Rho is ending under the sized box. I have box and okay, so we are saying this widget right here. Okay? And then we have the scroll. All right. Let me see. Did we get everything right? Okay, so we have box decoration, that's actually for our image. Then our container basically. Then we get the size box, size box or may have with property. And then we have our text, which has, which has text and basically style mold. Alright. So or textile is going to end and said there, x is going to end our budget. It's going to end here. Row it's going to end here. Let me see. I'm going to just create icon button. It's gonna tell us like you meant that issue. Okay? Icon, icons. I got icons. More. Vertical on crass as say null. Tara, icon button. It's going to end right here. So we are, actually, we are missing some element. All right, so I guess there is some issue with the padding right here. So batting batting constant, then we have a child. And underneath that, basically that child first thing that we are that I missed was main excess alignment. So I'm gonna say main access alignment here is going to be a space between, okay. Then we can have, we can have children. And now their children object is going to be a rigid and it's basically going. A role. So what I'm gonna do is I'm gonna take this guy, this ending credit here to basically cut this cut this container. All right. And this is Mr. actually. So we need a for the children. Right. We are going to have a row and row and have its own children. Because we are actually presenting multiple widgets in here. And here. We are going to basically have these text, okay? So basically inside this row widget began to have a container. All right, and I'm gonna move this icon for now. Okay, so we can fix the formatting. So r, rho, rho is going to have basically a container which is going to contain the image, all right? And then it's going to be a sized box, a text, okay? And right underneath this text we're gonna end this rigid, gonna end the row. And here we are going to have an icon. So Icon button, okay? And icon button is going to have icon, icon. I can start dot more vertical. So more underscore. Okay? And then it's going to have on press. We're gonna leave it as nil. Okay? And he had the death icon button. Our widget is going to end, our row is going to end. Our banning widget is going to end. And right after our padding widget is going to end, we are. So this is actually the description about the post grade. Then we're gonna create the post itself. Okay, so we're going to create up flex, flexible budget. Okay? And flexible widget is going too fast. It fit is going to be flex fit, dot loose. And then it's going to have a child, which is going to be an And I'm going to use another 100 random image right here. And I say this random image, okay? And I'm going to give it a fit box. It. Dot cover. Okay? All right, so our image certain Africa is going to end. Her flexible box is going to end. Then we can give this another padding widget. Okay? And this padding widget is gonna have Festival adding constraint edges, set 16. Alright, then child. And this is going to be a row. And this row is going to have main access. So, so first of all, mean excess climate space, main access, space between LA. And then we're going to use create our children rigid widget. Okay? And now these widgets, basically there's going to be an icon button. We're going to have an icon button and it's going to be icon for. So let's say we can see if the icon is pressed and icon, then we're gonna say icons, favorite. Okay? Otherwise, Font, Awesome. Icons, dot r i because art, they go. Okay. So that is going to be our icon object. Okay? So basically I can is created. And what we're gonna do is we also going to set the color so you can see color is going to be, if it's pressed, right, then we're going to see colors dark red. Okay? Otherwise, colors not Black. Okay? So that's going to be your colour object. And when the press happens, right at that time, we're going to say on press, we can give it a function. This function is going to execute our steady state, okay? And we're gonna set is pressed the opposite value of expressed. So if it is pressed is true, then we're going to set it to false. Okay? Alright. Alright. So our icon button is going to, and so this is where our on-premise and this is where I can put an ends, right? And right up to the icon written, we're gonna create another size box. So sized box with, with of 16 points. Okay? Below sized box, we're going to create. An icon. And this is going to be Font Awesome Okay? Alright. And then underneath that, we're going to create another sized box, which is going to have once again with 16 points. Okay? Then we're going to have another icon. And once again Font, Awesome icons. Dop, beeper, claim that one. Okay. And okay, so I consulted in the end, our widget array is going to end. Then our rural is going to enter, okay, and bedding k1. So right below this icon where our borough examining, so this is our paper plane, okay? This is our pivot plane then are rigid than our row. Then here we're going to create another icon for Font, Awesome icon, start bookmark. Okay? And this should go. Okay, thanks this indentation to you have your paper plane, then your widgets and your rho and c are okay. All right, sort of misi. Alright, so, alright, so this view is super complex. So what happens if you lose a track where you are actually writing? So here we have our batting reassigned, the bearing, we serve our children will roll, then main access, then children. Ok. Now this children widget is basically, we are setting an icon and all these things, but these needs to be wrapped inside another child. Let's take a look at from the, from the start. So you have padding, padding defined 16, then you have a row, which is gonna create the rule. And we can then create space between and write this widget, right? Wherever this rigid is ending, I'm going to basically have a, So this up after the space between widget, right, there is going to be another row. And this row is going to have main access alignment. In Exodus, alignment dot space between. Okay? And then it's going to have children in distance. Basically. Egypt's rigid. Alright? Inside this widget, we're going to have your icons. So I'm going to remove this and begin to get the formatting right. Ok. So your first row is going to have another churn because it's gonna have a basically all these element, like your icon, your site's box, with your comment font here or paper plain font, okay, that row, this widget is going to end here. Roy is going to end here. And right after the row ends, gonna create another icon. And this is going to be another Font, Awesome icon, start bookmark. Okay? And then our rigid is going to end, alright? Then our row is going to end, our padding is going to end. Okay? So that is our first line. Alright, so then after that, we're going to create another batting. Okay? In this padding is going to have constant js instead. And to begin to create the symmetric reading, geometric batting is going to be symmetric around horizontal or 16 points, is going to have child. And we can put some x so by e. Okay? So this is basically our text. And this text is going to have style, which is going to be text style. Okay? This textile is gonna have font weight. And this font-weight is going to be bold. Okay? Alright, so that is our font-weight. So takes to embedding are going to end. And then we can have another bedding. Okay? So we're going to have another padding object. Object. This downwards again, constant edges insert left to left, right, top, bottom. So can I have 16 points? 16 points, eight points, 16 points. And you can play with these values and changes as you need them. Basically. So I should start creating center widget to format because that's where the confusion happens. When x, when we just did your code tries to former stuff. Okay, so we're going to create a role in this row. You're going to have. Main access alignment, alignment dot to start. Right. Then it's going to have children, widget and container. Can I create inside the amplitude? And the containers can have height for about 40 points, which are about 20 points. Decoration is going to be declaration. Shape, is going to be boxy shape. Dark, circle. Image is going to be declaration image. In this declaration image is going to have, it's going to have of box dot bill. And we're going to use network image. The random image, okay? So a random image, okay. Alright. So a network imagine decoration, decoration image is going to end there. Here we can add a box decoration and container. We're gonna talk about how these ending points. So, you know, for the, for the complex widgets are complex layouts like these. You have, you know, like Norway earlier, stuff is ending. Otherwise he would end up like I did where I made a mistake in our saw the fields. Okay, so we're gonna create an expanded, we did read text field declaration. We're gonna give it input declaration. And the simple declaration is going to have a border. So we're gonna say input border dot. And we can have hint text in text, right? And we can then simply have the hint staving and a comment. Okay? And they are formatting to place as soon as he saved. Okay, so let me make sure. Okay, so input declaration is ending right here. But x field lending expanded standing, reach it does end. Baroque batting. Okay? And we're going to have in other branding right here. Okay? Now the breading widget. And there's a basic event, the post. What's posted is that one. So we're gonna say symmetric, horizontal 16 points. And child is going to have a text. And this text is kinda nice to do days ago. Thing Instagram has capital D and capitalize. Today's go, OK. And style is going to be text. Style. Colors as color start gray. Okay? Alright, so your text, so it's going to end here padding, it's going to end here, widget here, column NR, ListView builds her. Okay. So let's make sure there is no issue. Alright, so there's no issue. Now what we're gonna do is what I'm gonna do here. I'm going to, instead of calling Instagram stories, I'm going to say in star less. Okay, and we'll hope is to stories from here. And let's go ahead and try to run this. Okay, so let's see how the layout that we have just finished, how that is looking. By the way, this was the I guess one of the longest ones. Next one, home that we are going to, the body is going to be simple. Asked her how because somebody is where Instagram body is gonna go. So we're gonna have like in a body which is going to be really small. But 15 line of code. And then he hell like, you know, home screen, which is going to have the logo and scaffold and everything. That is going to be a little bit big like about stony lines. And then we are going to be, you're going to be done. So I see. Alright, so we are getting some issues. So let me go ahead and let's do this. What what is basically loading is a whole bunch of like, you know, layered issue. So it's got an end result is by first creating are body. So I'm gonna basically what I'm gonna do is create a new file unless the condition up. So instead, it's done under score body. Okay, not dark. Okay? And here we're going to list them all tests or minimize this. And we're going to import material, okay? And we're gonna import star list. Okay? These two either import and we're gonna create a stateless budget. So stateless predictably going to call this insta, body. And then we go see how we can if we can get all the issues resolved. Ok. And heavy, go big and actually debug this once we have like, you know, all these ways your study place me in excess, alignment is going to be started. Okay? And for the children, widget, flexible object takes over. So yeah, so that's about a best here. That is your, okay, so I see your column has main access, has widgets. Okay? And this visit is only going to have less flexible widget, which is this guy right here. And want to foreigners properly, okay. Alright, perfect. So your Instagram listed is gonna show up and then you're rigid and everything is going to close. Okay, let's create a new file unless instead it got dark as well. And for the insert home, basically, what we're gonna do is first we're gonna import our material and import our Barney. Okay, so you can see how we are actually building from bottom lake the lowest level of widget that we created first and then we are creating recipes so you can create it stateless widget inside our home, okay? Call this tends to home. And as cohere some properties here. First we're going to create final top bar. This is going to be an app bar. Okay, let's give it a background color. I'm going to create a color. And we're going to create a Colorado hex value. So fff three, f, f, a, f a Ito. Who's gonna be the colorful background? Center title is true. So goanna show central title. Elevation is going to be one and leading. We're gonna create an icon. And this is going to be the camera. So icons, dot camera, alternate camera. Okay. And then we're going to have title. Title is going to be a sized box. Two, it's going to have a height of 35 points. Child element. And we're gonna use our image dot asset and basically use our logo here. So lower that we added. So images slash instar, underscore, logo dot, right. Okay, so our size box is going to end and then we're gonna create actions. It's going to have a batting padding widget, okay? And we're going to create a constant edges only to the right, let's say 12 points. And the child, you're going to create an icon. I can start saying, Okay, our padding is gonna end, which it is going to end up bar, it's going to end right there. Okay? So there's our tau bar. Now let's go ahead and give this a new scaffold. So scaffold, we're gonna give AB bar. We're gonna say take top bar object that we created at the top for the body. For body, you're gonna say take instead body, for instance. So create an object for that. Ok. For a bottom navigation bar, we are going to create a container, but this time we're going to just create hidden navigation bar so we can have color. As colors, dark. Colors start to white. Okay? And then we're going to have height up about 50 points. You're almost done with this. Alignment is gonna realignment. Dot center. I went off center. And for child, you can have a role. Martin app first year. So bottom bar, which is going to have child row. Okay? And this is just going to have main excess alignment. So let's give it an alignment, alignment dot space around. And then this kinda have children object, which is gonna be a collection of hope Egypt. All right, and here we're gonna create a view icon, so Icon button. Okay? And we're gonna clear ICANN dot home of icon icons. I can start home. Ok, press. They are simply going to say there's nothing. Okay. So that's your best I can. And so let's see. We have Icon button. I can start home and pressed status, nothing, and then going to have another icon button. And you can have a few ideas for the bottom. So what I'm gonna do is I'm going to paste few icon buttons right here. Okay? So basically these are like, you know, for search, we base the US one as well. Okay? New is no longer needed, so we are going to grow that. And these are going to be basically, or this is going to be our navigation bar, the bottom navigation bar, okay. Then r, I can put it is going to end widget, it's going to end row bottom, app our container, and then scaffold. Ok. All right, so no errors. All right, so let's go to Maine, our Dart now, and we are going to load in Stockholm. Okay. And let's go ahead and stop. And let me start debugging again. So I'm going to pause the video and once the app is loaded, we're gonna come back. Okay, so it took about 30 seconds to build and load. And then we go, this is basically our full layout like a sand. You needed test. All the components needs to be in place before we see it. And now you have your I'm your Instagram feed ready, okay, with all the tabs and stuff. So this is, this, as you can see, basically this was a pretty complex layout, it on its own, right? And we made a few mistakes on the way, but we eventually learned how we can create smallest components individually and then combine them to build the entire experience entirely out. Okay, so yeah, so this was it for this video. Thanks again for watching. 47. 2021: Pomodoro Timer App: Hello and welcome back to this new video. And in this video, we are going to be creating a focused dimer or Apollo draw dryer timer. Where we're gonna be building this UI. And we are also going to be learning how we can use shared preferences or user default. Do save the data that we have, are better at user have selected to be stored. So let me show you what we're gonna be building. So we're going to be, we're going to have this UI. Where are you going to have these three buttons? So for work dime, so basically the purpose for focus timer, excuse me, is to have a timer that shows you like, you know, the continuous amount of work that you are going to be doing. So you can focus on that work and then more want to do something else. So basically, in this case to how are you going to have like, you know, say focus, time, work time, and you have given yourself 45 minute that he gonna focus on certain things. And then you're gonna start your timer to basically do your work. Then you're gonna win. This timer runs out, you take a short break. And basically you're short break starts when you come back, you presume on some work or they take a long break, okay? And you can start this timer if you feel like you have accomplished basically the focused time for today. So we're also gonna have settings screen, the setting screen. There's going to have these three items where you can actually increase or decrease the time that you need for your short, long breaks in these things are going to be saved in your user defaults. So whenever your user guilty app, basically still let me kill the out and come back, the time is actually saved. For example, we are going to take a short break and if you recall, we change that short break to have ten minutes, 20 minutes, ten minutes, 20 minutes. So that's what it has retained. So this is what we're gonna be building. So let's go ahead and get started. So what are we going to be doing is first of all, you're going to be adding some dependencies. So let me copy and paste the dependency then I'll show you what I have got. So we are going to be having these two dependencies person into gear. More anything more than 2.1.1 kind of version is fine. And shared preferences, which is basically essentially UserDefaults or shared preferences for Android. And then we're going to see, now what else I have done is I have created how these files that we're going to be needing. So we're gonna need basically her main entry point. We're just going to remind our dark. We're going to need settings screen. You're going to need a dimer, dark, dark. They need dimer model dot, Dart and widgets, not dark. Okay, so let's go ahead and get started. So we're going to start building out these one by one. So let's go ahead and first. Build out our settings, settings button, settings, screen. So we're gonna go into our signing speech there. Okay, and intersecting speed began at first to help he I import statement. And the import statement is going to be importing flutter Material dot Dart. So just type package right now or the Missy of my auto-complete works package. Material dot, dot. And then we can have a type definition. Type definition for a callback setting is going to be a void function with string and int. Okay? And we're going to have Buster productivity button, state less widget. So stateless productivity button. And this button cell is going to have two properties. So why no colour? So these are going to be the properties. And then we have our visualizer. So productivity, which is going to take these things. So let's go ahead and define required. And psi is going to be optional. Alright, so let's go ahead and define them. My pad, okay? Alright, so next hour we are going to override our build and we're going to return a material button. What do you know button? And this material button, we're going to have some property. So let's go ahead and put a semicolon there and then it can have a child. So it's going to be text the stocks Dexter style. You're going to have next. Style color, Cola stock like. So that's gonna be our guidance in Saint. All right. Now next we're going to have pressed it's going to be on breast. And you're going to have this dark color. Men with its gonna be, you're gonna check if the size is not equal to null. Then I'm gonna say this dot size and the way it's 0. Okay? So that is going to be our, our productivity button. Ok. So after them putting glass began to create a class I stateless widget for a Settings button. So stateless widget or Settings button. Alright? And this again is going to have some properties. So color, text, savvy, initializer, constructor. All right, and inside our build, we're going to return a material button. And this material button is going to have some property. So let's go ahead and create those posture. It's going to have the child texts, so go ahead and copy this. All right. So we go ahead and add a semicolon neater. And then we can call this doc call backroom settings value. Ok. We're gonna have this dot color. Like so. Alright, so that is our Settings button. Now let's go ahead and create our timer model. So we're going to have, are going to have our Tyler model. And time or model is going to be a simple class. Time our model, string, time, double percent. Okay? Alright, next up, we're going to create our class four countdown dealer. Okay, so let's create our timer. Now. If we're going to go into a timer and we're going to import bust, dark, dark, Async. We also going to import our Bangla by our model. And we're going to import the package, which is going to be shared preference. So let's see. We can get autocomplete shared preferences. Shared preferences, dot, dot, ok. Now we can create our class calm down Louis model. Concordant. And discordant diameter is going to have some properties. So we're going to have a double radius. This is basic Yara gone down diamond that we show on the center of the screen. So we're going to define initial values. You're going to create a function return time, duration, time at t. And here we can simply get the strain. So on minutes is going to be d dot, d dot in minutes, tests and ten. So if that's the case, but append 0, otherwise, T dot at 0 plus D dot in minutes. String. Otherwise we're going to say T dot, dot toString, toString. Okay? So basically we can then get the minutes computed like that. Number four seconds, minutes times 60. Okay? And then string seconds, nano seconds, less than ten. And append and 02 seconds to a string. And the light seconds up to string zone. Okay? Okay, so next we're gonna create another string. And this one is going to be formatted dime. We couldn't have minutes, colon seconds. And we're gonna return to Excel. Okay? So that's our sort of return time. Alright, we're going to create a stream dimer model. And this is going to be async. Alright? And we're gonna yield periodic. So we're going to periodically yield on the duration, which is going to be seconds. So every second begun to yield the inter alia right here. And then we are simply going to say string time. This dot is active. All right, then we'll say time is equal to minus singer duration. Radius in seconds divided by time. In seconds. Time in seconds is less than equal to D o. In that case, we cannot simply sent there is active to occur all the time return. And we're going to return that Angular model. It's going to have the time and underscore radius, the percentage. Okay? Alright, let's go ahead and see what we got here too. We have a stream and a sink. Okay, so that fixes the issue. Alright, so now we're going to create a feature or settings. And this is going to be async as well. Amazing pointer. We read shared preferences. And we're gonna await for SharedPreference getInstance. And we're going to get the work value from their preferences. Dot get int. Or if e is equal to null, then we can return 30. Otherwise, here we go. Now, what do we get? The SharedPreference? Okay, I'm gonna copy this and based at Tweet diets, and we're going to do this for a sharp break. Longer. That's already okay. So we can have say this is or sharp break. If it's not present, then we've done five. Trump right? For long break. Okay? Now we're going to create basically a void function to stop dimer. Dimer. So stopper Tyler is only going to be. In seconds is gradient, then you're going to start the motor, okay? Alright. Now, we can now start or function. That's going to be async in nature. We can now wait for, I think so read settings called back and said the radius. One. Set the time duration is going to be seconds. So you don't fall time is going to be times x. So that's going to be a star torque. And then we're going to have start breaker function, which is going to take Boolean or sharp break guard lava. So kinda say score. Radius is one, is going to be deep ration. It's going to be short. So it is basically is short duration. Right? So short duration then return chart break, otherwise, long break, seconds we can set to 0. K instead, full-time, underscore time X0. So that actually punished finishes our timer and timer model. Now on to the Settings screen itself. So begin to create settings screen, and then we're going to come back and populate our main app. Okay? Alright, so next time we're gonna get our widgets ready. So let's go to rigid style. And what are we gonna do here is we're going to click Import and package import material. Do better material. Okay? I'm going to need to import shared preferences. So shader reference is sh