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

Flutter Zero to Professional: cross platform development for iOS Android

DevTechie Interactive, Learn new everyday

Flutter Zero to Professional: cross platform development for iOS Android

DevTechie Interactive, Learn new everyday

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
65 Lessons (13h 35m)
    • 1. NEW 2021: Whatsapp Clone

      25:15
    • 2. 2021: Pomodoro Timer App

      50:44
    • 3. 2021: Instagram Home Complex Layout

      69:05
    • 4. Flutter2020 Staggered Grid View

      19:15
    • 5. Flutter2020 Animated Pie Chart

      20:09
    • 6. New: Tic Tac Toe Game

      35:08
    • 7. New: Flutter BusinessCard

      31:48
    • 8. New: Flutter DiceGame

      12:26
    • 9. New: Animated Age Calculator

      20:06
    • 10. Intro

      5:54
    • 11. What is Flutter

      9:46
    • 12. Installation & Environment Configuration

      9:43
    • 13. Hello World App in Flutter

      13:25
    • 14. Understanding Flutter Classes and Main Method

      11:40
    • 15. Stateless VS Stateful Widgets

      17:12
    • 16. Dart Programming Language Tour

      24:46
    • 17. Create First Rich UI App in Flutter Part 1

      22:44
    • 18. Create First Rich UI App in Flutter Part 2

      12:31
    • 19. Create First Rich UI App in Flutter Part 3

      9:49
    • 20. Create First Rich UI App in Flutter Final

      11:43
    • 21. Using Themes in Flutter

      11:18
    • 22. Create SnackBar

      6:56
    • 23. TabView and TabBar

      9:36
    • 24. Animated Drawer Menu

      10:26
    • 25. Orientation Detection

      9:25
    • 26. Downloading Images from Internet

      4:52
    • 27. Fade In Animation on Downloaded Images

      9:45
    • 28. Caching Images

      5:31
    • 29. Basic ListView

      5:40
    • 30. Horizontal ListView

      9:27
    • 31. Handling Long ListView Items

      9:26
    • 32. Creating mixed item listview

      18:03
    • 33. Creating mixed item listview 2

      2:34
    • 34. GridView

      6:02
    • 35. Gesture Detector & Tap Gesture

      11:36
    • 36. Ripple effect on tap with InkWell

      9:41
    • 37. Swipe To Dismiss Gesture

      14:19
    • 38. Navigating Between Pages

      13:06
    • 39. Passing data between pages: Master Detail

      18:25
    • 40. Returning Data From Selection Screen

      20:28
    • 41. Hero Animation

      10:28
    • 42. Fade In Animation with Stateful Widget

      15:28
    • 43. Container Class

      8:30
    • 44. Row Class

      7:48
    • 45. Column Class

      7:13
    • 46. Working with local images

      10:09
    • 47. Text class

      9:06
    • 48. FlatButton Class

      2:51
    • 49. Raised Button Class

      2:08
    • 50. Floating Action Button Class

      4:51
    • 51. Icon Button Class

      3:36
    • 52. AppBar Action Buttons

      9:27
    • 53. Button Bar Class

      3:40
    • 54. Text Field Class

      2:19
    • 55. Stack

      6:00
    • 56. Stateful GridView

      10:18
    • 57. Stateful AppBar

      15:31
    • 58. Stateful AppBar

      10:39
    • 59. Stateful Checkbox

      9:43
    • 60. Stateful TextField

      5:12
    • 61. Stateful Slider

      9:46
    • 62. New Social App Part1

      10:55
    • 63. New Social App UI Part2

      16:47
    • 64. New Social App UI Part3

      16:44
    • 65. New Social App UI Part4

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

Community Generated

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

2,690

Students

1

Project

About This Class

What is Flutter?

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

What does Flutter do?

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

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

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

Who is Flutter for?

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

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

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

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

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

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

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

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

Meet Your Teacher

Teacher Profile Image

DevTechie Interactive

Learn new everyday

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    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.

Your creative journey starts here.

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. NEW 2021: Whatsapp Clone: Hello everyone. Hope you're doing great. And today, in this video, we're going to be building a WhatsApp clone in flutter. And let me show you what we're going to be building and then we're gonna get started. So you're going to be building this Flutter app screen. And I though we are running this in similarity, but that's where you can ski, can't see the cameras screen. But if you run this inside a device, you can see our camera running. Okay? So you're going to be building this UI where you can show the main page or WhatsApp. You can show the status for the user, cost log and basically entire UI layout. And then like we are. So going to integrate the status page where you can have these story of use for the status. Okay? So this is what we are going to be building in this video. So let's go ahead and get started. All right, so I'm going to pull up the project, the empty project that I have created. And go ahead and fire up your Visual Studio and open your empty project or her liking the template. And we're going to be big. We're going to start removing carbons of this boiler, boilerplate stuff. How very soon? But let's go ahead and first gets some dependencies into our boat. Fact, Art, YAML, okay, and they serve typing. I'm going to actually paste the code. And I'm going to walk you through that. There were like, you know, it saves a lot of time and you can always pause the video and take a look at what's going on. All right, so first of all, for the worship and the environment are there are some major changes that have happened in Florida or so. Florida to D2L has breaking changes. So I'm going to reward this back to two dots, seven. And that actually works for most of the cases. And as soon as you are gonna save, are you going to start seeing some of the errors? So let's go ahead and fix this. So basically, like, you know, I mean this all cord is going to be gone, but but we want our code to be in a good state. So we're going to have like this, like you know, we're gonna remove like no optional sin required. And that's actually going to change. Like, you know, basically bring, bring our project back a good safe. The other thing that we're gonna do is we are going to have lake, you know, a couple of dependencies. So there's going to be one for camera in 14 story views. Okay, so right underneath Cooper deny kind, I'm going to paste that those two dependencies. The first one is for camera. It's actually adds, it adds the camera support. And the story view is the Status view that we just looked at. This guy right here. This is what is the status view. And we're going to be actually using this cool little widget for that. Okay. The other thing that we're going to be, I guess, yeah. So this is the only thing that we're going to do in Bob's dot YAML file pops back down to YAML file. And now we're going to go ahead and create some folders. So what's, so I'm going to create a folder and I'm going to call this one models, okay, inside the model, I'm going to create a new file. It's going to be chat, underscore, marble, dark, dark. All right? And this guy right here is going to host our chat model. So let me go ahead and paste the code and we can talk about it. Okay, so basically we're going to create a class for a chat model, which is going to have properties name, message, dime, and avatar. Url. For the constructor is going to have a lake. You know, all these properties are taking in. And then we're going to create some sample data. So what I'm gonna do is I'm going to put that data in here. And let's go ahead and take a look. So it's going to be a list of jab models. It's just a dummy data. And what we are doing is basically we are creating this array of Jack model They have like in our sample chat messages. Alright, so let me change that to just your PM. Five, BAM, like that. Alright. So this is basically our, our CED model that we're gonna be using. And then we're going to have some pages for all those pages that we've been seeing. So you're going to basically create a new folder or once again, and I'm going to name this folder repeated. And and the page is it's basically going to host some of the bases that we're going to use. So let's go ahead and start building out. So first one is going to be the call screen. Our call screen is, is rather simple, so I'm gonna actually. Start with that. So let's go ahead and right-click and create a new file. And we're going to call this one calls screen Dart. Dart. Okay? And basically are you going to do, is we are going to, I'm going to paste some code here and let's talk about enough. So first thing we're gonna do is import the flutter of material dot, dot. And then we're going to create a class in this one is going to be stateless. Region is simply going to have a center text for calls in. You can actually display a list or something like, you know, here. But for us, we're just going to display a cost. Sort of. So the calls are centered text, that's it. So you can populate that certainly up to you. That's why I actually started with that one because that was a simple. Next one is going to be the cameras screens. So let's go ahead and build a camera screen. And this is where we're going to be using, are we going to be using our plugin? So first, let's import from material dark, dark in camera, dark, dark. And next thing we're gonna do is we're gonna create these stateful widget. Okay, so let me paste the code for a stateful widget and we're going to create a class camera screen which is going to extend stateful video. We're going to create a list which is going to have a camera description in cameras. And basically then we're going to initialize doors inside the constructor. Okay? Next, we are going to create our camera camera state screen, like this one. In camera Status screen is basically stayed for camera screen. If you go and look for the definition, this is the camera screen that we're actually calling right here for the state, for widget. And then we are creating a camera controller. Okay? Now this camera controller is something that's coming from camera API that we are using. And we are going to create that camera, camera controller. And then we're going to initialize the state. So inside the initial state, and we're going to create a new camera controller and we have got the cameras. So you're going to take the 0th position of the camera and we're going to set the resolution to medium. Okay? And then we're going to initialize that, okay? And if the camera is not bounded, then we're going to return from there. Basically. Otherwise we're going to set the state with the empty and, and you just put the disposed to dispose the camera controller and call the controller dark dispose on it. Alright? And then for the build function, even as say like you know, if the camera is not initialized, just return a new container. Otherwise, return a new. So basically gone the next return a new app, a new aspect ratio, our widget and aspect ratio visit is basically going to get the controllers aspect ratios, basic cameras aspect ratio, and add a preview layer using camera preview. And we're going to add the controller, supply the controller to that. Alright, so this is basically going to create our camera screen, right? So next one is going to be the, the chat screen. So a chat screen is where we're going to use our model that we created. So we're going to call the file itself chat screen dark, dark. Okay. And let me go ahead and paste the code and we can talk about it. So let me go ahead and obesity in direct code. So first thing we're doing is we're importing the material dart, dart in chat model. Okay? And then we are creating our chat screen stateful widget, which is initializing the screen state, which is just going to state this guy for the state chat screen. Okay? All right, so let's go ahead and collapse things so we can actually see it better. So all we're doing is we're first creating a new list builder, ListView builder. And we're passing our dummy data into that. So for each data we're going to create a child rigid. It is going to start with a divider and a new list tile. And then list-style is going to have a circular avatar, basically with the theme. And there's network image call that's going to be made to the avatar URL, which is going to become the background image. Okay? And then you're going to have your main access in this main axis is going to be the space between. So we're going to create a row and then we're going to create a text for the name in the time that chat message has been sent. Okay, and then we're going to basically go right after this row. We're going to have like from the subtitle, we're going to have a container with the text message in it. All right, so, so that's our, that's our chat screen. And next, are we going to create our story. Story page view. So let's go ahead and create that. So let me get you the page New File, Storage page view. All right, so we're going to do is once again material dot-dot-dot. We're gonna import that and we are going to import a story view dot, dot. Now Story View is actually another package that we just inherited. I would like you to include it in our pups, pups back. And we're going to create a state less widget, which is gonna initialize a story controller. For our build, you can actually create our story controller. And then we're going to create our list of stories. Story, story item can contain text. So we're going to create the text one of the first one. And then you're going to have like basically you can have like beach image, which is going to be an image to covering the entire page. And then like you know, another image which is going to have a GIF file, okay? And we can keep on supplying our story controller to make the, make sure you know this list and sub in the story. And then parks fit dot container to contain all the, all the items. And then we're going to return our story view with story items controllers because I said the inline to force in repeat to true. Okay. Going to create our story screen. All right, next is going to be the Status screen. So let me create a new file right here. Okay, So, uh, Status screen is basically where we're going to show the status. And let me paste the code for this one is a little bit bigger in before. Let's make sure this picture that our pages are correct. All right. For SAP splash pages, story underscore, page under score of u dot dr. All right, we should have. Okay. All right. So we're going to import material and story-based and then let me collapse. So in the Build, we're going to first create a container with a color, okay? Sort of like a whitish color. And then we're going to create a column inside the columns. Cross excess alignment is going to be at the start. For the children. We're going to create a card. So let me collapse all of these. So we're going to create a card widget. And inside the card widget, we're going to have some child elements like, you know, a and we use basically your child element is going to start with the padding. So we're going to first create our padding here and then we can have a circular avatar. Okay? So basically there's going to be a list of style right here. Inside that. The leading is going to have a stack inside the widget. We're going to have a circular avatar. And we're going to position that. Okay? And inside we can have an icon. So if you must visualize, this is the status. So what we're doing is we are actually getting the plus icon right here. And then inside the container from the position we are actually positioning this inside the circle, circular avatar, and that is our status page. And then we have the text status and the subtitle text tab to add the status here. Alright, so that is our first card basically. And I'm going to collapse that. And I'm going to add some padding for Nike NOW with the text view updates. Okay, and we're gonna make it taken a style and a little bit. Fifth color, gray in font bold. All right, and I'm going to collapse that. Then we're going to create an expanded list. This expanded list is basically going to show our container and then it's going to have batting for Edge said, there's going to be a ListView. And inside the ListView there's gonna be a list tile with a circle. You can actually get an image from random user dark me API, a network image. I'm going to download it from there. For the title, we're going to use texts and we're going to style that text for the subtitle. We're going to just put the text in there in on tap, began to push the navigation to show the story page view. So that's what happens. You actually show the story page right after that. Okay. All right, so we have all the things that are needed are ready to go. So now we're going to go into, are we going to create a new file and we're going to call that WhatsApp home. And then that file is going to basically call all the all these other navigation items. So let me go ahead and copy. So we're going to do is let me do this. There we go. Okay, so we're going to import all of our dart files and all right, so let's go ahead and take a look. So all we're gonna do is you're going to have liking our camera material in all the pages referenced at the top first. And then we're going to create our state for video. And this stateful widget is going to call this class WhatsApp home state. You're going to create our tab controller for estab controller is what you, what you see right here is the tabs that we have, that we have created. So you have tab controller and we're gonna say Show fab to true to show the, the fab button on the chat right here, this is going to appear. And we said that tau controller to the index one hour, which is basically the chat index. So index 0 is your camera index in chat is your first index. So we're going to say here, so focused in there are four tabs in here. All right, and we're going to put the controller and put the put the listener on that on the tab controller and say like, you know, whenever the index is not one, basically it's not on the chat. Then hide the fab. Okay, so as you can see, the enemy did. Fab is being hidden as soon as we actually change the screen to a different screen, right? And then we're going to call the set state. Now let's talk about the scaffold. So basically we're going to create our staff scaffold. For the AB bar. We're going to create our AB bar. Okay, we're gonna put the name, the elevation for the R-bar. And then at the bottom of the bar we're going to create our dab bar in going to supply the tab controller in there. The indicator color. We're going to set it to white. That's the indicator, white color right there. Then the tabs itself like the items. So camera, icon, phosphine, chat skies are taxed and then your status texts in your course. Alright. Then next we're going to have basically our search results, basically the actions for the app tab bar. So as you can see, the bottom is already closed here. So that means all the tabs have been listed out. And now we're talking this section right here, the actions. So you're going to create a search action and basically a more action button. All right, so that's your deborah right there. And so that guy right there is your tab bar. And then you added these actions for more, which is this More button right here. So you've got those actions listed right here for your more, and then basically your search icon right there. Okay? So those tools, search icon and you are more button. So you can have like, you know, your actions there. Then comes to your tab view, which is this section right here. And we are initializing with controller. And we are initializing all the screens that we have. So we have that camera screen and that we created right here. All right, so there's cameras screen, There's just getting cold. And then you have your chat screen Status screen and call screens. So basically 40-year tab, bar view children. You can now put all the tabs that you want to show, okay, and for the floating action button, you show our FAB that actually has open chat. So essentially when you press like you now, are you just going to print something, but it's actually like Node Icon that message to create a new message. So you're going to open the contact in, display the new master. So I think message going to just type them in. Okay. All right, so now go back to our main dark, dark file. This one is going to be pretty simple. Once again, copy and paste and change this to WhatsApp. Okay? So we're going to import from dot-dot-dot async because we're going to use the async. Going to use a camera to support the camera's support. And in the WhatsApp home, in the material dot Dart, how are we going to do is you're gonna get all the cameras. And we're going to get like, you know, basically get all the cameras and that there are, so this called right here is basically going to go out and populate. And the cameras that are available within the inside, your phone, front camera, back camera waiting or camera and all of those. Once we have this kind of populate this our cameras local variable, or they can have global approval. Then we're going to create it. This myapp steepness widget, which is going to have basically the material app. And our title is going to be your SAP and theme. You're going to create a theme data with this custom color, like, you know, cursor or like a greenish color or foreigners. Whatsapp. And you're going to read all want to show the debug banner. So we're going to set that to false in for the home screen we're going to set do once they have home supplying the cameras that we have gathered through this API call. Okay. How would that let's go ahead and start run without debugging. And we're gonna choose that in our early have iPhone 12 Pro Max opened. So it's going to basically install this app. And it's gone into. So it should create a new app right here. And then app, that app should show essentially like our newly built up. Okay, so it's probably going to take a minute and that anatomy or to put Blakey a few seconds to run the build. All right. So I'm going to for the bill to finish. So beloved son took about 30 seconds and there we go, yell or South created. And we are connected. So there we haven't lake in our first w is opened up as the first heads the initial view. And then you have your all your screens. And if you click on your status, you can see all the status. Status is, they've got a story is actually being worked out properly. Okay. So once again, this is where like, you know, the tab bar camera status is not going to be initialized because it's going to be empty. It's usually this is because like, you know, you're not running on the screen, on the on the actual forms or when you run it on the phone, you can see your MRF for you right there. Alright. So yeah, this is it for this video. I just wanted to show you how we can build a WhatsApp clone inside a, inside flutter in hope you like this style like you know, where I can actually talk about the the the the court itself instead of typing it in front of you. So I will see you guys in another video. Thanks again for watching. 2. 2021: Pomodoro Timer App: Hello and welcome back to this new video. And in this video, we are going to be creating a focused dimer or Apollo draw dryer timer. Where we're gonna be building this UI. And we are also going to be learning how we can use shared preferences or user default. Do save the data that we have, are better at user have selected to be stored. So let me show you what we're gonna be building. So we're going to be, we're going to have this UI. Where are you going to have these three buttons? So for work dime, so basically the purpose for focus timer, excuse me, is to have a timer that shows you like, you know, the continuous amount of work that you are going to be doing. So you can focus on that work and then more want to do something else. So basically, in this case to how are you going to have like, you know, say focus, time, work time, and you have given yourself 45 minute that he gonna focus on certain things. And then you're gonna start your timer to basically do your work. Then you're gonna win. This timer runs out, you take a short break. And basically you're short break starts when you come back, you presume on some work or they take a long break, okay? And you can start this timer if you feel like you have accomplished basically the focused time for today. So we're also gonna have settings screen, the setting screen. There's going to have these three items where you can actually increase or decrease the time that you need for your short, long breaks in these things are going to be saved in your user defaults. So whenever your user guilty app, basically still let me kill the out and come back, the time is actually saved. For example, we are going to take a short break and if you recall, we change that short break to have ten minutes, 20 minutes, ten minutes, 20 minutes. So that's what it has retained. So this is what we're gonna be building. So let's go ahead and get started. So what are we going to be doing is first of all, you're going to be adding some dependencies. So let me copy and paste the dependency then I'll show you what I have got. So we are going to be having these two dependencies person into gear. More anything more than 2.1.1 kind of version is fine. And shared preferences, which is basically essentially UserDefaults or shared preferences for Android. And then we're going to see, now what else I have done is I have created how these files that we're going to be needing. So we're gonna need basically her main entry point. We're just going to remind our dark. We're going to need settings screen. You're going to need a dimer, dark, dark. They need dimer model dot, Dart and widgets, not dark. Okay, so let's go ahead and get started. So we're going to start building out these one by one. So let's go ahead and first. Build out our settings, settings button, settings, screen. So we're gonna go into our signing speech there. Okay, and intersecting speed began at first to help he I import statement. And the import statement is going to be importing flutter Material dot Dart. So just type package or the Missy of my auto-complete works package. And then we can have a type definition. I've definition for callback setting is going to be a void function with string and int. And we're going to have a productivity but stateless widget. So stateless productivity button. And this button itself is going to have two properties. So why no colour? So these are gonna be the properties. And then we got to have under our visualizer, so productivity, which is going to take these things. So let's go ahead and define. Required. Size is going to be optional. Alright, so let's go ahead and define them. My pad, okay? Alright, so next hour we are going to override our build. And we're going to return a material button. Button. And this material button, we can have some property. So let's go ahead and put a semicolon there and then it can have a child. So it's going to be text the stocks Dexter style. You're going to have next. Style with color. So that's gonna be our text in Saint. All right. Now next we're going to have pressed on-premises gonna be this.tab on breast. And you're going to have this dark color. Men with there's gonna be a streak going to check if the size is not equal to null. Then I'm gonna say this dot size, otherwise 0. Ok? So that is going to be our, our productivity button. Ok. So after them couldn't last began to create a class I stateless widget for a Settings button. So stateless widget or Settings button. Alright? And this again is going to have some properties. So color, text setting. And we're going to have an initializer or constructor, right? And inside our build, we're going to return material. And this material is going to have some property. So let's go ahead and create those question. It's going to have the child texts, so go ahead and copy this. All right. So we go ahead and add a semicolon neater and then pressed. We can call this doc called Background Settings value. We're going to have this dot color. Like so. All right, so now let's go ahead and create our timer model. So we're going to have, are going to have our Tyler model. And timer model is going to be a simple class. Time our model, string time. Okay? All right, next up, we're going to create our class for calm down dealer. Okay, so let's create our timer. Now. We're gonna go into Tyler and we're going to import bust, dark, dark, Async. We also going to import our Bangla by our model. And we're going to import the package, which is going to be shared preferences. So let's see. We can get autocomplete shared preferences. Shared preferences, dot, dot, ok. Now we can create our class calm down model. Concordant. And discordant diameter is going to have some properties. So we're going to have a double radius. This is basic Yara gone down Bangladesh that we show on the center of the screen. So we're going to define initial values for breaks. And long breaks. You're going to create a function, return time, duration, time at t. And here we can simply get the string. So on minutes is going to be d dot, d dot in minutes, tests and ten. So if that's the case, but append 0, otherwise, T dot at 0 plus D dot in minutes. String. Otherwise we're going to say T dot, dot toString, toString. Okay? So basically we can then get the minutes computed like that. Number four seconds, minutes times 60. Okay? And then string seconds, nano seconds, less than ten. And append and 02 seconds to a string. And the light seconds up to string zone. Okay? Okay, so next we're gonna create another string. And this one is going to be formatted time. We can have minutes, colon seconds, and we're gonna return to Excel. Okay? So that's our sort of return time. Alright, we're going to create a stream dimer model. And this is going to be async. Alright? And we're gonna yield string dot periodic. So we're going to periodically yield on a duration which is going to be seconds. So every second begun to yield the inter alia. Okay? And then we are simply going to say string time. This dot is active. All right, then we'll say time is equal to minus singer duration, radius. And Disco time in seconds divided by time. In seconds. Time in seconds is less than equal to 0. In that case, we cannot simply sent there is active to occur. The timer return. Return is going to have the time and underscore radius, the percentage. Okay? Alright, let's go ahead and see what we got here too. We have a stream and a sink. Okay, so that fixes the issue. Alright, so now we're going to create a feature or settings. And this is going to be async as well. Amazing pointer. We read shared preferences. And we're gonna await for SharedPreference dot get instance. And we're going to get the work value from their preferences. Dot get int. Or if e is equal to null, then we convert our 30. Otherwise, here we go, now we're done. What do we get? The SharedPreference? Okay, I'm gonna copy this and based at Tweet diets, and we're going to do this for a sharp break. Longer. That's already okay. So we can say this is what a sharp break. If it's not present, then we're kind of done. Five. Trump right? For long break. Okay. Now we're going to create basically a void function to stop dimer. Dimer. So stop Tyler. K. Effective is only going to be on time. In seconds is gradient, then you're gonna start but diameter. Ok. Alright. Now we can now start work function. That's going to be async in nature. We can now wait for settings. So read settings called back and said the radius. Do one. Set. The time duration is going to be this.org seconds. So you don't fall time is going to be okay. That's going to be a star torque. And then we're going to have start breaker function, which is going to take Boolean or sharp break guard lava. So can I say this radius is one, is going to be ration. It's going to be short. So it is basically is short duration. Right? So short duration then return, chart break, Otherwise, break seconds we cannot set do see, you know, k and the static full-time underscore time X0. So that actually punished finishes our timer and timer model. Now on to the Settings screen itself. So begin to create settings screen, and then we're going to come back and populate our main app. Okay? Alright, so next time we're gonna get our widgets ready. So let's go to widgets file. And what we gonna do here is we're going to import and package import material. Do better material. Okay? I'm going to need to import shared preferences. So shader preference is shared preferences. Dark, dark. We can name port. Oh, let's see. What else do we need to impose certain. Alright, so we're gonna import our settings, so settings, settings don't dark or we have our widgets, right? So once we've done that, we're going to create. Plus for setting screen. So this is going to be stateless videos. So stateless reject, kinda call this settings screen. Okay? And the scaffold for the return is not going to be a container, it's going to be a scaffold for you. And this scaffold is going to have AB bar, AB bar when their title and the title is going to be a widget that bagel settings. Okay? And then begin to have who body. Body is going to have higher setting class. So let's go ahead and create that right here. Create stateful collegiate settings. Excuse me. So we're going to call setting here. And four are stateful widget. But we're gonna do is we're going to create our widget. Please sum, probably so first we need text edit control, but edit controller. So text anything controller. This is going to be text or so basically three text editing controller or warner cornflower, 1-4 break, sharp break, and another one for a longer break. Okay? And then we're going to have three static constants. Work time. It's going to be There's going to be shorter or longer break here. And we also going to have integer, so jar and enter longer. Long acre. We're also going to have SharedPreferences. Object to kind of access to our preferences. And then you're going to have in its state, and its state is going to basically initialize. So first we're going to initialize texts work editing controller. Okay? And similarly, you can initialize the other ones. So we're going to initialize shark. Longer as well. And we're gonna create a function called read settings. Reggie is gonna read settings. So let's go ahead and create headings function, which is going to be a sink. And we are simply Quick. Reference. Await. Shared references. Chair represents is dark and get instance. Teacher work time or turnkey. Check if work time is null. Then we're going to wait. Set int or worker time into dark parse 30. Okay? Alright. So just now you going to populate all the other. So then go ahead and copy paste all the others from the project that I've created a k. So you can have sharp break in same properties for fun. All right, then we're gonna set state here. And the set state was going to say next, work. X is equal to work time dot toString. Dexter, shark. Do short, break dot toString. And extra long. Text equal to longer. Break dot string x m. Ok? So now this function, we're going to basically call inside our initializer right here. So say read. Excellent. All right, and we're going to initialize super-state. Ok. So once we have done that, we also going to need in the function or update settings. So let's go ahead and create a function or update settings as well. And here we are simply going to have us switch on the key that we are passing. And let me write E And then you're going to have to, I'll show you the pattern that we're going to follow them. I'll actually rest of the peaks. So we're going to have in work, time is equal to references. So we're gonna take the preferences, we can get int from that or work time. And we're going to say time plus equal value. Work time is greater than equal to one. Or time is less than equal to 180. Ban said references. A set integer is going to be record, time. And valley, it's going to be has selected. Okay? And we're gonna call set state right here with x. Or x is equal to time dot do string like so. Okay? So we're gonna do this for all the cases, right? So we can break out of this case and we're going to have similar logic for rest of the other pieces. So let me copy and paste those two cases, maybe go. So this is our update setting or work time. Georgia rake. Longer, right? Alright. Alright. So now we are ready to write our body or the container. Okay? So what we're going to here is this container, cluster o, it's going to have text style font size four. Ok? And then inside the container, we gonna have child B dot count and can have some properties for this great view. So first of all, scroll direction is going to be XS and cross Xs count is going to be three. Child aspect ratio is going to be three. X's spacing is going to be ten. Main access spacing is going to be ten and then is going to have children. So children is once again going to be a text widget. Without work, can read the label depth workload style as style. Okay? And then we're going to have x, simple empty text widget. And up to that, that's going to be other empty text widget. And then our settings. But Okay, and the color is going to be, you can choose whichever color you want to use. We're going to copy this color right here. So f, f, 45, so it matches our, our big matches are colored pink. And x is going to be dash. Ok, where new is going to be negative one. Setting is clinically work time and call-back is going to be updated. Set a. Right? So, okay. So this is going to be our second button. And then you're going to have a text field. And this text field is going to have the style. So it just text style that we have created controller. It's going to be extra work. And extra alignment is going to be text aligned. Center. And he Borda type is going to be text input type dot number. So we really only want number. Okay, so there's our minus button, right? Similarly, we're going to have a plus button, so I'm going to copy and paste that. Guess that's pretty much going to be similar as settings, but only thing that's going to be different is the update Settings and go OK. So same, same thing you are going to repeat for your sharp and you're long. So let me go ahead and I'll be integrating those two because doesn't make sense to typing notes. Okay, there we go. So, okay. So this is basically our rigid. And we're going to add some padding here as well. And this meeting is going to be a constant edge. Edge inset all 20 lines. Okay? And that's where our word is going to end. And these are all the function that we need for our settings budget. Okay, now let's go back to our main. And in the mean, we are going to import a few things. So we're going to import our percent indicator circular from stenting together. Circular percent indicator dot dark. We are also going to work with Egypt's economy import, import Pilar model. And we also going to import settings dark. Okay. Next up, we're going to have our material appart and couple of extended now, we're just basically couple of budgets to layout the settings. That means green. All right, so let's go ahead and get this going. So we're going to have a material app detail. I'm just gonna have a title. So I'm gonna say, well more, girl. I wonder. Okay. And for debugger, show a check banner. False. Theme is going to be the data parameter, the swash. It's going to be colors, dark, gray. Ok. Well the home begin to have dimer page that we're going to create. So as create a stateness widget. So stateless reject we can know, call this diamond Earl Long Beach part-time or Homer. And we're going to call this timer home. Like so. Okay. All right, so for the dimer home page, what we're gonna do is gonna create a couple of final properties. So final double default routing. And that is going to be five points. Final count down timer. Timer is equal to count down, divert this, initialize that. And then we create some components and then some functions which are going to populate our budget. So best create an expanded widget. So we're going to call this build bimodal. Okay? This is going to take a double. Available with width. And this is going to return expanded Egypt. Okay? When the child element, it's going to have a stream builder. Alright? And this stream builder is going to have initial data dimer model for the stream. It's going to have diameter stream. Okay? Or the builder, it's going to get builder context. Context to context. And async snapshot. Async snapshot. You gotta call this snapshot. Okay? And here what we're gonna do is we're gonna create our dimer marble bust from a snapshot data, right? And we return a container. Now this container is going to have child circular percent indicator that takes her radius. So we're going to say available width divided by two is going to be the radius and line width is going to be 10%, is good to be computed timer dot percent, it is equal to null. Then we're going to say to one otherwise silo dot present. For the center. We're gonna say is gonna have a text. And we're going to once again check dimer. So dimer dot percent is null. And if it is, then show otherwise show downward dot-dot-dot. So we're going to have style, the context. Doc Dexter, the'm dot, headlined or o, since going to be done and style. And it also can have a progress color or our progress. So progress for our progress bar. That progress color, it's got to be off-color o x. So ever see your 0, 96, the data. Okay. Alright. Okay, so this is going to be our expanded, so we're going to be our circular, circular progress bar. And then let's go ahead and create some buttons. So let me copy and paste that goal because that's actually just creating some of the text widgets so that you walk you through your building work type button wrong. We're creating a role and children with batting in it, edges inside. So we are setting default reading and then we are using are registered. We create a productivity buttons. To basically create three buttons. Work. Sharp, break in long break. This is going to be better. But dark line that's gonna define basically the buttons. And similarly we're going to create a start and stop button. So we get that coordinate plays as well. So we're going to build start and stop button. And this is basically simply creating a row with children. The next band, and we're going to create an expanded widget. And then inside productivity button or a stock in start buttons to start and stop our timer. And we're going to create a couple of utility functions and which is going to create our. So you're going to have a pop-up menu button, which is going to show a pop-up menu for the settings so we can access settings. And this is going to call a function called the settings. So we're going to say go to Settings is going to basically be called and get the settings sort of navigated that Bush is going to push the Settings screen. Alright, now it's time for us to create our bit or build our UI, the build function that we need to build, rigid, rigid function that we need to pop in it. So let me do the same thing. Actually, have good soil, walk you through the code. Let me copy and paste. Ok. So what we're gonna do is we're going to first create our list of pop-up menu items, right? And then we're gonna get the menu items are setup and you can start the timer. Then we're going to return our material app and send us the data, the scaffold. And basically for actions, we're gonna build gone, build pop up menu. And we're going to supply the menu items that we have created here with the context for the body, we are going to have a layout builder, which is going to have first compute the available width. And then we're gonna create a screen columns and we're gonna call our work type button role, dimer role, the progress bar in the start and stop role. Okay, so this is basically going to create our screening. So let's go ahead and build, can see if we can get this running. Okay, so it's building. And Xcode belt is going. So let me stop in. As soon as the app is large, our video recording. Alright, so there we have it. Our timer is working, stop button is working. We start button, it's working. Short break, long break. Values are working. And then we go settings, we can increase. And said R0, long, short breaks. And there we go. So we have everything. All the, all the buttons are actually working properly. Now, this is the title that we should set is pomodoro timer. So let me replace that test so they should call, and we're going to say you should do a reload and they got pomodoro timer is ready. So yeah. So this was it where this video hopefully you enjoyed and learned to build an entire Pomodoro app. And thanks again for watching here. 3. 2021: Instagram Home Complex Layout: Alright, so let's go ahead and get started. So I have empty project created right here. As you can see, there is literally nothing. So we can start from scratch here. So we're going to do first thing is we're going to add our dependencies. So what else I have done is basically I have downloaded some assets. So I've gone to a website called Google fonts dot google.com and I downloaded some fonts. So I downloaded ebony D medium and have irregular and Bill are born PDF files in start out od. So all these points are basically available in the on-point dot google.com or I'll actually upload github project for this. I mean, I'll upload these forms in the assets and providing the GitHub link so you can actually download it from there. So that's one asset that I've now are. So simply created a asset folder and creeps up fonts folder and downloaded and basically stored those assets there. And also created an image folder and I downloaded instead. And so grams image, logo and I actually loaded it over there. Okay, so go back to bootstrap dot yaml. How are we going to do is we're gonna add some dependencies here. So what those dependencies are going to be dependency that you're basically going to need. So under your dependencies, right after you have flutter SDK, right? We need Cupertino icons. So you probably already have this. Actually deleted those. So I'm going to add it. Okay? Same thing, more than 0 dot. Do you route to 0 dot one, dot two. It's going to be fine. Okay? And then we're gonna also have Font, Awesome. Collector point. Okay, so anywhere if you're not, that would be great. Alright. So after adding those two dependencies, and we are going to go scroll down under users material design. We're going to create a basically an assets section so we can look at we can help our assets. So let's say our efforts are located at assets, right? For the images, the image in Star, Logo dot b in G. Alright, so that's where the image is looking at. And for font, we're gonna say, basically, fonts are so foreign to this and other assets level object, so speaking as a performance. So remember, these two levels should be same. And next, indent this with the app. And family. Is going to be Bella. Longer. Bonds will be located inside asset haunt flesh. So below Pong DBF, I spared the asset is gonna be located. So that's going to be first font family. I'm going to copy this and paste it right here because I need another one of these. Okay, so at the same level, so there's another font family is ebony. And font. This is going to have any regular or DF. Df, Okay? And what the style is going to be normal. And there's going to be another one of these assets. This is going to be t medium, the medium, and this one is italic. Okay? So these are gonna be the fonts. So I'm gonna go ahead and press command S, save the file. So all the dependencies can be just all. So if there's any issue, he's gonna see this here in the output. And you'll be able to basically figure it out. So if you notice, I have made a mistake here. Images and this basically complaining that image does not exist. So I'm gonna once again click save. And then you're going to notice everything went fine and their parent is gone. That means all of our issues are fixed. Okay. So once again, add Cupertino fonts at fluttered level. Font-awesome, Pluto had declutter level and then add assets for the assets font for basically fonts, okay? Like this. Alright. Once you have all this setup, let's go into main.out dark pile. So we have done our work inside the assets and does peptide demo. And let's go into main.out YAML. And basically here we are going to have our main app launch, right, home app, right? So before you, like, have a home and we're going to create a home dark file in a minute, but we need to add a few more properties. So what are we gonna do? It's inside the main. We're going to change it a little bit. So I'm gonna change this to return Run app. Knew my app. I know it's doesn't exist. It's going to exist in a minute. Okay? And we're gonna create state plus widget, okay? We're gonna call this, say Glaswegian, my app. Okay? And excuse me. What we're gonna do is we're gonna create a new material app. Okay? And this new Literary Lab is going to have a title. And title is going to be Instagram. All right. We're going to say debug, show checked mode, banner to false. So we don't show that banner. Following the theme. We're going to say new, new theme data. Alright? And we're going to have say, primary storage is going to be color dark blue. Start Blue. And primary color is going to be colors. Dark. Black. Button color is going to be colored black. Primary icon. Theme is going to be icon data. And we're going to create a color, or there's colors. Black. And primary. X team is going to be a theme. Bonnie text. One is going to be x style with color. Colors. Black. And font-family is going to be, you're going to say m. This is basically the font that we have created. Ok? Alright, so it's close. One more bracket and then how we are going to, so that's our text team and basically does our body text one. Okay, we're going to create a text theme as well. So go ahead and find that point right here. And we're gonna say text theme is going to be text to you. So he had textile now texting and all right. So Okay, so there's a primary text that hold on. That's primary text theme that yeah. Right. Yeah. Okay. So let's make sure primary texts team is closed here, okay? Next theme, theme. In this text team is going to be text theme predict. And once again, we're going to select body text, one, which is going to be text style. Color. Color is dark, black. Alright? Okay, now, basically our seemed data is done. So we're gonna create our home. And this is going to be Centre, for example. Good. We're just going to fix it in a minute when we create our Instagram home. But for now, we're simply going to say center. Okay, so now we're gonna create our home feed. And in order to create whole bean, we're gonna need a body. So let's go ahead and create Instagram body object. And then we can actually get their list and stories and I would think, okay, so first thing, less, less creative Instagram stories. Because Instagram Stories is gonna be, is gonna be they needed for the list. Okay? So we're gonna create a file in star stories, dark, dark. Okay? And we can then import material. So just type material and baggage that Purdue early is going to basically a beer. Then we're gonna create our stabilise objects. So a stateless object, out-of-state Paul, David, state less object. Okay, and we're gonna call this instead stories. Okay? And now this insert stories is gonna have a, have a final rule basically. So let's create a find out dark text. And this is going to be a row. And this row is going to basically your first main access alignment. So less defined me in excess alignment to be main exercise I'm in dark space between. So space between we're going to create my next as diamond, space between okay. And then we're going to clear this children. And children is going to be a widget. Type, so rigid type and I simply create a dx dt here in this text is going to be stories with style. And the style is going to be text style. Font weight is going to be font weight, bold, right? And that's where our text is going to end. And then we're gonna create our role. Okay? And this is going to have children. So scheme it over budget. So it's going to be pixel periods. We can have icon, icon and start play. Harrell. And we're going to have text, text rigid. And this text widget is gonna watch our table. Style is going to be text style. Font. Weight is good to be on Twitter.com. Alright, so let's say your text is, let's see here text is going to end. Okay? And we just are going to add your ROI is going to end here another widget that top-level rock, and then the entire role. All right, then you're gonna create our stories. Okay? So we're gonna create a static stories. So let's go ahead and create a dose. So final stories, stories expanded and we're gonna use expanded widget to call this, okay? And child, You're going to have a batting widget. Okay? Let's give it a batting. Adding a constant edges instead, we're going to say only DOP at eight, so agent's insect only. And we're gonna say is gonna be equally. Okay. So that's your padding. Then you're gonna have child element with this one. And we are going to have a list view. So let me push center here for a minute and let's go ahead and see that formatting. Okay, didn't go to foreign writing now is in place, so I'm going to remove Center and we're gonna say is gonna be a list of view. Okay? And we can use this builder. So ListView builder and I'm going to remove lesbian builder. Goods began to have some more properties here. So first of all, the scroll direction is going to be horizontal. So excess horizontal. Item count is going to be five. And your item builder is. Basically. So item Builder gives you context and index, right? So we're going to create a stack out of this stack widget, okay? And we're gonna give it an alignment. And alignment is going to be alignment. Bottom right. Okay? And it's going to have children or widgets. So we're gonna say container. And the container is going to have a width of 60 points. Height. 60 points. Declaration is going to be box declaration. Alright? And just go down a shape, box, shape, the circle. And the image is going to be a declaration image. Declaration image. And this declaration image first, let's give it a flip. So fit is going to be box bit dot fill. And then image itself is going to be a network image. And I'm gonna take this random network image or your prom URL. And I'm going to post that should be a string. Alright? Okay, so this is going to be a random image. So let me show you what today is. So basically, there's a search site called random word generator.com where you can get images. So if you go in there, you can find images. So I found this random image, so I actually just pick that one up. So that's what I have posted down here. Okay, based on the link for that here. Okay. Alright. So what's your network image? A year. So your network images, Dan and Bill box decoration. It's done. Okay. So decoration images done right? Next hour you need is right up there at the box decoration. You can need margin. So we're gonna say monitoring is going to be constant. Edges inset, and we're going to need symmetric area then search, so we're going to select edges and so dark symmetric for horizontal space, we're going to say a point symmetric on, in horizontal direction. Okay? All right, so that's where our container is gonna end. And next, what we're going to basically create. Index to first check if the index is 0, right? So index object we are getting in the, in the item builder right here. Alright? So the index is 0. I'm gonna say position widget, right? Pollution widget we're gonna use. And let's first and give it to you, right? And right, it's going to be 10 and tau is going to be, let me give a dissenter project for now. Okay? Alright. Reason is complaining because it doesn't have or conditions of Mina say, just eat container for the OR case this ternary operation. So it is 0, then it shall position widget. Otherwise she'll container, right? So we have both of these conditions. So let me take out this center now, and instead I'm going to use circle up there, sir, go out there. And for the background colour, we're going to see colors, the blue accent. Okay? Radius. We're gonna give ten points. In child. We're going to give an icon. And we're going to say icon. So we need icon stop AD, so we need to add icon. So let me say I start add. Okay. Now we also want to provide size for this icon. So I'm gonna say 14. Size and color is going to be Cholera stark white. Okay? Alright, so then our icon is going to end. Basically, we don't need this. So our CircleUp Dart and positioned Richard is going to end. You're going to have or condition or container. And basically our expanded now is going to end right here. Okay? So this is our, this is our stories. Stories, so forget, okay. So we created our stories widget. Now it's time to build, basically create our build. So this is going to be simple. Good. We're gonna have our margin for the container. So we're going to have constant and edges instead, we're going to set edges and said all 16 points. Okay, for the child, we can see. Now let's take a column widget and cross excess alignment is going to be cross axis. X alignment, dot stretched or stretch. Mean excess alignment is going to be mean excess alignment dot start. And main exercise is going to be mean excess size, dark men. For the children. We're going to say it's going to be children sort of gonna be tarp text, right? The produce that we created at the top. And stories Excel. Okay? So these two are going to be, it's, it's children. Put this context container for the column. Okay. Alright, so this basically created our insta stories, right? So our insert stories is now complete. Press or what are you gonna do with this story? Basically, ready? We're going to go to main screen. Maimed are dark and can include insert story inside R instead of container, right? Or center, whatever. Centers. So we can simply create, add instead of stories. And that's actually going to import our installer stories from the sample that from the file that we have created. Great. Once you have done that, we're going to go ahead and launch. I'm on debugger to see if our, if our bead is looking. Okay. Alright, so this point basically is going to be missing a few things. But I had to worry about that right now because this is going to be contained within another container. So we can actually have another container that's going to contain it. But for now, we are simply going to see if our content is showing up or not. So this is what we have. So we have like, you know, these stories with the plus icon and you have stories and white. And these are gonna be formatted in a way and so I don't worry about that. But yeah, I Keith our budgets are showing up correctly. Ok. So once we have got the the stories done, then we're gonna go into our list. Okay, so let's go ahead and I'm going to start this. And basically we're going to create a new file here, and we're going to call this file instead list. Ok. And so install underscore, list, dart, dart. All right, so we're going to import First of all, material, import Font, Awesome Font, Awesome, letter dot, dark. Okay. And we're also going to import our stories, dark, dark. Right? Now what we're going to create our stateful Egypt. So this time we're going to create stateful. And we're gonna name this instar list. Okay? Alright, so inside our state, who you can create a Boolean is pressed, is equal to false. So you're going to use this in a bit. And then we're gonna go into our build, okay? And we can create first, get the device size. So we're gonna say device size and we're going to use media query for that. So media query, we need media query ARF contexts. We can just say, give us the size. That's only going to get the size. Then we're going to return a list view. And we're going to use builder to build our list. Okay? Alright. Alright. Item count is going to be five low-skilled pipe right now. Item build, island builder is going to be, once again, give us context and index, right? And basically I say index is 0. Then do something. Otherwise, do something, ok. So first, do something less poor, a center budget. So we can get the errors go away. So it doesn't confuse us with any issues. Okay, so what are we gonna do here is we're gonna create a sized box. Ok? And the size of the box is going to have a child. And this is where we are going to contain our stories. Okay? And we're going to also give it a height. And we're gonna say device, device size dot height times of 0.15. Okay? Alright. So for all condition, right? So if the item is not the 0th index item or condition is basically, we're going to display a column. And column is going to have a mean excess alignment. We're going to say you mean excess alignment dot start here. In excess size. It's going to be min. So main access size? Yes. Men. And cross access alignment is going to be cross access alignment dot stretch. Okay. For the children would be you cannot create widgets. And these widgets that are basically first, we're going to add a banding rigidity. Great. So let's create a padding with constant. We're gonna see edges inset, and we're gonna save from left to right bottom. So from left, right, bottom, 1616. 816. Okay. So these are going to be our reading. So was given a double value. Okay? Alright, then we're going to have a child. A child is going to be basically raw widget. And this row budget is going to contain our children. You, okay? This is going to be more widgets. And this, these widgets are going to be basically a container. Now this container is going to have a height of 40 pixels. 40 points, sorry, pixels with 40 points. Okay? And decoration is going to be a box decoration with shape, box shape, so-called. Okay. And then we're gonna have a fit. Sorry. So you have barks, shape, the shape. Okay. Then we're going to have an image, right? And this is going to be a decoration image. Fit is going to be box fit, dark-field box dot film. And we can use an image. Once again, I'm going to use one of the random images that I've got from the random image generator. So I would actually, I recommend you using your image or getting it from the random image. So I'm going to use this image right here, okay? And we can now basically close our image. And we're going to close our ImageNet network image and decoration image with this random image. Okay? So our next box recreation is going to end. Our container is going to end. Okay? Then we're gonna create a new size marks. So you gonna say a size box. Alright? And inside this sized box, we're going to create our rate of 10. And then we're gonna create text. And can have text here. Right tip Jackie, style is gonna be x2 style. Weight is going to be font, weight, bold, pipe. So our texture is going to end here, are rigid. It's going to end and the rho is going to end. Okay? And right under need this rule, you can a create icon button. So let's see. Rho is ending under the sized box. I have a box and okay, so we are saying this widget right here, okay? And then we have the scroll. All right. Let me see. Did we get everything right? So we have box separation, that's actually for our image. Then our container basically. Then we get a size box, size box or may have with property. And then we have our text, which has, which has text and basically style mold. Alright. So or textile is going to end and said there, x is going to end our budget. It's going to end here. Row it's going to end here. Let me see. I'm going to just create icon button. Tell us like you meant that issue. Okay. Icon. Icons. I got icons. More. Vertical. On grass. You can just say no. Sorry, icon button, it's going to end. Right? So we are actually, we are missing some element. All right, so I guess there is some issue with the padding right here. So batting batting constant, then we have a child. And underneath that, basically that child first thing that we are that I missed was main excess alignment. So I'm gonna say main access alignment here is going to be a space between, okay. Then we can have, we can have children. And now this object is going to be a rigid, and it's basically going. A role. So what I'm gonna do is I'm gonna take this guy, this ending credit here to basically cut this cut this container. All right. And this is Mr. actually. So we need a for the children. Right. We are going to have a row and row and have its own children. Because we are actually presenting multiple widgets in here. And here. We are going to basically have these text, okay? So basically inside this row widget began to have a container. All right, and I'm gonna move this icon for now. Okay, so we can fix the formatting. So r, rho, rho is going to have basically a container which is going to contain the image, all right? And then it's going to be a sized box, a text, okay? And right underneath this text we're gonna end this rigid, gonna end the row. And here we are going to have an icon. So Icon button, okay? And icon button is going to have icon, icon. I can start dot more vertical. So more underscore. Okay? And then it's going to have on press. We're gonna leave it as nil. Okay? And he had the death icon button. Our widget is going to end, our row is going to end. Our banning widget is going to end. And right after our padding widget is going to end, we are. So this is actually the description about the post grade. Then we're gonna create the post itself. Okay, so we're going to create up flex, flexible budget. Okay? And flexible widget is going too fast. It fit is going to be flex fit, dot loose. And then it's going to have a child, which is going to be an image.net. And I'm going to use another 100 random image right here. And I say this random image, okay? And I'm going to give it a fit box. It. Dot cover. Okay? All right, so our image certain Africa is going to end. Her flexible box is going to end. Then we can give this another padding widget. Okay? And this padding widget is gonna have Festival adding constraint edges, set 16. Alright, then child. And this is going to be a row. And this row is going to have main access. So, so first of all, mean excess climate space, main access, space between LA. And then we're going to use create our children rigid widget. Okay? And now these widgets, basically there's going to be an icon button. We're going to have an icon button and it's going to be icon for. So let's say we can see if the icon is pressed and icon, then we're gonna say icons, favorite. Okay? Otherwise, Font, Awesome. Icons, dot r i because art, they go. Okay. So that is going to be our icon object. Okay? So basically I can is created. And what we're gonna do is we also going to set the color so you can see color is going to be, if it's pressed, right, then we're going to see colors dark red. Okay? Otherwise, colors not Black. Okay? So that's going to be your colour object. And when the press happens, right at that time, we're going to say on press, we can give it a function. This function is going to execute our steady state, okay? And we're gonna set is pressed the opposite value of expressed. So if it is pressed is true, then we're going to set it to false. Okay? Alright. Alright. So our icon button is going to, and so this is where our on-premise and this is where I can put an ends, right? And right up to the icon written, we're gonna create another size box. So sized box with, with of 16 points. Okay? Below sized box, we're going to create. An icon. And this is going to be Font Awesome icons.com. Okay? Alright. And then underneath that, we're going to create another sized box, which is going to have once again with 16 points. Okay? Then we're going to have another icon. And once again Font, Awesome icons. Dop, beeper, claim that one. Okay. And okay, so I consulted in the end, our widget array is going to end. Then our rural is going to enter, okay, and bedding k1. So right below this icon where our borough examining, so this is our paper plane, okay? This is our pivot plane then are rigid than our row. Then here we're going to create another icon for Font, Awesome icon, start bookmark. Okay? And this should go. Okay, thanks this indentation to you have your paper plane, then your widgets and your rho and c are okay. All right, sort of misi. Alright, so, alright, so this view is super complex. So what happens if you lose a track where you are actually writing? So here we have our batting reassigned, the bearing, we serve our children will roll, then main access, then children. Ok. Now this children widget is basically, we are setting an icon and all these things, but these needs to be wrapped inside another child. Let's take a look at from the, from the start. So you have padding, padding defined 16, then you have a row, which is gonna create the rule. And we can then create space between and write this widget, right? Wherever this rigid is ending, I'm going to basically have a, So this up after the space between widget, right, there is going to be another row. And this row is going to have main access alignment. In Exodus, alignment dot space between. Okay? And then it's going to have children in distance. Basically. Egypt's rigid. Alright? Inside this widget, we're going to have your icons. So I'm going to remove this and begin to get the formatting right. Ok. So your first row is going to have another churn because it's gonna have a basically all these element, like your icon, your site's box, with your comment font here or paper plain font, okay, that row, this widget is going to end here. Roy is going to end here. And right after the row ends, gonna create another icon. And this is going to be another Font, Awesome icon, start bookmark. Okay? And then our rigid is going to end, alright? Then our row is going to end, our padding is going to end. Okay? So that is our first line. Alright, so then after that, we're going to create another batting. Okay? In this padding is going to have constant js instead. And to begin to create the symmetric reading, geometric batting is going to be symmetric around horizontal or 16 points, is going to have child. And we can put some x so by e. Okay? So this is basically our text. And this text is going to have style, which is going to be text style. Okay? This textile is gonna have font weight. And this font-weight is going to be bold. Okay? Alright, so that is our font-weight. So takes to embedding are going to end. And then we can have another bedding. Okay? So we're going to have another padding object. Object. This downwards again, constant edges insert left to left, right, top, bottom. So can I have 16 points? 16 points, eight points, 16 points. And you can play with these values and changes as you need them. Basically. So I should start creating center widget to format because that's where the confusion happens. When x, when we just did your code tries to former stuff. Okay, so we're going to create a role in this row. You're going to have. Main access alignment, alignment dot to start. Right. Then it's going to have children, widget and container. Can I create inside the amplitude? And the containers can have height for about 40 points, which are about 20 points. Decoration is going to be declaration. Shape, is going to be boxy shape. Dark, circle. Image is going to be declaration image. In this declaration image is going to have, it's going to have of box dot bill. And we're going to use network image. The random image, okay? So a random image, okay. Alright. So a network imagine decoration, decoration image is going to end there. Here we can add a box decoration and container. We're gonna talk about how these ending points. So, you know, for the, for the complex widgets are complex layouts like these. You have, you know, like Norway earlier, stuff is ending. Otherwise he would end up like I did where I made a mistake in our saw the fields. Okay, so we're gonna create an expanded, we did read text field declaration. We're gonna give it input declaration. And the simple declaration is going to have a border. So we're gonna say input border dot. And we can have hint text in text, right? And we can then simply have the hint staving and a comment. Okay? And they are formatting to place as soon as he saved. Okay, so let me make sure. Okay, so input declaration is ending right here. But x field lending expanded standing, reach it does end. Baroque batting. Okay? And we're going to have in other branding right here. Okay? Now the breading widget. And there's a basic event, the post. What's posted is that one. So we're gonna say symmetric, horizontal 16 points. And child is going to have a text. And this text is kinda nice to do days ago. Thing Instagram has capital D and capitalize. Today's go, OK. And style is going to be text. Style. Colors as color start gray. Okay? Alright, so your text, so it's going to end here padding, it's going to end here, widget here, column NR, ListView builds her. Okay. So let's make sure there is no issue. Alright, so there's no issue. Now what we're gonna do is what I'm gonna do here. I'm going to, instead of calling Instagram stories, I'm going to say in star less. Okay, and we'll hope is to stories from here. And let's go ahead and try to run this. Okay, so let's see how the layout that we have just finished, how that is looking. By the way, this was the I guess one of the longest ones. Next one, home that we are going to, the body is going to be simple. Asked her how because somebody is where Instagram body is gonna go. So we're gonna have like in a body which is going to be really small. But 15 line of code. And then he hell like, you know, home screen, which is going to have the logo and scaffold and everything. That is going to be a little bit big like about stony lines. And then we are going to be, you're going to be done. So I see. Alright, so we are getting some issues. So let me go ahead and let's do this. What what is basically loading is a whole bunch of like, you know, layered issue. So it's got an end result is by first creating are body. So I'm gonna basically what I'm gonna do is create a new file unless the condition up. So instead, it's done under score body. Okay, not dark. Okay? And here we're going to list them all tests or minimize this. And we're going to import material, okay? And we're gonna import star list. Okay? These two either import and we're gonna create a stateless budget. So stateless predictably going to call this insta, body. And then we go to see like, how are we going if Bea can get all the issues resolved. Ok. And heavy, go big and actually debug this once we have like, you know, all these ways your study place me in excess, alignment is going to be started. Okay? And for the children, widget, flexible, insta object takes over. So yeah, so that's about a best here. That is your, okay, so let's see. Your column has main access, has widgets. Okay? And this visit is only going to have less flexible widget, which is this guy right here. And want to foreigners properly, okay. Alright, perfect. So your Instagram listed, it's gonna show up and then you're rigid and everything is going to close. Okay, let's create a new file, unless in star dot Dart as well. And for the insert home, basically, what we're gonna do is first we're gonna import our material and import our Barney. Okay, so you can see how we are actually building from bottom, like the lowest level of widget that we created first and then we are creating recipes so you can create a stateless widget inside our home, okay, call this tends to home. And let's create some properties here. First we're going to create final top bar. This is going to be an app bar. Okay, let's give it a background color. You can create a color. And we're going to create a color out of hex value. So fff three, F eight, F a is going to be the colorful background. Center title is true, signal Michelle center title, elevation is going to be one. And leading. We're gonna create an icon. And this is going to be the camera. So icons, that camera, ultimate camera. Okay. And then we're going to have title. Title is going to be a sized box. Two, it's going to have a height of 35 points. Child element. And we're gonna use our image dark asset and basically use our logo here. So lower that we added. So images slash instar, underscore, logo dot, right. Okay, so our size box is going to end and then we're gonna create actions. It's going to have a batting padding widget, okay? And we're going to create a constant edges only to the right, let's say 12 points. And the child, you're going to create an icon. I can start saying, Okay, our padding is gonna end, which it is going to end up bar, it's going to end right there. Okay? So there's our tau bar. Now let's go ahead and give this a new scaffold. So scaffold, we're gonna give AB bar. We're gonna say take top bar object that we created at the top for the body. For body, you're gonna say take instead body. For instance, to create an object for that. Ok. And for bottom navigation bar, we are going to create a container, but then we're gonna just create hidden navigation bar. So we're going to have color as colors, dark. Colors start to white. Okay? And then we're going to have height up about 50 points. You're almost done with this. Alignment is going to be alignment dot center. I went off center. And for child, we can have a row. Martin app first year. So bottom bar, which is going to have child row. Okay? And this is just going to have main excess alignment. So let's give it an alignment, alignment dot space around. And then it's going to have children object, which is gonna be a collection of hope Egypt. Alright, and here we're gonna create a view icon, so Icon button. Okay? And we're going to clear it. Icann dot home the icon. Icons. I can start home. Ok, press. Here are simply going to say there's nothing. Okay. So that's your best I can. And so let's see. You have Icon button. I can start home and pressed status, nothing. And then going to happen in other icon button. And you can have like, you know, a few ideas for the bottom. So what I'm gonna do is I'm going to paste few icon buttons right here. Okay? So basically these are like, you know, for search, we base the OS1 as well. Okay? New is no longer needed. So we know that these are going to be basically or this is going to be our navigation bar, the bottom navigation bar, okay. Then r, I can put it is going to end widget, it's going to end row bottom, app our container, and then scaffold. Ok. All right, so no errors. All right, so let's go to Maine, our Dart now, and we are going to load in Stockholm. Okay. And let's go ahead and stop. And let me start debugging again. So I'm going to pause the video and once the app is loaded, we're gonna come back. Okay, so it took about 30 seconds to build and load. And then we go, this is basically our full layout. Like I said, you needed test. All the components needs to be in place before we see it. And now you have your I'm your Instagram feed. Ready. Okay, pay the all the tabs and stuff. So this is, this, as you can see, basically this was a pretty complex layout, it on its own, right? And we made a few mistakes on the way, but we eventually learned how we can create smallest components individually and then combine them to build the entire experience entirely out. Okay, so yeah, so this was it for this video. Thanks again for watching. 4. Flutter2020 Staggered Grid View: Hello and welcome back. And in this video we are going to be looking at a staggered grid. So basically, we are going to be creating this grid layout that is staggered in layouts. So if you notice, the 0 style is bigger and First Style is little personal, second tile is big or small. And we're alternating like that. And basically, you must have seen this layout in photos, app or various different apps. For example, Pinterest for sort of follows the similar structure. But they have a picture and a title in there in their app. But you can have like, you know, this layout basically for anything that you can think of for mainly I would think of like, you know, to have this layout for photos because photos look rather like, you know, appealing. Basically when you have this kind of payout. Reason is you can actually focus on some of the key moments in the photographs with bigger tiles and have like smaller tiles are present like their subsequent events. So there's a lot of engineering that he can actually device into this. But yeah, we are going to be building this layout. And the way we are going to do that is going to be really simple. We are first of all going to use a third party library. And we're going to use the library that's called flutter underscore, staggered grid view. And we are using worthy and 0 dot three dot two. Okay? And once you have included this library in your both bank dot yaml file, if you're using Visual Studio, you just need to press Command S to save your file, to install doors, dependencies. Smes, your dependencies are installed. Go to your main dark, dark file, and we are going to first import the package. So let's go ahead and import the package. Right? The package itself is called flutter, staggered grid. Okay? See, and onComplete should actually. Okay. So let's go ahead and check it out. If there is that cup staggered grid. You and we are looking for that dark violet. Ok. So we are looking for Package on Package, colon, flutter underscore staggered grid view. And slash flooded the staggered grid view, dark, dark. So that is the Dart file that we're looking for. Next, we are going to create a stateless, which it, so stateless widget. We can name this widget. Staggered grid example. Okay? And inside the container, basically, or not inside the container, but for the return value, you're going to return a scaffold. Okay? The scaffold is going to have a bar. And this app bar, this AB bar will have title. Title is going to be a text widget, which is going to recall staggered grid example. For the body. We are going to add a batting widget. Right? Batting widget need spanning a servo. So you're gonna say coast. So constraint, edge, inset, all Valley, we're gonna keep as four. Okay? And then for the child, we are going to say that we're going to create a staggered grid view. So staggered grid view is the view that actually comes or the widget that comes with this, with this library. Okay? And we're gonna simply say count builder. And in the count builder, you have two items. You have crass access count. We're gonna give it a value for. Okay? And it also takes item count. So let's go ahead and see all of these values. So what I'm gonna do is going to say, okay, this, alright. So we are going to need in an item count as well. So as Jake item count, an item count is going to be eight, the number of items. So if you look at our grid, we have 0 to seven, so eight items we have. And then for the fourth item, builder, begin to provide a builder context. Okay? So we are going to simply say builder context. Context and index. Color will be close start and green. While the child, we're going to create a center. And you're going to create the number. So we are going to have a child for the center of a circle of Adar. And the background color is going to be color dot colors dot white. Okay? And for the child of that, we are going to create a text with simple index passed in it. Okay? Like that. Okay? And then for the staggered tile builder, it actually gives us the access to the index i. Alright, so we're gonna take that index, we're gonna create a staggered grid view out of that with the count. And we're going to supply to, for the item in index. Dot is even too, otherwise one. Okay? So this is going to be the tile size. Actually, this is a giant boulder. Sorry about that. So we didn't need staggered tile dot count. So cross access to settle count is going to be two. That means it will not show to cells. And USA is even. So index dot is even. Then give to otherwise one. Okay? Alright. Next up. For them, main excess basing. We're gonna give data 4 spacing and for cross access spacing. And I'll give 4 as well. Okay, with that, our example is ready. I think we made a mistake when he practice, so let's go ahead and make sure we have all the brackets correctly. Pleased, okay, that looks good. And I'm going to start executing to see if it actually. So in order to show you the difference, what we do is we are going to change the color to blue, okay? Just so you know, like you know, that you have created a different example than the sample one that we are looking at. Okay, so let's wait for the build to finish and then it's going to be ready for us to check out. Ok, so it feels like the view is ready this launching now. Okay, so let's go ahead and wait a little bit, little bit more. So we're gonna take a look at another example after this one to basically see how we can use the standard view to basically provide individual tiles, okay? And we're gonna see how we can actually provide tiles. And you can basically distribute those styles for each row. And we're going to like, you know, have some text visits are displayed on those roles. Okay, so just to give another radiation, we're going to create another example. Okay? Alright. That must be the reason why it's not loading because I made a mistake here of not calling the right class. So I can go ahead and stop that. That's my bed. Okay. And I'm going to try to run and debug one more time. Okay? So hopefully it's going to launch very soon. Let me go ahead and pause the video till that time and I'll come back to this launched. Alright, so it has actually launched, and this is what we have. So we have successfully created are staggered grid view, as you can see, it is a grid that can be scrolled and it has distributed items based on a staggered pattern. Okay? Alright, so that was one example. It's going to take a look at another Campbell for the same thing. So what we're gonna do is I'm going to leave everything as is. But I'm going to clear out the padding from banning actually, and only leave the scaffold. Okay, awesome. Okay, so we're going to actually create another example of the stereo view. So let's create another body and we can create staggered grid. Staggered grid view. Okay, and in this job could view, you're gonna give pick the count property. We are going to provide our own parameters. So first parameter we're going to provide is going to be his primary, gonna make it false. And cross access count is going to be for mean. Mean, excess spacing is going to be 4 as well. Cross access spacing is going to be four. So you can sort of like enough, create all those early on. And then you can have children directly inside. And this is a widget basically. So you can say const, rigid and const type widget and an array of that. And basically this array can have some, for example, some text in it. So constant text. This one I'm going to say. And I'm going to copy this line and pasted. Have like eight entries. S. Good enough. Okay? So those are all the children that we are to have. Then you can define this dagger tiles. Now staggered pile skin BAA, constant as well. I'll type staggered tile. And then you can have constant or staggered tile dot count, and you can have count for cross axis in main axes. So I'm going to basically copy this and change the second one. We're going to have 221. Third 1 is going to have two to ten to one. And you're going to repeat that. Ok, so just make sure this count is actually same as the other one. So 12345678. Perfect. Okay. So yeah, so those are are the are staggered pile. So let's go ahead and reload the app. And there we go. I, as you can see, we have this staggered view. And if you notice, our first cell is right here. Second sale is right here. Third cell is right here in the center for cell. And fifth, sixth, seventh, 8. Okay? So that's how your cells are distributed. Now, as the previous example, we could have used in other view, but like you know, this actually gives you an idea how you can have your how you can have basically child element staggered along with the staggered grid defined inside with the child, children and staggered tiles to pattern. Okay. All right. So yeah, so that's about it for this video, I just wanted to show you how you can create a staggered grid for yourself and basically tried to implement it in your photos are related apps to practice a little bit more. And I would recommend reading up and opened up documentation. And basically you just see how the standard grade staggered grid actually works and what are the things that it provides. Ok. So this is it for this video. Once again, thanks again for watching and thank you. I will see you guys in the next video. Thank you. 5. Flutter2020 Animated Pie Chart: Hello and welcome back. And in this video, we are going to be creating this pie chart. So we going to see how to create a pie chart in a flutter. And we're going to use one of the external API that makes it really simple to create this pie chart. So we're going to be creating this view where we gotta have a pie chart. And upon clicking on this refresh, it's going to update with a random number and basically random distribution to show the pie charts and distribution. Ok, so this is what we are going to be working today. So let's go ahead and get started. All right. So first thing I need to do is basically we are going to have to include a dependency called flutter circular chart. And we're going to be supporting version grid than your dot one dot 0, okay? So under dependencies include this platter underscore, circular underscores chart. And if you're using Visual Studio code, then you can simply press Command S or save your document in. It's automatically going to install the dependencies for you. Okay, next, we're gonna go into our main material app. Basically may not art file. And what we're gonna do is here, you can have like my personal thing. So instead we're going to create a material lab and home, we can agree it. So for home, we are going to actually be including a Pie Chart example. So let's go ahead and create a state for widget. So we're going to type FDI and begin to use this first-world stateful widget and foreign autocomplete. We're going to name this animated Pie Chart example, okay? And escape to accept the changes. All right, and this is what we are going to be calling in our Material apps. So we're going to simply say animated eye chart example like that. Okay, now, next up, what we can do is we will first import the package that we have just included. So So package. Alright. So if you look for packages, if everything went fine and he didn't see any error in the debug console. Are you going to seeing flutter circular chart under your auto-complete and Holly you need to do is simply take package, colon, Vernor, circular, flavor underscore, circular underscores chart slash flutter, underscore circular and discourse chart dot, dot, ok. So that's the import, OK. Next, we will create a list of sample data. So we're going to use quarterly profit simple data for this. So we can say final list of lift. Circular stack entry, okay? And we're going to call this, okay? So we're going to call this quarterly profit pi data. Okay? And here we are going to be creating a circular stack entry. Strike stack entry. And this is going to be an array. And we can simply say new, Are, we don't need new. Actually. Just cycled stack entry. And we are going to say circular stack entry type. And here we're going to just give some random data. Alright, harangue keys basically ought you on what this number represents. So we're gonna say Q1. Okay, put this example. I'm going to copy and paste it couple of times. And we say thousand here, 2 thousand here. And here, one more time. In jail. Green, blue, orange, or yellow? Yellow. Ok, Q2, Q3, Q4. Okay? All right. Now we can give rank Key, do. So this is basically our array, okay? This is a sense a and what this circular stack and to kinda give a rank AQI. And we're going to call this one the quarterly profit. Okay? Alright, so make sure everything is perfect. We have every single every single parentheses closing. So, okay. Right. So we're going to include a, another entry here. And this entry is going to be pretty similar. So we could copy. Okay. So just make sure I have this entry closing here and a circular entry closing here. Alright? And right after, right after that, we're going to create another entry. And I'm going to copy this. Okay. So we're going to have another one. And let's give 151750, maybe 2003 with their dogs and leave it there. And I'm going to leave everything else that seem okay. And then let's create another one. And this gives us eighteen hundred, twenty, nine hundred, four thousand and seven parts per this just random data to randomize are basically values. Now what we're gonna do is we're gonna go into our, into our container. So basically animated by charting examples. State, okay, I load the state. Who we are. First thing we're gonna do is we're gonna create, we're gonna create a global key. So final global key. And this global key is going to be of type. Anyway, did pie chart any mutual circular charter sticked to animated circular chart state like that. And we're going to call this chart key. Alright. So once again, global key. Anyway did shark circular charts state? Alright, and initialized angle. Perfect. Okay. Now we need a couple more things. We need a size, so final chart size. And we're going to create a constant for that. And are we going to simply say size of 300 by 300? So that's going to be the sides of our pie chart. And then sample index. So this is just to show sample data. So we're gonna indexes that zeros temporal data is going to be extracted out from this data. So this data is something that he can generate it on your own from the API or you can fetch it from the remote server. Okay? So what we're gonna do next is we're going to basically create a function. And the cycle through the samples. So we can simply create a cycle samples. Okay? Set state sample index plus plus to increase, to assemble index down, we're going to get the list for circular stack array. So sort of color stack injury, circular stack entry. We're going to get that. And we are going to basically use our quarterly profit pie chart data. And we can simply use sampling next, marred by three, because marred by three means like, you know, it's index is never going to go out of bound. So it's gonna basically cycled through. So when the value for sample count is going to be, for example, one, in that case, one mod three is going to give one because one needs a remainder. One divide by three remainder is one. That's the best marred operation. So it's gonna get 11 from there. So if, if the sample index gets du, then is going to be two by 32, remainder is two. And then three by three is like, you know, remainder 0. So everything is going to cycle through 1-2-3 by giving its gonna keep on going. If the sample index goes like know, beyond three, then the same cycle is going to repeat so far for index one is going to be generated because the remainder is 14, five's going to be 26, is going to be fewer and sort of like the hat. So 012, that is going to cycle through that. So that's the, that's a MOD operation that we just discussed about. Okay, so it's going to get the sample. And then we're gonna simply say chart key. So we're going to populate the chart key, began to say current state. So we can set that, so current state. And we can update data and use data for that. Okay, so data that are collected here. So this is basically going to cycle the samples. Now, this makes it easy for us to build our container. Because all we need to do is we simply need to create a scaffold, a bar, okay? App bar, gonna give a title. So dipole is going to be a constant text quarterly profit for the body. We are going to have a center widget. And inside that center widget, what the child, we're going to create any medium to circular chart. This is the main meat of the radio show, are key for the key size is going to be Chart size. Then we're going to have initial chart the data. So initial chart data is, we can say quarterly proper data get to 0th index from there. Okay? So the very first value chart type, we can actually say char, circular chart types are killer. Chart type dot pi is what we are interested in, okay? And what we're gonna do is basically we can have a floating action button, which is going to have, she's gonna basically cycle through our data. So basically it's going to update that. It's going to call this function that we created cycles samples. Just do basically show different examples and animations of that circular, the pie chart that we're short. So we can simply say icon. Alright, con, start, refresh it on press. We are simply going to call cycle samples like that. Okay, so let's go ahead and stop this. I'm gonna go and run and debug. Okay? So we're going to see errors. Okay? So I guess we made a mistake here. So let me see if I can actually get this. Get this. Okay. So for the quarterly, we are going to be based data and ever gonna review this getting so okay. All right, so we're going to have quarterly biter data and it's going to be basically an array of circular stack entry. And we're going to create a new circular stack entry that's going to have a, an array of values, right? And then a rank Key day. Same thing. Okay? So I'm gonna tell you, made a mistake of bracket. Okay, database. Let's go ahead and run this here. We can see if we can get this. Get this going. So it is launching. So let's wait for it to launch. So the build process, build processes kicking in. So it's actually building on Xcode right now. All right, I keep going. And there we go. We have it loaded now. Where and there we go. So if you notice, let me pull it up. So this function right here is not getting calls. So if you notice, our button is not working. So let's go ahead and find out why. Ok. So our button is okay. All right, so on press, it should call void, end set state. Okay. Alright, this is the mistake I made. Set state is a closure like that. And it should basically be called like this, not like this. Okay, so let's go ahead and refresh and try it again. There we go. Alright. So as you can see, that data is loading and it's cycling through our sample data. Once again, the main things about this is basically this data that you can fetch from the API. And you can actually populate your data for the certain re-entry using that. And I'll then that basically you all you need to do is you need to call this any media just circular chart and provide a chart key size in initial chart. Well you, and if you want to refresh, all you need to do is refresh the chart keys, update data, and that'll take care of basically animating the changes into the pie chart. Alright, so that was it for this video. Hopefully, you enjoyed this new API on creating charts. So, yeah, so thanks again for watching and I'll see you guys in the next video. 6. New: Tic Tac Toe Game: blown up, Mac, and and that's really gonna be creating a tick tack toe app. Okay, so, tic tac toe game, that's what we're gonna create. So let's go ahead and get started. A basic template ready? It's got the brain function that has a scaffold and this change this name so amusing. Take tack Dio and, uh, basically gonna leave all the other things at this on. We have, like, this home base created, so I'm gonna import dark, dark mats. It's all because you're gonna need that. Same for math. Okay, so let's go ahead and get started. So we have our home page and in the home state, let's start creating some tables and, uh, you need a list off. Oh, something called game button. So let's go ahead and create that game button first, because that's gonna be a class difficulty use. So they created down here game class, game button. Okay. And, uh, she's gonna have an i. D. A strain the background color and enabled or not. Okay. And then we're gonna have its any slighter. - All right, so this is gonna be he any sizer go on our game button. Okay. So, Lesko and go to our home peace now and create a list off buttons first. So go right here and, uh, create list off game button, All right? And this is gonna be called, but the list, and then you're gonna create our players. So we're gonna have player one and, uh, bear to, and we're gonna keep a a bow. How that's gonna track Houthi active player. So active later. Okay, they're gonna have are in its state, and they're sinister. It is gonna have but in list. And basically, we're gonna create a function that's gonna initialize all the game buttons for us. So in it, game attendance. All right. And, uh, get a function here. Just game button in it. Game button. Like so. And, uh, then we're gonna first Guitar player one. It's gonna be an empty list player two and have the list of all and active player. It's gonna be one when initialized. Then let's create our game buttons game button, and we'll need new. Actually, we just say game button and, uh, I d and we're gonna initialize some buttons, someone a copy and paste, and we're gonna create nine of them. The lists count. So we have to tree or I takes seven, eight and sign. Okay. Awesome. And that is basically going to be returned. We could return are game buttons. So All right. Okay. So, uh, that is gonna be our And he felt any section in the initialization state. Oh, and then we're gonna create a function to play our game. Okay. So as create a function oId play a game, and this is going to take a game button now, this game, But this comes dysfunction is gonna set the state. Okay? And you're gonna say if active player is what then? At the king button sent the text to X and came buttons. Background turned that into green. So turn that into green color and said active player to to, uh Then you're gonna take the player one ad, that button stating that that place has been claimed by player one. Okay, that space. So and detector, you have, like, you know, tiles and you tap on them. And that space is claimed by you and other opponent. Your opponent actually claimed the other place and you create a series off combinations alliance to basically in the game So it's pretty standard game. We already heard that eso TV not text his equal to No, otherwise, it's gonna with the other player. It's gonna say tv dot text physical 20 x and O and back on it is going to be color that well, maybe red co stock Red. Okay. And, um, active player, it's gonna be one. So yeah, put active color back to play one. Once this player has played and, uh, player to Dr Add G B don, I d. Okay, so that's gonna add Is it clean? Um, the spaces that are being claimed by those players and you say enabled identical to false. Because we don't wanna We don't want to leave that space for another play off that button for another player. That tile or another play. Okay, next, we're going to create an integer for winner, and you're gonna create function to check winner. Okay. And, uh, we're gonna come back to this one. The first lesson is just dysfunction. So we can ask. Simply say if winner IHS equal to negative one. Right? And if button list So came still going on and say importantly, stock, every case of Chicago are every element. And we say element, Doc text is not equal to empty. Okay, then you guys show dialogue. Sure. Dialogue okay. And showed up. Takes a context. We're gonna give it a Conker context, and then we're gonna give it a builder. And this Wilder is going to be custom that low. Okay? And create that and it's gonna take And an argument for the string. And then that Another argument. The press recent button who start game I can. And 3rd 1 is he said game. Okay. All right. So let's go ahead and create Oh, create these functions. Go ahead and finish this. So if is this, then it's gonna be else active player. It's gonna become if it's too thin auto play. It is not a function here. I'm gonna create and the wife know. OK, so now let's go ahead in and create our our crushes. Okay? So frustrating, Creator. Audibly. Okay, So out of play is basically simple auto play, and, uh, he's gonna say, Plus, she's gonna create an empty cell list. Hey, and then fate list is equal to list up. Generate. And we're gonna generate a list off length nine in X plus one, and we're gonna go over each cell. So are so I d in a list and going to say if not, player one dot contains player on that contains that Sell 80 okay? And not there to dock contains that cell I e. Right. If you don't continue added to empty cell, that's so I d all right. And, uh, outside the formal, we're gonna create a random vehicle so random and we can simply say random in next first r dot next end, but from empty cells Stop. Lent my this one. And, uh, we're gonna get the stele i d from MTC shanty shed empty cells at random index. This is for other player, by the way. Okay, um and then I fear the fell leg you can actually you created into your eye for button list index. Where to begin? A search for the elements. So you say element, Doc, I d It's equal element dot i d is equal to sell. I d. Okay. And we're gonna play game on that cell. So But list So all we're doing basically here is finding an empty cell. Hey, random, empty cell and We're playing our game on that. Next comes our check winner function so and check winner that we can I have your fun? Uh, a felts conditions no player. Unthought contains. So if player one contains 12 and three rose, right, Stan, we never is one, all right? And what I'm gonna do is I'm gonna copy this because we're gonna be repeating these conditions. So So next up is if Player two contains one or and two and three. So all these consecutive, um, sales, right? I player two contains three. Then Player two is the winner. Okay. Eso that's your first role. Now let's compute the second row and second role. Claire One contains four by and six. Right. So, player one if the big winner, if they're too. All right. So copy this. And, uh, we're gonna simply arat f player two contains for five and six. Then player two is doing better. Okay, now, our third row. So been a copy. These two guys right here or third row? It's gonna be basically seven through 7 10 years tonight, eight and nine. Okay. Similarly, here, seventh, he's and right so and hope you guys are Oh, you guys are falling along because we have a Easter egg in here. And that's actually a challenge for you guys how to solve. Um, okay, so now we're up on the column. So we're gonna check 14 and seven if those three are whoever has those columns, Our player, that is to winner. OK, And in next column, it's 25 and eight. Okay, too. Um, five and eight. So all we're doing is basically going rule by war and call them by column and checking. Uh, who has those cells claimed? Once all cells are filled. Basically, you're going to run this operation every single time use, actually blaze. So we check for the winner. Um, So we're gonna have our last column. That's gonna be on three on six and on nine. So fine. Six and free. Okay. And are two more checks? We have basically for diagonal civic an hour. Bagwell, check and back. Most check. It's gonna be on one fine hand. Nine same Jack Paar play to Okay. And, uh, last Bangles. Check with the other side. It's gonna be three fine and seven. I All right. Uh, so here we have checked for all these players and every say no, we never. Yes. Not equal to negative one. Right? So there's some winner. So if we never is one the show Diallo, Right, with context and builder. And this is once again gonna use our custom dollars. So, lovey, let's create that. Get the custom dialogue class, uh, created cause you're gonna use that a lot. So, class custom. I know stents state less. Which it and it's going to take title. Scott, take content. I'll take you call back, and it's gonna take action. Text and, uh, got provided provided, sir. Initialize er's talk. So dialogue his good Erica's don't title content call back and up show on extra next we set . Okay. And, uh, and can simply creator built function. And the bill function is going to return our good old alert dialogue. And I have title text and, uh, is gonna show the title for the content and hammer text content. Our actions gonna have a flat button, and this flap button is going to have on press. And that's gonna be the callback. Never gonna call color. It's gonna be color stumped white and child. It's gonna be text action. Thanks. Okay, that is gonna be a flight button, So see? Okay. All right. So all right, back to our custom dialogue. So we're gonna have our, um, custom dialogue Where we gonna show who the winner is? OK, so use that custom and I look, and that custom Della takes. So Planner 11 Okay. And then start again. Question Mark press reset. Okay. And, uh, and he said Okay. Okay, so that is gonna be basically when we have are played one want. And, uh, it's gonna be an else Ghaith hand. We're gonna show same dialogue player two on okay. And pressed a state. And what? We want to do it. You want to return our winner? All right, that's going to create our reset game function. That's how, as we've been calling, it s o gonna simply create reset game function and, uh, kind of say, if navigator dot can pop context. All right, Um, then navigator don't. I gave a shit about context and go all right. And then I'm gonna set state. And they said they were gonna say button list is equal to initialize game buttons once again. OK, but that's going to basically recent are, but okay, so let's make sure we have every single function that we defined forward have created. So we have everything creates. So let's go and create our build function now. Okay, So we're gonna return a scaffold, she's gonna have Akbar. She's gonna have a title, okay? And, uh, and then we can have our body. This body is gonna have column and column has main excess alignment, which is main exits. Lyman don't start. Are even Put it on center, asshole. Okay. And, uh, Ross access lamb. It is gonna be cross Excels line in that stretch. And you have child our Children, actually. And there you have expanded razor tear to expand it region. She's gonna have a child. This child is gonna be basically a great view. All right? They're going to say, could you don't builder, And, uh, now we need to basically provide some property. So let's go ahead and and first create our own. I see. So honorable this Yes. Control T OK, builder. And, uh, you're gonna start with, um, Patty. Okay. And we're gonna say, patting his edges, it sent Oh, 10 points there. All right. And then we're gonna have our grand delegate, and this is gonna be cellar. Great delegate. Okay, with fixed across excess count. So face across Texas, count that storm that we need and cross access count is gonna be three. So we need to show three items and child aspect ratio is gonna be one. Okay. And, uh, cross access spacing is gonna be nine and main Texas main access spacing is gonna be nine points, okay? And itself formatted and they go, OK, except is our item count. And I am Count is basically are button list Scotland. And after that, up to the adam Country have item builder And in this item, builder gonna get context and index. Okay? And we can use that to build our size box. Okay. And in that size box, we're gonna have a whip about 100 points. Bite off about 100 points. So it's gonna be a square. And for child, we are going to have a raised button, so raised button. Okay? These are gonna be our self and, uh, gonna have batting and reading. That's gonna be edges instead. Oh, about eight points in between and then on pressed is gonna call but a list at that index doc enabled. Okay, so that's going to be on press. We're gonna check if it's enabled. Then we're gonna play the game by that, but in list item, otherwise, in a path mail are No. That is basically if the button is not enabled, that means we've already played the game on that. And there's some user already either player, when a player to have has already claimed that space. So the only two do anything on that and for the child is gonna be brutally start I a fixed . Okay, so that but not that Index. We're gonna get that for the style have textile. Okay? So we can have our next already for that. And, uh, next up is gonna be a color. Okay, so we have our text here. All right, so let's check it out. We have our text, and, uh, takes has a fund and the text. Okay, Can your color but list that index that color, right. And, uh, disables color is, but the list got asked that in next. Uh, I gotta call her, okay. And you have your, um, a sparks type sparks and expanded. So here we're gonna create another race button, and this is gonna be basically for our reset game. So we're gonna simply say tout text and this text is gonna call, like, have reset that style. Next style in textile is going to be color color, start white and on size is gonna be 20 points. Okay. All right. And so that's our text. We gonna have color. So color it's gonna be colors don't read. But the recent padding is gonna be It is in the interests all or 20 points And on press, you can call reset game the doctor antes All right, that I feel we have everything. So let's go ahead and run this. And, uh, I see if you have talked a lot of gold, So, uh, check out leggy. Now, if there's any is an issue, so all right, this building right now, um, let me pause the video or less building, and then we're gonna resume SNL's bill. This finished. All right. The built finished, and, uh, it took about 36 seconds to build this. And let's go ahead and wait for after install. And, uh, I run so all right. So let's take a look. We have, um What have you time? All right, so there we go. We have this tic tac toe game tile created, and let's go ahead and try to play it. So there you go. As you can see, we played an auto played, played one and another one, and, uh, they go play 11 All right? So we can keep playing, and in the middle of we can actually you and do reset And, uh, like that going to get our, um our detective game created. So this is it, guys. Uh uh. And, uh, we have our tick tack toe. OK, let's see if you can lefty other one when you want again. Anyway, it's nice. So this was your detector game? Hopefully he learned something new hand. Uh, you'll enjoy this game. Make your own game. So yeah, that is it for the studio thinks I'm watching. I will see you guys in next video. 7. New: Flutter BusinessCard: Hello and welcome back. And in this video, we are going to starting off some of the planter examples high, and we're gonna be creating ah, sort of full fresh project to combine everything that we have learned together and build solve the projects. Okay, so let's go ahead and get started. Eso in this, uh, project we gonna be creating a business card kind of snap. Eso uh, for that, we're gonna need some custom farms and stop. So you're gonna learn how to include custom funds and into Europe and also how to add images into assets. Okay, so let's go ahead and get started. Eso posting them would do is I have this stop bare minimum project open. Like there's nothing into it after leading even the default code. Eso you can see, like, you know, I'm getting an error. Uh, but first thing we're gonna modify, it's gonna be bumps. Uh, bus back. Yem Oh, file. Okay. And what we do here is I'm gonna actually remove all the comments, so begin. Have I'm still a lot of comments in here that offered it, actually adds, And, uh, I mean, if you need to restore these comments simply create a new project, and and they're gonna be there because that part about polyp or boilerplate coat Okay, Um, all right, these are examples for funds, so just leave them here because you're going to see how fonts are basically reference. Toki. So I'm gonna pace that, Uh, I'm going to say that, and, uh, next thing I'm gonna do is we're gonna go to this website Google Farms so far in start google dot com. When you go there, you can actually land on this page right here without filter list. So quiet start Gould outcome. And then was he land here? You can actually search for funds. There are a whole bunch of for consoles fronts that has provided for free, and we can use these funds, but we are interested in handwriting category. Okay, so we got a subject that so handwriting, and then you can scroll down and you can choose whatever you want to, but I chose to satisfy I sort of like, you know, like the way it's actually written, So we're gonna use this one for our examples. Okay, so So go ahead and download that farmed once you have downloaded. You gonna be able to extract that? And what you will get is it's two files, actually. So and those two files are gonna be basically they can now look like it's there's gonna be a t i f f file and there's gonna be a license. Oh, like this. Okay. And is it a party license? So basically, free to use disorder is So what we're gonna do next is we're gonna come to our select a problem. Becky m. O. And because you're using visual studio code, we are simply going to click on this add new folder, and we are going to add a directory called fonts. All right. And next, How are we gonna basically drag and drop our front into that? So we've added that front, and, uh, we don't display it, so that's fine. And here in in pop up spec docked. Um Oh, file. All we need to do is we need Teoh. We need to uncommon this. Okay, um, or we can use weakened copyists in used today as an example. Um, yes, I'm comment because that way you can see the hierarchy. Okay. So as he noticed, the hierarchy is you have flutter used material, design shoe and on the same level. You have this fonts, right? So because the fonts older that we have created Okay, so that's why he says farms. And then you gonna say families or family, you can specify the name, so satisfy. Okay? And then you give the font fun name. So you just see funds And, uh, that's your funds and satisfy regular start TTF. So that's the file. Name that fear reference. So if you have more more funds, he can actually simply add them here. Otherwise, you can remove all that. Okay. So make sure everything is correct. Any are extension is gonna run, and everything gone look good is the letter. So we are good here. Right? So that's one part. Now, let's go ahead and add in little folder on. We're gonna call this one image, his images, okay. And it's called a Yeah. Media is actually majors, and we're gonna do is I'm gonna basically no dragon drop a logo, any image that you might want. I want It's lower here, so I'm gonna use that lower, okay? And I think I believe I have another mobile year Yeah. So let me use the other one. So could delete this and bring another one. Okay, drop it right here. And less really in this rename. No. Go, Maggie. Something simple. Do type. All right, then go back to Europe. SEC thought Thiemo pile and, uh, right above your fund. Um, gonna hit one tamp and, uh, basically gonna say, Oh, assets. Okay. And your assets are gonna be images before dhoni slash local knock pmt. Okay? And he say that and, uh, here, but fact is gonna get its gonna run how to make sure everything is correct and all the dependencies are resolved. All right, with that, I think we are ready to jump in. It's the next up. How are we going to go to our clever may not start and fix up to stir. So we're gonna do is we simply say run app, Okay. And, uh, this will be a material. Yep. All right. And in this material that you're gonna have home and we're gonna have scaffold, Okay? And scaffold is gonna have a child. Are tight bank on color, and, uh, colors don't sick orange, and then we're gonna have body for the scaffold, and here we're gonna have safe area, okay? And the safer? Yeah, it's gonna have child. So let's go ahead and bring that to new line. And this child is gonna be a column. Okay. Column. It's gonna have Children. And, uh, okay. And Children is going to have a circle avatar. Okay, this is basically to show a circular image that we gonna show. OK, so settle left are it's gonna have radius off about 50 points and you're gonna have a background, and we go choose background image going to say asset image, and we are going to give our path images slash lo dot BNG. All right, so that is our image. We should see some some sort of image. Years of winning run. So go ahead and run your project and wait for bills to finish, and then we gonna see We should see a circular after inside. All right. All right. Let's give it so X codebuild is running. In the meantime, we can talk what you're gonna do next. So we're gonna have, like, in a couple off text boxes and a couple of text Richards and those text messages are gonna basically have some Texan. It sort of like, you know, your business card, your name and your your company name or your any other company, Moto or something like that. And then and then we're going to show the phone number and even at risk for the company. Okay, so that's what we can actually create. And that's where we will use our, uh, are newly added fund that we have added in our perfect. So you can see how you can use our own farmed in this scenario. Okay, so Bill just finished running, so we're gonna get okay, then go. So we have, like, as against you be how are made showing up in the circular in this circle circle. Loved out are right. Next up is outside. Your circular out. Are we going to create a text? Okay, now this text is going to be some texts. I'm gonna say them take e. I see, for example, and we can style dis text with style and the stakes textile. So you gonna take that? And we are simply going to Okay, so file has Syntex enters. Okay, basket. Um, we can fix that. We can simply say font family. And here we can actually apply our farm family. So satisfy is our foreign family. And if you remember, um, let's go back to our up spec don t ammo. And this is the family name that we have given for this for. So that's what we can refer here. Okay, so that's what you're referring like, satisfy our foreign family. And, uh then next up, we cannot simply defined the fund sighs and font size is gonna be 32 anarchists color and color is gonna be color stark white. And then we're gonna stay front. Wait and ponte weight is gonna be font wait dot bold. All right, so let's go ahead and do reload on this, and we should see our text appearing at their nice and easy. All right, next up, another text. Okay, so that's Ah, wrong place. This is our text descending so we can say another text here. And ah, this is where if a company motile is gonna come. So I'm just going to say of learning, made easy that and then we're going to say we also on a provide style, this text style which is gonna have fund family, and this fun friendly is gonna be satisfied. Now, you can have different fonts created for you and, like, you know, included in pubs back document file. And then he can use different forints if you want. I'm using same form, but you're like, you know, I would increase you to actually include multiple funds into your pubs back as a challenge and and see if you can actually make that work. Because that's gonna be a fun experiment to dio that we're gonna wrap this by saying far size is going to be 24 in this case. And then are we gonna say letter spacing is gonna be, what, three points and a color is gonna be color stock? Quite. I think that, um, color start white. Okay. And, uh okay, so let's quiet and real one more time and see if we have our So there you are next set of next text and this line of Texas showing up. So we're gonna take this and we're gonna add another regent here and this time gonna add a card. Okay. To display phone number and email like a doctor, Bob. So I'm gonna say card. Okay, card has, um car takes a color to, say color dot white If you if you want to, Basically not to find a color here. A body full calorie. That car is off white color color's don't white like that. Hey, and there's some quite properly, so this ah, child is actually a car, But let's put margin also, so margin it's gonna be it is and insects dot symmetric And we want to provide a symmetric margin for or giggle space with 10 points and horizontal space with 25 points. Okay. And then gonna have child, which is going to have a batting read it, which is gonna have padding and batting is gonna be edges inset. And we're gonna format in a minute 0.0, and we're gonna say 10 points. Okay. And, uh, all right, and card requires something. So card as car has, like, you know, this child, so child is added and, uh see. Okay, so let me let me type it out. Okay, So we're gonna have this and, uh, does this sort of child or the padding and padding is gonna have another total mental element is gonna be a role and that is going to be a Bridget. Hey, for writing is still not kicking in. That means, yes, some few more errors. So we're gonna say hi contact for icons. That phone actually. Good enough. Okay, so let me see if I can actually, or sore matted. And then then we can a deep oak because Linus getting really long. Okay, Now that you have padding curry and you have child for this one, it is a role. Has Children or Bridget and OK, average. So Okay, I see. Okay. Uh, scrap everything. OK? Hi. Um, so for our card, we have our color. Okay, We have margin. And your child a child has a patty. Okay, so child has batting, right? And, uh, then padding has its accord element petting now and then another child up for roe, which has which it icon An icon. That phone and color. Okay, there's something player. So color is gonna be colors. Start orange. Okay. So what? What are we missing? Um Okay, peak. The problem peak in the poem position argument must occur before the named argument. Try moving all the position arguments before the named argument. Okay, let's see what we have as a positional argument, right? So close is we have our color. Oh, that is because I may have a stake in the hierarchy. This guy needs to go out off next. It's not about of text. It's out of text. Okay, there we go. All right, Stan. There, that's better. OK, so that's where we made a mistake. I actually put it inside the text. Okay. Anyways, um, it's good. Um, we got firsthand experience off debugging an issue. So we have a Nikon and next to our icon, we are going to have a size box, okay? To get some spacing. And South Box is gonna have a bit of 10 points like that. And, uh, then we're gonna have another text, and this text is going to be the phone number that we're gonna just place I'm gonna save. Plus one by 55 I thought about you. I fight, fight, fight like that, and we're gonna do takes out do textile on this text style like that, and textile is gonna have color and color. Start arrange dot Let's give it a shade off. Maybe for 500. Okay. And, uh, next up is fun family. So let's give it up on family off. Satisfy, Make that. And we also gonna give phone size often 20 points, maybe. Okay, that's perfect. Let's quit and reload. We have typed a lot of code, so let's make sure we have everything in There we go. This is how our how are business card looking How it's looking pretty good. Okay, so that's go ahead and add another card. And this car is going to be The email is gonna be the last element. And, uh, and then we can I simply say color, but this one is gonna be colors, not white. Okay, origin is going to be edges insects dot symmetric. Okay. And you're going to say article it's gonna be 10 points in horizontal is gonna be 25 points , and then we're gonna give child property and can add padding, okay. And patting a quiets. Patting basically as a first property are one of the one child Children element with the argument hand and to then said it's gonna be dot Uh huh. 10 points. Then we have a child which has a role. And inside that role is gonna be Children. That's gonna be in a really rigid and here we're gonna once again, uh, you are icon. So icon stopped E mail, Okay. And then color it's gonna be color Start orange, Okay. And, uh, next element. And this is going to be a size box, which is going to have a bit off 10 points and then a text widget. It is going to have email. So I say gmail dot com and then you have a style text style in this textile takes style type color, just a color. And, um, color is gonna be color stuck orange stunt shade 500. So similar shade but Bali and it's gonna be satisfy. And, uh, and then point size is gonna be 20 points. Okay? All right. So let's go ahead and do a heart reload. And, uh, we should see are two text boxes. And there we go. There. We have our, uh, full fledge business card already. Okay, so that is actually great. Andi has, like, you know, that has, like, you know, pretty much everything that we need. Now, let's go ahead and basically modify this Ah, little bit because one thing I want to do is our not I wanna make this center okay. Centred on the on the x axis. Okay. So basically, I'm gonna I'm gonna center it right here. Unwise exit study on the y axis. I'm gonna center right here. Okay, So for that, all we need to do is most well check out our column. Okay. In club has a argument how that is called main excess alignment and form a nexus alignment . I want to say it needs to go center. If I do, we note there we go. Say it actually sits right in the middle of the screen, so this could actually work like you're about screen. If you are creating an app and you wanna create about screen, you can have that. Okay. Now, the other thing that he can actually sort of remove is you don't like that you don't need a color and less. You wanna provide a different kind of color for your card. So you simply going to remove that? Okay. And, uh, you're gonna remove this color, It's all okay. And go ahead and do ah, reload. And nothing changes. Right? There's one more optimization that you could do. So you already seen row, and we didn, like in a padding and everything. Right now we can replace all this with a list style, which is so we can do is so we can take our card and for wherever the padding is ending that go. So I'm gonna cut the panic back, patting out from here and we are going to basically put are list style. Here is a list style widget. Okay? And we're gonna have a leading, which is gonna have I consulates style has leading property that takes some of Egypt's. So we're going to say I can't start phone. Um, yeah, this on those phone, and then we are simply going to say color is color. Start orange. Okay, so that's our leaving element. And then we're gonna say we have title for this lift, and the title is text, Okay? And the text has the property. I mean, the text that is written, So plus one I fight. Okay. And then it had the style text style. So and textile has color. It also has want family, and it has on size. Okay, but that let's go ahead and hard freed owed and see the difference So what we've done is, instead of creating our card, we have created ourself a list style and is conceded There is a slight difference between height because it has a preset padding and margin and everything along, um, along the like, you know, along the tile itself. So and it's kind of like, you know, looks rather nice. And you can imagine, like, you know how much gold we have released. Right? So we're gonna do the same thing here. Okay, So I'm gonna What I'm gonna do is that this time I'm gonna cut I I can't in text out, okay. Like so And then Rahu padding Parliament. Then once again, we're gonna add list tile, Okay. And a list style takes leading, and I'm gonna paste bust in the move. Remove size size box, okay. And cut text one more time, okay? And so we should have, like, you know, this style with an icon. Just a Nikon like that, right? And then how are we gonna simply say, title is whatever we have in our clipboard? Right to gonna coffee based or no type? And there we go. We have restored our car back in like You know, it's state as looking you and nicer because you have a fewer lines off coat by using this a new list reject list that with it that we just integrated. Okay, so that is it for this video. And hopefully you actually learn something new in this. Basically, including in you Fund and creating a practical example are off out of this while learning something new about floaters. Um, widgets. Okay, so, yeah, this is it for this video and other things And watching aval, you guys in the next video and other deal, we're gonna be creating another small project to basically cement all the concepts that we have learned. Okay, So I'll see you guys next game. Thank you. 8. New: Flutter DiceGame: Hello and welcome back. And in this video, we are going to be creating a dice game. SSA. Basically, we're gonna be, uh, uh, rolling some dice and generating some random combinations from II. So we're going to see how begin up, combine simple images to create a very simple game. Okay, so let's go ahead and get started. So what I'm done is of downloaded six dice faces from the Internet, as you can see. Like, you know, they're like 123456 representation off 6 56 different faces for a dice. Okay? And that's Ah, have. So you go ahead and download for Black. You know, thes from the Internet. Next thing we're gonna do is we're gonna take our prospect out gamma file and can remove this local dark PNG. So that's amusing Cree Sosa from last product. So that's why I am removing. But if in case you're reading a new project, you're not gonna run into these things, but make sure you have assets added and images are basically as a as a folder. Okay, um, with that we are ready to roll, get We've got everything that we need her for us to create our game. So let's go to our main file me and our heart. And here inside this, we have created this material. Have scaffold background listlessly back on us. Um, orange. Okay, lets to orange shade 50. Okay, like shade 50 because it's a little bit light. Okay. And, uh, then we gonna basically have at a bar. So let's create an app bar, all right? And this emperor is can have title entitle is can I be a text that it's going to stay dice game like that? Okay. And then out. We are also gonna have a background color for death, and this is gonna be colored on orange color Start orange start shade fifties the same color as we have here for the background off the beach. Okay, so let me go ahead and reload a lot of things that have changed. So let me stop and to ah, full built. Okay. Still times loading our let's discuss what we're gonna do is, uh, in this case, because we wanna keep the state and we want to modify the state in our generate our random numbers for dice faces. What we're gonna do is we're gonna create a state full, we get okay. And the state full rigid is basically going to help us keep track off. What kind off number hard is getting generated. Okay. And then we're gonna update our image depending upon what kind of number there was generated by random number Library. Okay, so it's still building. So what I'm gonna do is I'm gonna take this an import dark, dark math as well. Math said you type math. How you gonna import dark, dark meth? And then we're gonna have, basically don't creating. So let's go ahead and create our state. Full digital gates are, which is launching. So let's see what we have God going on so far. So there we go. Um, well, 50 shades is so it's a little bit to light. Okay. Me do a 300 can see how that actually works. 300 is better. So let's keep it. Has too. And it OK, eso decks next up is basically gonna be body and body is going to be a dice game. Okay. Hey, we don't have that die Skin created. Yes. So let's go ahead and create that. So we gotta say state for which it okay and again se dice game. Okay. And that is going to create our state for widget and state as well. And inside the state, we need two things. We need an integer or left dice, and this is gonna be a random number. So we're gonna say, random dot next in teacher, and it takes a maximum printer. So we're gonna say six because they're six faces and it runs from 0 to 5. So we're gonna add one to it to get, like, you know, 1 to 6 values, because our images are 126 Okay, then we're gonna have our dice right hand side ice and, uh, once again, random stop. Next and again, six plus one. Okay, The same thing. We're gonna get to random numbers generated out of this. Okay, We're also gonna need a helper function that is going to update our state so we can say white update dice like this. And, uh, this is going to say simply have held I so left ice it's equal to We're gonna call the same thing that it just update the state. So we're gonna simply say set state and, uh, I'm going to remove int from here because they're not creating. We're setting leptin, right dice states. Okay. All right, so that's all about the helper. So let's go ahead and build our build function, okay? So we can return a centre. Reject. Okay, that's another way to center your content at the center. Rejected. It's gonna have a child off type role, all right? And this row is gonna have Children. That's gonna be collection of Regent's. And what we're gonna use is something called Expanded. Okay. So expanded. Make it. And this expanded Redoute, it's gonna have a child after I pop flat button, which user can click on and then we're gonna have own Press state for this. And this on press is going to be a function that's gonna call update dice function that we have created okay to generate random number. And it's also gonna have a child. This child is going to be an image. Okay, And this image is gonna be asset image with, uh, images slash, huh? Dice. So that's actually our path to the image, But we're gonna use dollar sign basically, to refer to our to our local label, So l dice like that Dr Ian G like. Okay, so that is going to give us dies at the random number that was generated for us and and our PNG so strengthen cognition is what we're using. Now that is our one expanded job. We're going to create another one, which is going to show us another image. So second face off dice and you can add, like as when he dices you want we can. We're gonna have to dice on our have in our game to make it more complex. Like, you know, predictions more random, um, flat button and a flap of skin is going to have bay on Press, which is also again gonna call update dice. So it's nice that we have actually grabbed all this a place state said state property into a function because you can simply call the same function from reckon places so we don't have to litter code a whole bunch of sim, same looking code properties and stuff like that. So image is gonna be asset Umit and, uh, it again, I'm gonna actually copy this and paste it right here, and we're gonna say our dice instead of flat guys is gonna be right dice, so that lets go ahead in and run this. And, um, there we go. We have our two dice and Renate when a top on it Here they go. As you can see, you get a random number generated for you. So that's how easy this to basically get your random like, you know, elements are created. Okay, Now, flat buttons usually have some more properties. So let's say like, you know, there is a There's a bullying property that actually are color property that highlight color. So let's see is hard color colors a transparent? Okay. And, uh, we are gonna need Let's see, you know, quite colors does a trick because I want to see. I wonder who that material design. Okay, so we don't have, like, highlight like, uh, like this one. As it's highlight detergent happy only has to have this somewhat general design ripple effects. So let's quit and see if we can find a property to remove that evolve to be have what in the property you have on Oh press. I like change, color, the stable text color. It's tables, color, focus, color. We refocus color. We can try a splash color. We can try Splash color, actually. So the strike splash color colors Dr. Transparent. Okay, Garden reload One more time. And, uh perfect. Okay, so we have thes two colors that we need to set for our that button right here. It's well, and we have a game that actually plays and generate her random predictions for you. Okay, so that we go guys, we have created a very simple dice game, just few lines of gold and few with the help of few images. So that was another example I want to show you, like you know, how you can use power function, string concatenation, flat buttons and stuff like that. Combining all those widgets to create something amazing, really easily. Okay, that we are done in this video. And in the next video, we are going to be creating another example. Um, where we gonna generate some more random numbers and going to see a different kind of game . So I will see you guys in next regale. Thank you. 9. New: Animated Age Calculator: No, no, Mac. And in this video, we're going to be creating another simple scenario. We're gonna be producing Age Kappa later. Okay, so let's go ahead and get started. So I got a simple find created here. It's a simple Skaff hold heart has been created for, but it up into the home page here and gonna build upon this. Okay, so let's go ahead and and get started. So nothing we're gonna do is we're gonna have this home page and that extends the state. We gonna also say it should extend with single baker provider state makes it okay. And this politically provides a single ticker that is configured for online, like, you know, only one taking in current tree. And this is something that we're gonna be using with animation control. But that's what that's what we needed. So let's go ahead and create some for labels now, and, uh, gonna create a double both for double type people or age. And, uh, we're gonna create selected a year, can create animation animation controller, all right? And we're gonna overwrite the in its state. And in this let's remove the comment. And, uh, we're gonna any slides super Any state we're gonna call that, and then we're gonna say any animation controller and equal to animation controller and the stakes we sink, we think it's gonna say it's gonna be deaths. So this class and duration is gonna be in milliseconds so many seconds. 1500. Okay. All right. And that are in Each state is finished, though. That's all we need for in state. Let me increase the front of it. Okay. Very perfect. Okay, so, um, and next up is gonna be disposed, so we're gonna say disposed. That's all right that are able to comment. And I suppose you're gonna call Superdawg. Dispose at last 10. Dispose are animation controller, and we're gonna call Dispose on that. Okay, so that's kind of weird. Disposed, then. Next up, we have a helper function that's gonna show a picker a date picker gonna stay underscore. Show picker context is gonna be context. Initial take is gonna be daytime date time. Not now dot Here and then next element. If the prostate, the frustrated couldn't be daytime 1900. So it's gonna go back. I'll go back to 1900 for this color picker. Oh, our daytime picker and latest is gonna be daytime dot now and disclose. OK, yeah, it's all going to get ready and they go, OK, and then we're gonna say or are date picker we're gonna didn't say then and, uh, this gives us the daytime while you so being get a time, right? Well, you and, uh, we are simply do count late Selected year from that. So we're gonna compute. Are we gonna extract it from the date time values? They're gonna say, value dot Yeah, that's being selected by the user. And this is going to call another function called calculate Age. So I can't wait. Age beyond created that here. So misguided. Create that next. No, simply saying white Catholic age. And here we're gonna call on Steph State and, ah, this set state is going to cost set the age So you gotta say d tender. Now that here finest selected year, don't do double take. That's gonna get us the age but the animation we're gonna simply say it's gonna be Tween and from the begin parameter, you can have any we should not value. And on the end printer, you say age and we're gonna animate that with curb animation. Carbon mission. Okay. And, uh, with the current value, we gonna simply say, Carol not best out. Slow in errant is going to be animation controller. Okay. All right. So I, um, by not taking that one, Okay, so let's make sure on her records. Incorrect. So we have the Yeah, the animation hand that is between animation, right, double and begins with animation doctor value and answered age. And then we any weight? All right, create are curved animation, which, actually as curve and takes color printer plant out, and it takes fast out slow in. I see. Uh, am oh, co start nice. I was se okay. Animation controller got forward from this is going to start from And, uh, next up is our builder. Okay, so our builder is gonna be a simple do you get to create a scaffold first, Okay. And, uh, their scaffold is gonna have app bar ap bar, which is gonna have a Michael that is going to be a text widget. Cow liqueur h Okay. And I'm gonna put in a rage emoji here, So if you're on Mac control commands, space space is gonna get you the emoji, so just select anything that he like. Hand down, ala. Okay, now it's kind in state this so everything is formatted, and then we're gonna have our body. This body is going to be center, and, uh, gonna have a column. So ask you a child and main excess main access alignment is gonna be main excess of I'm in Don't center. Okay. And, uh, then it's gonna have Children, and that's Children. And it's gonna be collection all widgets, and they're basically gonna be some divisions that we gonna ask either of their input. So we're gonna ask, we're gonna create a on I'm playing button that's gonna say, select your policy error. So let's create that so outline. But it's gonna have a child and, uh, shall is gonna be a text just as a selected year is not equal to No. Then sure selected here up to a string. Otherwise no select earth here. Thanks. So Okay, so that's what that's what we're gonna show in the text. And, uh, and then you have your, uh we see a plane. Okay, your order site and porter side. It's gonna be border side with color and color is gonna be color Start black. And what is going to be two points? Okay. And next up is gonna be color, and color is gonna recall her start white and own press. We are basically gonna call show picker without Britain sees. All right, so that's gonna be our on press, and and we're gonna have a padding widget. Just simply gonna have padding for edges. Oh, about 20 points. And, uh, mix up in the last seven went we're gonna have is gonna be animation builder. So a mission builder and the stakes animation, and it takes a builder, all right. And this builder is basically yeah, we see you say context and child, but you can use for your text and say your age is a dollar animation don't value. Don't do strain as Bakst. Okay. And, uh, in the skin or text e style so you can assembly safe style or textile, right? And then on size it's gonna be 30 points. Don't wait. It's gonna be fund wait dot Bold in front style. It's gonna be font style. Don't italic. Okay. All right. So let's see what we have. Why do we have this quickly, right? So saying animation built her an immediate builder. Always get. Okay, We in animation builder and Hanya waited building. Okay, so that we have our Rh count little ready. So let's go ahead and run this and see if, um, if we have a meeting safe. All right, So we're gonna run this on this iPhone 11 pro Max simulator, and, uh, it's gonna launch it pretty soon so we can actually take a look as a heart looks OK, so just give it a minute, and, uh all right, so So this. It's launching right now, so it's running that escort build as to okay? These are old errors. All right? I need is important to do. We have any is important. No. Okay. I think we should begin cold. So let's wait for one war minutes. Almost done. Themes. See that? Develop? Console? Yeah, it's launching now, so All right. You know, buildings down. I took 49 seconds to run the built and built succeeded so we can have our app launched now . So there you go. You are Afghani installed, and it's launching. Okay. So never ask. I don't want open all right. So we haven't there, and we haven't enter on. And Mission is not equal to know is not true. OK, so So I only made a mistake. Years selected the leszek. Look, we are getting position 15. Okay, The position 15. All right. Um all right. So there was one mistake that we made those really seconds And the other one as's. Basically, we forgot to a sign our an emission do animation controller toe animation controller like that. Okay, though, that's got to be the error. Okay, so let me re certain this now, and, uh Okay, let's go ahead and stop this and rerun. This is actually initialize our animation and basically the source completely animation. Is Mahdi called? You know also, um, hopefully that's gonna actually, otherwise we will do what makes you all right, so list. Wait. Ah, wait a few seconds toe to basically figure out how long the bill wait a few seconds to that the build finish, and then we're gonna figure out what's going on. If you saw, you're not okay, Right? So build is finished. It took 30 Texans, and, uh, now our app is launching once again. Though some take a look. All right. Any time now. OK, that go. So we have our a chocolate already, So I'm gonna click on this button. Yeah, they go see this Kander and, uh can drop down. For example, take 11 2001 of the date for to those 11 and click. OK. And there you see the animation going that that is the animation that we're actually trying to build. So let's go. I didn't take something Partidos six and selected eight Click. OK, And there you go. So that is the age calculator that we made to calculate age and apply ice and animation for the number of current. Okay, so that is it for this video and things ain't watching. And I will see you guys in next video. Thank you. 10. Intro: Hello. I want hope you're doing great. And I'm very excited to present to you this, uh, new, uh, video series on flutter flutter is a new her black mobile platform. That or my moral framework that Google announced how we recently and it is now in beta too . And basically, what it does is it lets you create a very dynamic and beautiful you I based on Google's material design very, very easily in one single language. So all you need to do is basically no up it about dark our programming language, which is the language choice, hard to develop, flutter, and then you can actually develop both for Android and Iowa's. And in this coast, we're going to explore, dart and see like, you know how easy it is to un seen and write your code in it. But what can you do in flutter? Well, sort of rise to a fast development. So, as you can see in this example right here that you're changing code like, you know, on the edit on the editor side, and you can just do ah, heart reload. And then all your changes are reflected right then and there. So this gifts. You know, uh, this gives you an opportunity to basically save a lot of time launching, relaunching and stuff. So, as you know, like, you know, for ah, you I development. This is who wanted the mean made problem where you make changes. But you don't know how they're gonna look on the device itself. Well, in this case, ah, you need to do if you make changes here and then you just hit heart recode in Your changes are already on your in your app, all right. And, uh, you can do as you can see, You can actually create a really beautiful uh, you guys, how? That's like, you know, you look at, like, how how they have actually created this table view or list view here. And there are some beautiful graphs and design, and everything here that you see is material designed based piney fault. It's it's material design based, but you can actually change it. Um, how are you? Like to be okay? And it is Martin Envy active, So it's basically based on reactive programming, so I don't know if you've heard, but reactive programming is a new way off programming where You don't have to do all the blocks and easing programming, but it's actually all about after worst and author bring changes and stuff like that and you're change your code adopt to the chase that it has actually listened to. And then it would actually make those new updates available. Do you like, you know, as a subsequent Jane. So I would definitely recommend checking out reactive from programming. But flutter already does that for you, and you can access all or most of the native features and s Seagate's using floater library . And basically, hey, can reuse your Joe a swifter, objective c code to do all those right and or the most defining feature is that it is optimized. It is up nice for, um, for not only for testing and integration and everything, but it is actually optimized for generating do de GPU. Excellent ADP eyes reacting Framework Animations has fluent coding experience and it is fast. It actually really, really fast. It's as fast as your native native basically APs all right. And one of the thing that you're gonna notice, actually that there's a lot of support now for floater, and they're a lot off our packages that were getting released every single day, and it is open source so anyone can contribute to it. But even, actually, literally, Come on this, bub dot dot language start or and flutter and basically search for plugging that you're looking for and drop it and just started using it. And they give you, like, you know, nice examples. So you don't have to worry about how to how to basically use it or how to, like, you know, dig up the documentation, your stuff and stuff like that. It is very well documented. Um, so this is actually this is a huge change with flutter getting into the market in, like, you know, with all the other cloth graft from, uh, frameworks out there like a react native and stuff. Florida is definitely making a lot of difference. And, uh, I'm hoping that Ghoul is gonna announce it is final release candidate pretty soon, but right now they're in beta, and they're going produce successful and pretty strong. So I hope you guys are excited, and if you are listen rolled into discourse and we will learn how to create Ah, flutter APS. And over time, I'll be updating this content to include more and more examples that will show you different things. How to do it. So this is a constantly updating content. Basically, you coast. So I hope you enjoy. Enjoy the course and I will see you in the car. Thank you. 11. What is Flutter: lower. But my name is Anoop. And I'm very excited to present to you how this new video series on flutter and this video series name is Flor zero to professional. So basically, what we're gonna be doing in this video series, basically, it's we're gonna be exploring each and every aspect off flutter in how you can create so to really cool APS cross platform. Basically both want Android and Iowa is with just one cent of court base. And are we going to be looking at steps from installations do all the way, creating a few APS on our own? Basically from scratch. All right, So hey, must be asking what is flutter? So Florida is a human while its decay on and it's a new way to build fast, reliable, beautiful cross. But from APS how Google has launched her flutter in beta two right now, and they basically describe it as flutter. It's a Google's mobile you I framework that can be leveraged to create high quality native interfaces for both IOS and android, and it's free and open source. The best part is that despite of being a cross platform, it has perform is like native APS. So what is the history behind cross with plus platform frameworks? Well, I'm glad you asked how across the road from, uh, frameworks have been around for a long time now, and they were mainly based on javascript in reviews. That's all the frameworks are like phone gap, Apache Cordova, which is, like, you know, the based became base for, ah, lot many other cross platform frameworks in that I do that I think as well. And then there was update. Update him. Um, a titanium, actually. Um, eso uh, yeah, I might not remember the exact the company who owned that. But actually tatting iwas another framework. Um, but this is the general architecture that they followed. So you had your platform, which was, like, Iowa's our android. And the platform had, like, views in cameras in events and this all belong on javascript side. And then he have platform services, huh? Which are, like, locations are It's approved. How do you service sensors, cameras. It's And, uh, your app would be written in javascript. And then when it needs to Dr. Basically your app is gonna be hosted on Web you and shown on Web. You off the platform and it can use anything related to canvass for external cameras and event Basically estimate Tom event a tree and everything related to it, so it can do all that without any problem. But the real problem came when it needed to talk to how the mobile services like location service or blue dude. Um, and this moment location tracking is sort of inbuilt with STM out five. But this was not the case before. So you still write this home and you would still have this Ah, little piece of God called bridge. And this would be specific to the platform, and it would actually be packaged along with your app. And this bridge had responsible to communicate between javascript and the platform. So there was like, you know, javascript. You Arhab region. Jalisco will send some signals to bridge and then bridges gonna basically convert it into the native language and then forwarded to the platform and then received the response back and pass it back in JavaScript Understandable manner back to Europe. Sit down with the general architecture that that followed. Then came how react native and reactive was good. I mean it. It Actually, a lot of people who were using form Gap are ionic. Even some of the native app developers moved into react. Native float and reactionary was essentially the same thing I was again. You write things on javascript in order to run it and make it available across the board. But you would also right native components. And those native conformance would live behind this on the platform side. And like you guessed, native native components would be returned a native language like for IOS. It would be written either and left or ineffective. See, And for Android, it would be written in Java. Courtland. Um But, um, your app is still gonna be in javascript, so but the difference is basically early. And you had, like, bridge talking just for the just from the services that it had to use for the platform. In this case, there was a big block off bridge for anything that you need to talk to. Basically gonna talk to the platform, you're gonna go through the bridge, and, uh, that bridge basically converts. See her code into the native hole and native put back to the back to the back TD javascript code. This caused the main formation performance issue for like, you know, various different cases. I mean, some cases that you would see react native works actually faster than native. But there are a lot of cases like, you know, where your heavily dependent upon your platform and platform services. Then it would actually slow down. And one of the main reason waas this conversion between JavaScript and the native what's happening at the wrong time that added up a lot of cost and basically a fear app grew and complexity. Then it became more more performance impact on your app because of Deacon because of the translation that is going on back and forth. All right, so we had to find a way. How then game flutter now further is just like react. Native basically provides a reactive style off reactive style views. So basically, if you type anything, you have to like, you know, hit anarchy or wait for event to happen, it actually observed that So that's the reactive style of programming and actually floated actually follows that in a lot of ways, but it takes a different approach. Our tow avoid performance issues, Um, and basically There is no need for Jalisco bridging anymore has its own s ticket that sits within your app and actually deals everything in anything that he need Basically, from that perspective so and the indios ing is flutters written in dart. So you write your program endured not in telescope, which is a compiler language. Now Dart has a head off time language compiler which actually convert your dark cold into native code for multiple platforms. And right off the bat actually starts to create a runner for IOS Aim for Android. So you would see that code basically being present there all the time. And when you're actually writing your only writing and start now compiling your code into native, improved app start up time and that performers now start of time with important because you want to make sure you keep your sort of time as minimum as possible. And this actually helps a lot with that on a floater is a mobile as decay and it comes with a framework as the has bridge. Instant tools gives you as a developer and easy and productive way to build and deploy mobile APS both for Android and IOS Now, at this point, these are the only two major platforms are available on eye on mobile side how there's windows. But its presence is really, really small. And for that reason, sort, it does not cover that side. Um, So what we're gonna be doing, basically, it's how we are going to be a first. Let's take a look. How do you stop, flutter and configure your environment basically to get ready? How for to to create these from perhaps. And then we're going to start from very basic caps. And then we'll explore each and every aspect off ab development within Florida. All right, so hope you guys enjoyed the studio, and I will see you guys next to deal. Thank you. 12. Installation & Environment Configuration: Hello and welcome back. And in this service, you were going to be looking at setting up setting up our, uh, environments are basically doing some downloads and stuff so we can get ready to set up our Norment for floater development. Right? So, fasting on a show you is, uh, this place that you should bookmark. It's called a flooded road. I'll desist of website. And if you notice basically flutter has Google docks about floor like, you know what it is and everything, but they also show you a quick demo and the shows you like. You know how fast development days basically, you just, uh, modify your code click on, uh, the refresh button and you're changes are there reflected. And it may seem like, you know, there's a lot going on here, but, ah, as the move forward into this, you gonna understand that it's actually very, very easy to write APS in front or okay. And these are some of the examples that they have given. Actually, you can browse them around basically to see, like, you know how rich content we can create with the of its letter. And then he talks about like reactive framework and reactive programming the way it works and a basically ducks public. You know how you can access the native features within flutter as well. Okay, so there's a lot of information here s o I would actually recommend course you going through that in, uh, time to time. Come back and check on the updates. Turner is right now, Peter to, um and Google is, I think, planning to release it before glow, um, off this year. So hopefully we're going to see much more, much more traction in this and doing Google Iowa's Well, okay, so, uh, alright, How solicitous started and, uh, Down, Lord. Clever. So if you don't do the if you click on this blue button get started, you're gonna fall in on the screen. And this green has three types of install seeking the storm windows. Mac os or Lennix. Of course, for this world, should I have used our my quest, but even choose depending upon your OS type? All right, Once you click on Mac OS, it's actually gonna take you to the screen where it talks about, like, you know what? The requirements are basically for basic insulation and then you download this further acidic A zip file. Now, this is a pretty big file. It's like about five very 70 megabytes, so half rgb off size, so it may take some time, depending upon your network. Bend it. I've already downloaded this hard drive and, uh, basically your TV to do it, you know, each downloaded and then extract it out, um, to a folder. So when he extracted out, it's gonna be to create gonna create a folder called Flutter. And then once you have that, you can simply add flavors tools to your path and the stars like temporary paths that seeking literally copied this and paste in your terminal, and it's gonna set your path for you. Now you can set your path and it gives you, like, you know how to set your path for, like, you know, on this folder, but for temporarily but like, permanently so you can actually follow along here. Um, now, once you have done, once you have done that, basically gonna run this command flutter, doctor, and this command is going to show you basically look at your environment. Look at your machine and see, like in order the things that you have already installed. A lot of things that you need to install. Albert Brookman, Tom Morning. Enjoy. That's decay and enjoyed studio Do basically use that and extracted Keep it because it's gonna actually look for that. And once it find it's actually gonna continue forward, like, you know, if it's already installed, Okay, now, now, one of the good thing is they have made their super easy. So they give you all the things that you need basically on your machine, and they give you, like instructions on how they installed those that stuff. Now we are going to be using iris plant from Like I said, it's ah right ones and use both on IOS and Android. But you can pick like you know which one you gonna run. Because I already have Xcor configured on this machine and I was simulator available. I'm problem. I'm gonna use I set up. But you might, as all the use android tear up which is are basically shown right here. And once you have done piece of set up, it's pretty much same. So automatically floater, actually compile. See accord in both Android and IOS. So You don't have to, like, you know, choose one or the other. This this set up thing a highly depends upon like, You know what you already have available. So it takes less time for you to configure your environment sour. Recommend whatever you have configured. Just move forward with that end. Follow these steps. According toe it. Okay, so once you have those, you can actually I mean, I have excluding started already. So, like, you know, everything is healthy. Said what? He can run these commands, and it'll actually show you what your states are If you're, like in IOS developer and looking into flutter right now, Um, no. One of the thing actually gonna notice when you run a flutter doctor and it doesn't talk about it here. It's gonna say missing devices, it's going to report this error. So when you resolve every single area that you have, you're gonna have one missing error and it's gonna be missing device. And the reason that missing device shows up because there's no device connected. Now you don't have to have a physical device connected. What into is you can run a simulator. So if I won Iowa similar own machine then, um, s soon as I run it and this launching and ready and available. Then if I go back in and run for little doctor again, it would actually find the device. And it would say, OK, everything is good. All right. So I did They take me a little bit like to figure out because I didn't reach to this. Ah, step And their documentation is, like, you know, all over the place for this reason. So I did some googling and find out that this is how you can result that Okay, so for for that, like, you know, I mean, there are a few few more steps about membership and stuff, and then you just start you up by your foot to run, and it lower on the basic up, but yeah, in the next one. Now we cannot confirm unity. Which one we need to use. Which kind of what kind of needed to be 30 years? Because obviously we're not gonna be using excluded doesn't support start. So let's take a look at that. So our I would say you can install, like, you know, intelligent or android studio, and you can actually work with with intelligent, actually not interested audio mentality or Web storm. Um, but our recommend how we just to decode reason is it is very, very light. And it has a great support. And even if you notice even the floor a reptilian actually use, it's either entered studio. Are we just wrinkled? And if you this visual studio code, it has every single, even screenshots and everything available in the obstruction for you. Okay, So, um so, yeah, so you can actually go ahead and install Yes, coat. And then it actually talks about, like, you know, creating, downloading, plugging. So you simply open your we just area code and, um, type these commands and get yourself set up for dart. Okay, So once you have, once you have done all this, our environment is configured. I already have figured my word. So what we're gonna be doing basically, in the next video, we're going to start looking from B just code so we can look at minister code, how to create your new app and basically, how to run that app and then go from there. Okay. Ah, Well, um I will see you guys in next would in that case. And if you have any questions, feel free to message me. And I'll actually try to respond those as soon as possible. Right? Thanks again for watching. I'll see as an extra diem. 13. Hello World App in Flutter: Hello, everyone. Welcome back. And in this video we'll start looking at how to create a new flutter project. So what I'm gonna do is, uh I'm going to have a visual studio code open, and I have Ah, I mean, this is just an old project, so I would say save, but what we need to do in order to create in new project, it's basically you simply go to view and click on command palette. And, uh uh, when you click on it, basically this window is going to show up, and when you can do here is you can stay flutter new project, and this entry is gonna show up. So you just like that. Give your project in name, for example, you can say my but first app and, uh, cause it should be lower case. All right, so we can say my first app and click enter, and basically you can select a location and and save it basically there. So I'm gonna select this location and save the project ing. Now, you you wanna make sure that this location is not inside the flutter sdk folder, so because it's not going toe work, so Basically, you have to choose a location like your documents or something where you can create this project. So I'm going to select him, and, uh, then how further is going to create a new project for me? And it's basically working here to create some files. So I'm going to close this, and, uh, I'm gonna maximize this one, all right? And when we are, when we are done, basically you're going to see this main dot dart file. Now we can do right off here is you can actually go to debug and click on to start debugging. Now, one thing you want to make sure that you have your now your simulator running so you can see Ah, the execution. And as you can see here, it's starting the build process. And, um, it's gonna basically launch the app very, very soon. I said, is it finishes that all right, taking up your time, Probably because it's the first time it sexually do it. As you can see, it has not created a folder yet. Oh, while it is loading, let me actually talk off about few things. So in flutter how everything within the flooded application is a regent. Um, and that includes simple text buttons are screen layouts. So all these are called widgets Now, these videos are can be arranged in for hierarchical orders to display on the screen. So basically, you can create one rigid, and underneath that, you're gonna start by creating ah, hole bunch of others. Now, Richards, which hold we just within, like, you know, basically, we just let's hold another wizard. Visits inside it are called container religions, and most of the layout Richards are actually container rejects. Except for the video. It's that does, like, very minimal ter. Basically like a text widget for you showing just the text. All right, so I hope that is actually, uh, that makes a little sense, but we are going to be actually starting to put all this together, and you're going to see basically what I am talking about. Okay, So, uh, let's see. Well, it's still working for some reason, and, uh, saying it's stalling in launching, and I don't see that that being launched anywhere. So let's give it a few more minutes and, uh, let me click. Stop and, uh, basically kill my simulator and simulator. Let's relaunch it. All right. I think it's launching right now. Okay, so we'll give it a minute. Okay, Cool. And now let's click on Debug one more time. And, uh, let's wait. We're going to lead Southeast ups till the time this one. Cool. It's starting. I might. How they go, it's loading that something must have happened with the connection so that I had to restarted. Okay, cool. So this is your demo app that actually comes out of the box. And as you can see, hey says, like, you know, you have pushed this button many times Any click on this button and shows you how many times you have quit. Now, one of the coolest thing is that you don't have to, uh, rerun this. So if I'm gonna go and change it, if I change this to say your clicks and just click on this reload button, it just changes it right there. And as you remember, like, you know, started from 11 instead, off starting from zero. That means that's that's what they call hot reload. Basically it real, or is it really, really quickly? So that's one of the main advantage of like you know, seeing flavor as you work on it. He just refresh the patient and your changes are over there. So there's a whole bunch of things going on here. We are going to do a simple thing. We are going to delete everything. Yeah. Alright, how about that? Okay, so let's start reading from the top. Uh, so what is going on? So first thing is, we import packages in flutter, and these packed this package. We're importing material design now. What is material designed? Basically, all these things that you see and the effect off, like, you know, this clicking and the bubble effect that is actually much. And Google has been basically making changes to all or most of the most of their APs to conformed to this material. And it has flat you, I and colors and some really cool animations. So So that's the sort it is. There's a lot of opportunities. I'm so Google material design and look it up. But by default, dark actually imports that this package called material don't start. All right. And next line is basically your main function. Like you gets every other programming language starts with mate. So they sound that's too on.