Getting Started With Flutter | DevTechie Inc | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Getting Started With Flutter

teacher avatar DevTechie Inc, Learn new everyday

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

54 Lessons (12h 45m)
    • 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

    • 48. NEW 2021: Whatsapp Clone

    • 49. New Social UI Part1

    • 50. New Social UI Part2

    • 51. New Social UI Part3

    • 52. New Social UI Part4

    • 53. New 2021: Flutter pass data to next screen

    • 54. New 2021: Flutter photo gallery app

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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 Inc

Learn new everyday


Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
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.

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