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
60 Lessons (12h 59m)
    • 1. 2021: Pomodoro Timer App

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

      69:05
    • 3. Flutter2020 Staggered Grid View

      19:15
    • 4. Flutter2020 Animated Pie Chart

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

      35:08
    • 6. New: Flutter BusinessCard

      31:48
    • 7. New: Flutter DiceGame

      12:26
    • 8. New: Animated Age Calculator

      20:06
    • 9. Intro

      5:54
    • 10. What is Flutter

      9:46
    • 11. Installation & Environment Configuration

      9:43
    • 12. Hello World App in Flutter

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

      11:40
    • 14. Stateless VS Stateful Widgets

      17:12
    • 15. Dart Programming Language Tour

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

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

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

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

      11:43
    • 20. Using Themes in Flutter

      11:18
    • 21. Create SnackBar

      6:56
    • 22. TabView and TabBar

      9:36
    • 23. Animated Drawer Menu

      10:26
    • 24. Orientation Detection

      9:25
    • 25. Downloading Images from Internet

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

      9:45
    • 27. Caching Images

      5:31
    • 28. Basic ListView

      5:40
    • 29. Horizontal ListView

      9:27
    • 30. Handling Long ListView Items

      9:26
    • 31. Creating mixed item listview

      18:03
    • 32. Creating mixed item listview 2

      2:34
    • 33. GridView

      6:02
    • 34. Gesture Detector & Tap Gesture

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

      9:41
    • 36. Swipe To Dismiss Gesture

      14:19
    • 37. Navigating Between Pages

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

      18:25
    • 39. Returning Data From Selection Screen

      20:28
    • 40. Hero Animation

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

      15:28
    • 42. Container Class

      8:30
    • 43. Row Class

      7:48
    • 44. Column Class

      7:13
    • 45. Working with local images

      10:09
    • 46. Text class

      9:06
    • 47. FlatButton Class

      2:51
    • 48. Raised Button Class

      2:08
    • 49. Floating Action Button Class

      4:51
    • 50. Icon Button Class

      3:36
    • 51. AppBar Action Buttons

      9:27
    • 52. Button Bar Class

      3:40
    • 53. Text Field Class

      2:19
    • 54. Stack

      6:00
    • 55. Stateful GridView

      10:18
    • 56. Stateful AppBar

      15:31
    • 57. Stateful AppBar

      10:39
    • 58. Stateful Checkbox

      9:43
    • 59. Stateful TextField

      5:12
    • 60. Stateful Slider

      9:46
38 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,363

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.

phone

Transcripts

1. 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. 2. 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. 3. 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. 4. 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. 5. 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. 6. 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. 7. 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. 8. 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. 9. 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. 10. 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. 11. 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. 12. Hello World App in Flutter: Hello, everyone. Welcome back. And in this video we'll start looking at how to create a new flutter project. So what I'm gonna do is, uh I'm going to have a visual studio code open, and I have Ah, I mean, this is just an old project, so I would say save, but what we need to do in order to create in new project, it's basically you simply go to view and click on command palette. And, uh uh, when you click on it, basically this window is going to show up, and when you can do here is you can stay flutter new project, and this entry is gonna show up. So you just like that. Give your project in name, for example, you can say my but first app and, uh, cause it should be lower case. All right, so we can say my first app and click enter, and basically you can select a location and and save it basically there. So I'm gonna select this location and save the project ing. Now, you you wanna make sure that this location is not inside the flutter sdk folder, so because it's not going toe work, so Basically, you have to choose a location like your documents or something where you can create this project. So I'm going to select him, and, uh, then how further is going to create a new project for me? And it's basically working here to create some files. So I'm going to close this, and, uh, I'm gonna maximize this one, all right? And when we are, when we are done, basically you're going to see this main dot dart file. Now we can do right off here is you can actually go to debug and click on to start debugging. Now, one thing you want to make sure that you have your now your simulator running so you can see Ah, the execution. And as you can see here, it's starting the build process. And, um, it's gonna basically launch the app very, very soon. I said, is it finishes that all right, taking up your time, Probably because it's the first time it sexually do it. As you can see, it has not created a folder yet. Oh, while it is loading, let me actually talk off about few things. So in flutter how everything within the flooded application is a regent. Um, and that includes simple text buttons are screen layouts. So all these are called widgets Now, these videos are can be arranged in for hierarchical orders to display on the screen. So basically, you can create one rigid, and underneath that, you're gonna start by creating ah, hole bunch of others. Now, Richards, which hold we just within, like, you know, basically, we just let's hold another wizard. Visits inside it are called container religions, and most of the layout Richards are actually container rejects. Except for the video. It's that does, like, very minimal ter. Basically like a text widget for you showing just the text. All right, so I hope that is actually, uh, that makes a little sense, but we are going to be actually starting to put all this together, and you're going to see basically what I am talking about. Okay, So, uh, let's see. Well, it's still working for some reason, and, uh, saying it's stalling in launching, and I don't see that that being launched anywhere. So let's give it a few more minutes and, uh, let me click. Stop and, uh, basically kill my simulator and simulator. Let's relaunch it. All right. I think it's launching right now. Okay, so we'll give it a minute. Okay, Cool. And now let's click on Debug one more time. And, uh, let's wait. We're going to lead Southeast ups till the time this one. Cool. It's starting. I might. How they go, it's loading that something must have happened with the connection so that I had to restarted. Okay, cool. So this is your demo app that actually comes out of the box. And as you can see, hey says, like, you know, you have pushed this button many times Any click on this button and shows you how many times you have quit. Now, one of the coolest thing is that you don't have to, uh, rerun this. So if I'm gonna go and change it, if I change this to say your clicks and just click on this reload button, it just changes it right there. And as you remember, like, you know, started from 11 instead, off starting from zero. That means that's that's what they call hot reload. Basically it real, or is it really, really quickly? So that's one of the main advantage of like you know, seeing flavor as you work on it. He just refresh the patient and your changes are over there. So there's a whole bunch of things going on here. We are going to do a simple thing. We are going to delete everything. Yeah. Alright, how about that? Okay, so let's start reading from the top. Uh, so what is going on? So first thing is, we import packages in flutter, and these packed this package. We're importing material design now. What is material designed? Basically, all these things that you see and the effect off, like, you know, this clicking and the bubble effect that is actually much. And Google has been basically making changes to all or most of the most of their APs to conformed to this material. And it has flat you, I and colors and some really cool animations. So So that's the sort it is. There's a lot of opportunities. I'm so Google material design and look it up. But by default, dark actually imports that this package called material don't start. All right. And next line is basically your main function. Like you gets every other programming language starts with mate. So they sound that's too on. And like we discussed last time Dart is a compiled language of all. OK, so it follows all the standers, So s so this means is actually what calls you're happened. What we're doing here is the same wide main and then we run the app and run up. This is where you pass your class that you have created. And if you notice my class has an editor and we're gonna come back to that But this class extends stateless behavior. Now eso stayed less fidget, which is which is called stateless for a reason. We're gonna come back to that, I thought, Alright, the first thing we're gonna do is we're gonna really quickly jump in, right? Some basic code. Okay, So let's make let's see what the center says. They said missing concrete implementation for stateless widget dot build. Okay, so every single class in Vigen or every single widget in flutter basically requires a build method, So simply type build and let visual studio figure out what that going to be, and you just click the one that says build context and that's the one we want. So let's do some very simple things. So basically, what we're gonna do is we're gonna display hello, flutter on mobile app, and we'll use a container fidget called directionality. And within that we are going to use a text widget to display the text on the screen. And here is what it's gonna look like they're gonna say return new directionality, Okay. And, uh, it required the same because they're gonna put it in there. Now, next thing is how we can hover over and see one of the parameters. So if you notice we have key here next direction and a Bridget Children So we're going to use text direction and Children. So next direction it basically how your app reads. Basically, um, this defiance your left to right and right to left, like, you know, languages And how your layout is gonna be Trond. And we can select lt are left, right. And then you're gonna say, child child is another parameter, and this is where we're gonna define what we want to show. And in this case, we just want to show it text. So we're gonna say new text and we're gonna give it a string here. Call. Hello? Flutter All right, So that's our first app. And that is it that fought for you to do so. If I stop and we build it because they have made some significant changes Heart reload may sometimes not work. And you may see that we are you. I hasn't changed because most of time hot reload only works when you have your changing within the class Like some minor changes related to you, I your extra functionality and stuff. And sometimes it just keeps your you I same if you have made several, like, you know, major changes for that to work If that ever happens to you because it has happened to me. Ah, lot. So if that ever happens to you, just kill, basically hit the stop button and start one more time, like, you know, from the scratch. So reboot are are re launched. The app. Okay. All right. So here we have our app running hand. I notice we have hello floater here. But it's not where we wanted to be. A mere scared. It's like a minimal code, but it actually is. Is at the at the left complication both be one. What? If you want it to be on the center. Oh, a z s. Oh, it happens like you know that your your floater comes with a rigid called center. So what we're gonna do is self. We are going to replace our child with that new center. Okay, I should have cut that. So I'm gonna cut it. And Stipe new center and center, takes a parameter called child, and I'm gonna put my court back in. Okay, That's Teoh Heart renal. And check out if that made any difference. And it did. As you can see, our, um our text is now centered on the page. Okay. So hope that actually gives you a good start in the next video you're gonna do is basically we are going to create ah, a new app and start exploring and learning new things about material design and application bars and stuff like that. All right, So, uh, I cool. Um, So I will actually see you guys in the next video. Thanks again for watching 13. Understanding Flutter Classes and Main Method: Hello and welcome back. And, uh, now we're going to continue our app basically to do some cool design. So this is a very basic out, like, you know, but none of the applications and real world really have just plain text. Hello? Showing on the screen consent. They have a two least a navigation part, a body and some navigation functionalities. Correct. So what we'll do is says we're already important this material. We gonna start looking at material design, basically revere, like, you know, start using some scaffold and scaffold. Bridget, what it's called that actually gives us all these functionality right out the box. So what I'm gonna do is I am going to remove all these, okay? And then I'm gonna start writing it again. Return. And this time we're gonna say new material ap have you got and this material help has a few properties. So it has titled This is the APP Title. So we're gonna say my sample, then it has home, which is a page and gets a new scaffold. Maybe, huh? In the scaffold against a apple are This is the navigation bar, the top bar that we're gonna show and gets a new app bar like some, and we're gonna give it a title in this title. It's going to be when you text, so anything that you wanna show in label or like you know, you label and stuff like that. Ah, use text for that so you can save your text and then say my first or my second flutter app . Okay, Now, there are some other things that you can do in that bar, and we're gonna come back to that. But we are going to create the populate, the next property, which is body so body and come. And this is again going to be something that you wanna show in center. So you have already learned how to center are objects in U. S. A new center and say child. But this is going to be new text and hello. Thank you. So that's very hard. Hard freeload and see there. Yep, This time report. And as you can see, it's no longer just a blank black screen with the white text. But it has a really nice, um, top navigation bar. And then there's a white background. You can see some shadowing everything going on here and the steeper. Actually, I'm going to show you how you can turn this up, but this is actually showing because we're running our app in debug mode, and that's what this is. Okay, so don't worry about that right now, but But yet our text is showing right in the center and everything. So, uh, so if you look at our AP hierarchy, we have material app at the top. It has to child notes. One is titled Number one is home. Okay. And then, uh, your home has a scaffold. Now, your scaffold basically holds a delegation. So it's it's holds an application app bar, which had the title, and it has a test. Average it inside and you're a to the same level as a scaffold. You have body and body contents, center element and next. Right. So, in material design, the body can hold only one widget, which is not what we want. So a general the screen can contain our multiple Bridget's now, in order to achieve that, we need to have how we need to use a rigid as a child which can hold array off. Richards are basically collection off digits and there are multiple way just in Florida that can hold collection off videos has child now row or column is one of them. And, um, we are what we're going to be looking at next is basically adding a role and we can add a couple off text item in there. So let's go ahead and modify our, um, modify our body and for the child instead of feeling text, we are gonna what we're gonna show or what we're gonna create if a new row, okay. And, uh, then we can say Children, and I can see it is a widget type away. And they said they were gonna define new text. And we're gonna give it, um, hello and new text world that now, if I go ahead and do a hot refresh, you can see how we have this hello world showing up here. Now I can change this two columns. So I continued to call him in. Let's see if that works. I because he it's actually working. And it's created two columns. There is hello and the result. Okay, so that's that's basically how you can create a whole bunch off multiple multiple elements within every day. Okay, now nothing. How honest. See, is how you can pass custom parameters to the digit. So your your class, my app basically is a reject. This right here is a video, as it states here stateless budget. And we can also pass parameters to this ridge It Now, this is something that is done by creating a constructor, basically, for your particular app. Now it is not military, but a common practice to declare a prompter provided inside a constructor has final. Okay, so in the next car code, what we're gonna do is we're going to create a A text in Egypt, and we can actually provide what is known as, like, you know, supplying parameters. And we're gonna see how we can supply parameters to our my app. Ah, budget, which is the popular legend that we have at the moment. Okay, so let's go ahead, and I'm gonna remove everything and reason. I won't do that because I just want to do right everything. Like from threat. That gives me more practice. So my ep and then we can extend again Stateless. We did it in here. We going to say we're gonna create my app. And this is a constructor that takes this dot Oh, next input. Now, what is that? Texans, football. We can create one if they find reject text input like that. All right, so we have final video text input. Now, this text input eyes what we're taking in as a constructor. So Constructor Brown. So we're going to hear is modified the main and say as a constructive brown. We're gonna pass text input like so, and you're gonna say next new text and we're gonna supply hello from May. All right. And it's giving the error again because you don't have or build. So I'm just gonna put back in there and really quickly type return new material app so and put a cynical in here and, uh all right, um, next thing acting we did. You need a title and title is my app, And we need basically home. And that's his new scaffold. AP bar New APP. Bar entitled, um, you text. And this is hello platter. Okay. And next thing body and this body is going to be new center and gonna have a child note, Basically a new column and this column is going to contain Children, which is going to be the text input, like so All right, so less hot. Reload and, uh, take it out. Oh, is giving some hair still say stop. And we built so we can see there's an error. There is no error. All right, let's wait for it to build and compile, all right? Just taking every time I felt. What? They're okay. So there we go. We have our hello from Maine. Printed their cool. So this is, uh this is, uh this brings to the Hindarto video happen today. And we learned how to create constructors in in your flow wrap and supplies some default leaves, basically as a constructor from the main. Now, in the next week, we're going to start talking about stateless and state full of idiots like the one that we see right here. Okay. All right. So thanks again for watching Elsie against a next video 14. Stateless VS Stateful Widgets: Hello and welcome back. And today how we are going to talk about state state less in state, full widgets now, stateless. How widgets or something that you been actually creating? Yeah, like in us up in a deal so far. And, uh, basically a stateless Bridget can only be drawn at once of like, only ones when the widget is loaded, which means they cannot be rerun unless you actually relaunched them. Eso basically will begin to, if we are are going to be creating a very simple AP that's going to show you how stateless actually shows just a steady content and the content. Even if it is something that can respond to events and stuff like that, it won't be able to. So that's what, like, you know, are we going to see? And then how are we gonna actually update it to create a state ful our widget, which is going to basically respond to your are to your events the first less jane out by creating a stateless rejects. So what I'm going to you is, uh, we have all these how we're gonna create a new baby boat and we're gonna call display type Julian vertical this check box Bali. And it's like the death. Both and then, uh, sorry, then what we're gonna do is we are going to add a new tack box. So new check box, have you go? And we are going to say value. It's going to be checked box, Have you and, uh, on change that that's the event we're looking for. How are we going to supply a function and dysfunction takes bullion new value, All right? And it's such that so we're gonna say check box value tickle toe. So, ideally, what happened is SNL. You, um you basically check the box? It should turn this true, false and false. False to true, depending upon check box a check box of state. All right, so let's real hard, you see. So if you notice I'm trying to click theme checkbooks, but it's not. It's not doing anything. And that is what a stateless. We just so state less. Fridges are basically there to display static content or pages that needs to be reloaded multiple times within an application. Alright, so that's what stateless witches are now. State full visits overcome this real deficiency off stateless and a state ful, which it can be loaded many times by calling set state. Now, this old sugar? Um, um yeah. So this will trigger the build method, this one right here, And, uh, then I would be called again. Eso basically the creation off state will visit. It's a little bit different than creating status, which is as we will be creating as you're going to see in the next cold weaken. Right? Basically, you're gonna be creating two classes, and one of those classes will do derive from state full widget, and another one is going to derive from generic state. Okay. And in every state full reject, we override the Create state method to create the instance off our state fullness. Okay, so here's how our state ful widget is going to look like So we're gonna do is that we are going to probably I'll leave this house. So I said, yeah, final Bridget text widget. And we have my app, and it basically takes this as a constructor input. We're going to create a new my app state communicate state a better, right? And, uh, this method is going to be new. My APP state Now What is this? My APP? State. All right, so we should um Yeah, we should actually, uh, we need to know what is this new? My APP State is so basically, this is a second class that is going to extend from state. So we're gonna see class my app state. However, and this is going to extend Staked my right. And then here, we're gonna say, Bullion jack box, probably you is equal to false. Okay. And, uh, you gonna say build and in return, new material, huh? Material. Here you go. And, uh, this material app is going to have a tangle. Um, so my app. All right. And then it's gonna have home again. This is gonna be scat folded AP bar New APP bar, and be very wide title to this new text entitled It's Going to Me. Hello. And, uh, then we're gonna say body, you don you center and inside the center. No, we are going to create Children. What child? He's gonna have a new column. There's gonna be a column layout, and, uh, we will basically need to create So for this, All right. And how to re access this text input. Right? So the Texan foot right here. How do we get that? We call it using Bridget. Doctor, Texan. Like so. Okay, so this is going to provide it. So, Texan put whatever have actually provided isn't. And then we gets a new check box of this fantastic control, and you say value is check box value and on change. Uh, this is going to be this is all right. So what's going on? Okay, he's in a two. Okay? Own change is going to have a function created, so it's kind of cool. New value. All right. And Carnegie, open and close. Set state. Okay. And, uh, this is going to be immediately executing function. And because check box Well, it's equal to you, Victor. All right, so if I heart reload, he and, uh, try to go back. I strong in there because we'll have to launch it and see OK. Oh, this needs to be state state full, Would it? Alright, let's try it again. My app is already to find state visit. No, the issue. Okay, so let's see what we get. Uh, I think it's still long. Team, for some reason, is taking a little bit more time than expected. So stop this and relaunch it. And, uh, gonna wait a minute and basically the bill processes triggering. Okay, so until the time is basically launching, let's talk about, like, you know, the next I don't like, we're gonna be handling eso, uh, what we're gonna be doing, that's basically we're gonna be creating or adding the app bar actions. So basically, the bar that you saw in the APP we're basically going to be adding some buttons on it. And the app are constructor itself provides options to add actions that we can actually create actionable items on that. And just like a row or column, it takes a ray of midget, which allows us to create multiple actionable items so you can have, like, in a multiple buttons show up, like on that on that action bar. Okay, um, so that's what we are going to be doing next, But for some reason, it's still looking at launching. So I feel like I should actually killed a simulator, and, uh, maybe we launch it. I guess that now remember, actually just flew her right now is still in beta, so they might be some issues here and there. And I'm hoping, actually by Google io they can actually announce Yeah, the full version. Basically, um, something, uh, release candidate now that that can be used, But right now way have. So we'll try to make this and put it in our best to use. Alright. Starting the build process again and liking Hopefully don't watch this time. Yeah, OK, I see some activity. All right. Has looks good. That looks promising. Better go. OK, so we have we have Finally, we have our app running and every can see. We have, like, you know, the state parks. And if you check and uncheck it, actually response two year changes. There you go. How nice. Okay, so that is get on now less update our APP bar basically to have some actions. So I'm gonna add actions, and it takes a collection off widgets. So what we're gonna do is we're going to use a new type called Icon, but okay in this icon, but has you property? It's icon and you say new icon. And this icons, basically you get, like, a set of icons that we can use. So let's say you use ad, Okay. Oh, are add alert, I think. And it's good. Okay. And we can define its behavior so we can say on press we are going to basically se set state. Okay. And, uh, forget to Senegal and single and then gonna stay action text if he called him new text. Okay, so this action text is something that we're gonna create right here. So you gotta say, stream action text is equal to default decks. All right, so we're gonna give it, like, new text here and now we're the icon. Button end something. Add another one. Some. That's a new icon button. So it's her typing it all out. Let's copy from here to here, OK? And paste it and then we want to make this doctor removed and you can say default. Okay, So what's we have that what we will do is we will somehow show this new value that that you have actually said So what? We're going to you say new text and we're gonna show this action text like so in that right ? As to heart, reload and try to see. Okay, So we have hello from May default texts and check boxes checked. Begin still. Object that. But look at this. We have two buttons here. Now, if I click plus, it changes to new text. And if I go it minus it changes to default text. And look at this. You also have icons available, basically all the pictures. So that means that basically, you can have, like, you know, a whole bunch of there's a whole bunch of a list of icons, and then you can use it. It's stuff like, you know, including little images and emoji that stuff like that you can actually use pre existing set off icons for your app. So, um, Kobe guys enjoyed this, would you? And in the next video, we're gonna be exploring a little bit more about flutter. So I will actually see you guys in the next video. Thank you. 15. Dart Programming Language Tour: Hello and welcome back. And, uh, this video I saw that you can take a quick tour off dark language itself. And the reason is we are going to be using dark so much that I thought, like, you know, it's a good idea that you would actually go head and learn some basics about about the language itself. Now, if you already know no, how dark works and what's the syntax and everything? Please feel free to skip to studio, because that's oh, we're gonna talk in this video, but for those who are hanging around to see it, uh, less temp right in. Okay, so I met. Um, at this location, dark lang dot ork is the official website for dark language. And the, uh, the left actually start here, and they show a really cool example off computing by and the value of the pie. And basically, they show how to import Thanks so important. Like different modules. So here importing hey, sink for parallel computing and asynchronous programming. Important math library for computations and stuff like that. And then, as you can see, there's a think await, which is a common better. So basically what do you do is you say your main function is now a think await, which means it's gonna a synchronously execute this this piece of code and it's gonna a wait for the results to come back. And basically, when that happens, it's actually gonna print that. Okay, in the computer by is is the method because it's running on, like, you know, within the await, and they think it's actually going to run on the back girlfriend. Okay, All right. Um oh, this is some. Or, like, you know, there's a traitor for generate random numbers and stuff like that. And this is how they're showing you can create a class and you can have, like, a final value, which is like a constant and like, you know, final is like a constant, but not a constant constant. And you have a constant, which is constant as the constant is like, you know that you change that you defined and you do not change ever. Finally, it's something that he actually defined it until it's actually you declare. But until it is actually defined, um, I can change it. So I mean, you can put a value. So, for example, we can say that, you know, double X and Y and X and Y values are going to be final values once they're set. Okay, so that's that's tortoises. And the develops I actually talks about, like, you know, different different patterns started falls like here, so reactive, way off programming. It's an approachable, exportable fast and its production ready language. It's here. You're free to put ground, but we're going to go into this section right here. Language door. Okay, so let's go right in and honest girl down Because this all stuff, they actually talk. I've been started Keywords. So these are some reserved keywords that you are not allowed to use because compiler, you system for their own purposes. Okay, Now, how do you declare a variable will simply create a war and you give it that name basically very building, and then you give it value, okay? And, uh, that's how you can create a war. Now there's a new diaper that's actually called dynamic. OK, so I says here the name of the type of the name variable in for to be a string because it's actually a string that we're signing. It's inferred that in a string. But he can change that type by specifying yet, Okay. So you can simply specify like this against a string name and the heartstring Well, you that's gonna hold. Now, if in object, isn't restricted to a single type, he can't specified object or s dynamic following the design guideline. And here's design guideline the day of giving basically doing do then domes for objects and time mix and stuff like that. So feel free to leave whenever you have time. But what is actually what they're saying is, if you don't know ahead of time, what type of what type of the object is going to be and it might be a different type depending upon the situation, you can actually use optic whore dynamic type, so you can say dynamic name Bob. Okay, cool. So the default value, the initial un initialized may both have an initial, you know? Okay, so even in is is no. So even the variables with numeric types are initially now because numbers like everything else in dark, our object and that is a key. So if you notice in Java are served, you have value types which are defined which are initiated how or when they're in changing their initial values, something concrete and they're not object. So aimed double float. All these are all the values. All these variables are not objects. I mean, they have their objects off their classes, but those air different. There's a capital I capital T capital F capital, iPhone camp for integer camp ability from double capital for float. But if you're using in regular aimed, then you are actually using variable time. Now that is different. In Castleford art Dark uses everything, cause you just everything as an object, which is why whenever you actually create and end, he was still committed. Hamish lives with a no. Okay, now this is the is the so that they're talking about final in constant. So if you have never intended to change very well, we can We can declare it as a final or constant either instant off using far or in addition to a type. Okay? And this is where it talks about. Ah, finally able can be sat only once. And the constant variable is a compile time. Constant, I told justice was a clear distinction. This was a clear the central and alien. But yes, the final can only be said once and in the compile time a constant basically compiled them . So const available are implicitly final. So there eventually final implicitly. Okay, and final top level or class level is initialized the first time in NC used. That is actually the key when it's used, it's actually it's actually initializing find. Okay, cool. So how to see what else? What else? State are parts of the robot like creating a final name. They give making to various. It's so you can have a final name, Bob, Or you can have final string. Huh? Uh, Babel, Bobby. Okay. And you can have constant and you can have bounced in double. Okay, How now costs keyword isn't just for declaring constant very well. You can also use constant can also create constant values and the less declare constructors that create constant values. So that's actually the key. Now, if you create, if you create a constructor that accesses the constant so it's like static members like, you know, study probably So if you have, like in a static properties, because they are compiled while they're at the class level or Cynthia object level out there if you have a function that uses static people than those vehicles have to be static . So if the method of static very well it has to be static, that's the simple distinction between them. So still what they're saying sex, same goals with the constant. All right, now built in types of these are the boots on the building types like number string bullion , lest I'll also more than Ray maps. And this is a new one. Release is for expressing, uh, characters in string and symbols. Okay, so let's see how number selects the numbers are and double and then you have Yeah, internal are the only two types that they have don't have slowed and stuff like that. So basically, they're distinct. They're differentiating between the whole number and a fraction number. That's all it is on. Then you have strings in string seeking apply, like, seem operated just like in the other language, plus up concatenation equal equal for comparison and stuff like that. They have bullion, play for gold bullion basically true and false values. Um, and you can check for is any end so I mean, some of the things. If you look like you know, it's it looks like they have inherited or they have actually adopted from generals. Come pick. It is not. Number is actually from Palestine, and I have not seen so far in any other language that uses his not remember. Okay, So lists are race, That's important thing. So how do you create it? Basically, it's create Let's in square bracket and you put families there. You can check it slanty and access it by the index, and you can compare its index. They can create a constant lift that cannot be changed and they haven't list. Mainly have handy matter for manipulating list. Danareksa collections are still listed. You can go and more about it. Um, okay, maps Now maps are object association key value. So basically they're like talking about dictionaries, and they have adopted the name from Java. So job has maps. Basically, hash map and stuff like that does actually not that that name and maps are sensationally key value pairs. Starkey and something. Okay. All right. This is how you create a map? A. And you said it's values so protected out like you know how to do like, you know, even insertion. You can just say gifts first and it's going to create. It's going to consider that first in the key in the equal part in the Valley and stuff like that basically populated for you. But forward and then we got two moons are Ronnie's, are however you are. Pronounce it basically store emoji unified Unicode characters and stuff like that. So it's a string, but but a little bit louder. Larger range office. Fred. Okay, symbols that is. Actually they knew the symbols is an optic for percent and operator are identified. Declared in the dark program. You might never need to use symbols, but they're invaluable for AP eyes that refer to identify spine names. So rednecks are bar. Okay, All right, so we're gonna have to come back to it are probably my want to live in research and symbols like how symbols are have not seen symbols basically somewhere immune so far in my floater exploration. So I can't actually talk about him, but yeah, I would. I encourage you to actually go in, do some research about it if you're planning to use it, but it's not. It's probably not necessary. So functions How do you create function? So he actually defined the return type. Give that give the function and name and create a parameter list. And that's about it. Then here were turned Taipei. Take me. Should be Should should return the same thing that is staying. It's going okay, they can have a wide certain type, but by just a meeting of a turn type And, uh, effective tournaments still works if you'll meet. So I still works the film with dykes taken still recurrent things. Now this is actually inner in other compile time programming languages that you have to have a return type specified. If you're not, if you're returning and inadvertently any centric turned avoid. Okay, um and this looks like functions are just expressions. Okay, so this is basically, well, like a closure strip years, like just going to call fat arrow and you create functioning in you created Pharaoh and give it like a one liner expression and that actually relished on and get those those back . That's how you can create a function in the line. Okay, optional Well, use optional. Browder's basically optional parameters are something that that you can create and calling . You can specify named Browder's using ground and name value like this Set bold, hidden are you can say string from string message String that and, uh, and it's basically going to be just like this optional. Otherwise, it's gonna be You have to go. You have to give the names off the parameters. Right. Uh, has continue. Okay. The default value. So you can define default values for your parameter list. And you can say that basically, the default if user does not provide that valued. And here's a default value. All right. Others of application note old Gordon might use Colin is two people sent in default value, new parameter. The reason a surgeon the only coldness supported within the parameters that supported likely to be replicated anywhere when you used to use equal. Okay, so So they're saying, like, you know, here used equal step making colon because they are actually gonna get rid of it in future leaders. All right, um, so, uh, X example sets the default value for the positional parameters. All right, So you just a ray and sex and descending devalues for these, okay? And, uh, and this is how he can use this, which is very clever, actually. Define from and, uh, and like, you see this and that and, uh oh, this is the one, actually end. Bob says just a taste, But it's gonna actually return all these things and it on the result. I main function main function every half every app, like we discussed, have to have a main function. And that's their your program. Execution starts. So this you can create, um, infection. It means can take basically input. Like, come on, land out. Doing so our arguments that he provided, um, sort of like this one right here. And, uh, that's sexually Yeah, that's it for me. That's actually how I can pass custom valleys. Come on. Okay, um, functions are first, last optics. That means everything is striking origin and function. Most thinking past function around. You can use functions and the closer and you can have anonymous functions and stuff like that. There you go. I start with a functional said says I create hand. I think this next Run it and Shadia gold right here, right. And a logical scoping. Basically, it's gonna talk about like, you know how your A levels have scoped when you create them at the global level, they're actually scope at the global level. Babel sculpt at the block level are actually limited to the scope. Assume is that block ends the variable existence ends there. Okay. And, uh, closures and return about us. Okay, so that's actually returned. Ready? You can simply return it. There is no return. Basically, it returns. No, Just like See, um, And two, there's some of the operations. Okay, so you have, like, plus plus minus minus, and you have mine. It's not in all these Exxon operators that there's a much deeper creative, so like multiplication division en percent, Andy Shen and all these things. So basic met as our printer. Sorry. Useful eras all. And since I use some of the expressions, parentheses actually improve, the readability as well s basically creates the distinction, Which mean, like, you know what's gonna execute it first. Well, if you don't an upper two presidents, it's gonna taking place, which is Yeah, they should be talking somewhere. Yeah, they should have operated operator President's list somewhere. Which one takes the president? So what? But usually I bowed mass is the is the key. So look it up, Operator. Presidents, you're gonna find it. Okay? They are athletic, operator of speculations, infraction and all these things they apply. So they're pretty pretty common like in other languages. Big technique in pretty increment, post increment predicament. Post commit dusters, Xiang, it's showing here. And, uh, then you have equality, so you have a legal not equal test greater than equal to listen equal to Okay, I think in a playoff teeth, as is the typecast basically so casting your variable for one to the other. So let's say you have an object. You know, it's in type steak and say passes. So this object like name as and that's gonna be actually typecast to end It is absolute turns infant eighth type that object. So they have an object up type and FC is a object. Is independence gonna return true or false? Other ways that you knew what time it is. And this is like, you know how you can say if e m. P is a person, so that's a check. Basically, this they are showing. So this is the example that we're using, like in case, but this is showing you the class. If employee is a person than Brenda, first name, then it would know how to cause that. Okay, um, now these air, let's talk about some assignment operators, some default values and stuff like that biological operation and and are automatically short circuiting your else some big lies operators conditional. So yeah, condition like if else. And it also actually supports the try Conditional block where you have, like, a question mark in the colon and you have the local double question mark. That's all. Okay, so I think those are, like, most okay force which writing that looks like in exactly thing. So you have if statements regular, you have a for loop, just like her regular other languages. And I have fallen in so for readable in collection. And that's how you knew for in your treat. Or and then you have a while and do well. That's pretty much the same as other languages switch cases exactly saying there is no different parts that were here asserted something that you assert to disrupt a non execution sexually. It's good when you're debating yet being and actually assert things to make sure it is what you're expecting. It s night, and it throws exceptions like in our throne and catch them with the try. Catch, block, dry, unblock that sort them site, try on catch. So this is the exception they're talking about. And finally, is the block that executes every single time. Um so basically chills. Thank you. How you can actually close your connections and stuff like that, I think to talk about classes and received an example. Diego. So this is a class. They're creating a point glass with three variables. Number X, Y and Z. And they're cutting class putting like, you know, that you showed class in the main and asserting that if those venues are set or not, Okay, this is how we had a constructive for a class that this is how you create making class limo ables and stuff like that. There's a default constructor that has created out. Might be if you don't create one. But if you create one than that's actually the one that's being called and there's a little bit of cold here that actually shows you now the show in hurting so he can actually inherit from one class to the other, and you can call it's super methods to basically initialize those, uh, property hinted in the super classes. So I guess that's the mostly most of the common functions. So common things that we're gonna be focusing on. But I would actually recommend going through the whole thing and just exploring it out. What? We have looked so far, it's gonna be good enough for our exercise. But like, if you want explore more, I would recommend, actually do explore to do more things on the flu, understand? Because gonna be using most of these. But what we have seen so far, those are going to meet that think that we're gonna be looking at an out of focus keep my focus on the floater site. I just wanted to show this for the completion sake. So that's why here you're looking at this, But outside this vigna accident mostly talk about flutter and how to do things in floater. Okay, so I hope he hasn't during this video. And I will see you guys in the next video. You 16. Create First Rich UI App in Flutter Part 1: Hello and welcome back in their drink. Now we are going to be starting basically starting to explore flutter from scratch. So in the last section, we saw how do really quickly create a floater nap. We also saw how dark programming works. And what are some basic language? Constructs off dart are Okay, so starting from this video, following sections are mainly focusing on flutter and basically talking about flutter and different things to do or different ways to do and floated basically create you I and create a softy APS right in this section of what we're gonna be basically exploring there were going to be exploring our basic structure off letter up. Are we going to be learning how to find an ad dependencies over packages we're going to see ? Ah, heart reload on How does heart heart reload actually loads the the changes really quickly into your device? We're gonna also implement state full reject, um and we're going to see how we can actually apply infinities calling a basically in for tea schooling scalable list. So we're gonna create that and we're going to create a navigation to the second screen. So master detail kind off like like a view. That's what we're gonna create and last part Fast least How are we gonna learn how to change? Look off the app using seems all right. So, uh, let's get started. I have the I had the last how version that we were working on open and actually and I have a few things, so I'm gonna actually remove that e I'm gonna show you. Basically start from scratch. Okay? So let's just right maimed, so avoid mean This is our entry point, and we are going to use shorthand a potion, notation and guess they run app and my new my app. Now, we haven't created this yet, So this command throwing her But that is fine, because that's what we're gonna be doing next. So we're gonna create a class called my Hap, and we can extend state less widget, okay? And hear how we are going to be overriding built. All right, now then, this gold we're going to return material happen, and, uh, then we're gonna give it a title. Welcome. Do letter. Excuse me. And then I'm going to say home and we're gonna give a scaffold to home and Now this scaffold is going to contain at bar, which is going to be new at Bar. And this is gonna have a title on your text. And the title is going to be welcome to thank. And then we're gonna create body and this body is going to have a center element in Central is gonna have a child with new text and say hello like so Okay, now list. Um, so you and see if there's any problem, okay, Can find so cynical in here, and it's good started by you. All right? I have my savior open. So it should basically launch the app in in it and this building. And, uh, here's he can hear you see on the locks on. Okay. And you can see what's going on here. Okay. All right. Now, so we have welcome to fire. And how long? Floater. Okay, so some of the things how we can talk from this example. So this example creates a material app. Now, material is a visual design language that is a standard specifically on android mobile devices and web sites that Google creates, and Google actually promotes material. Sign on has bean. I think it has been launched. It was lying setting couple of years ago or something. And Google has changed pretty much all of their content and Web sites basically to follow a little sign. It is actually very it's based on, like, flat design. But, like, you know, user infractions are shown in a animation way and stuff like that. So I recommend if you want to know more about material design, um, you can go ahead and Google and find more information about it. It's really interesting. We can read if you know more about material. All right, Now flicker on first, which set off material widgets are built in. Okay. And we're gonna be seeing some of those. The main method right here. It uses this fat arrow notation. They call it fat arrow notation, which is a shorthand for writing. One line functions. So this auction we could have I think we convergent like this and we could have done something like our doesn't type. Don't think it returns to see the problem. Constructor, It's gotta make up. You don't draw. I'm sorry to say this. I expect a unexpected okay. And if you do reload, let's see if that works. Yeah. So it is working. I'm gonna put it back because, uh, I like the other only a little bit better, So Okay, cool. Now the itself extends thes stateless budget, which, uh, like, you know, some most of the videos in flutter are basically stateless, own or state full time. You have already seen the differences between those two, huh? In the previous examples enter basically, almost everything. That its president and Florida is a budget that includes any kind of alignment. Any kind of branding or any kind of lee out. So everything basically is referred as a digit. Okay, now, scaffold rigid. Right here, um, is from material library. And it provides a default app bar basically at bar and its title and the body property that holds a digit tree for the home screen. Now, Bridget sub tree can be quite complex, and you can actually build nested elements and stuff like that. And we have seen one example in one of the previous apse where we created Rose and added number off Children onto that crows are number of pictures down to that rules. Okay, Now, Richards main job is to provide this building method that describes how to display the ridge. It in turns off other lower level Richards. So that's why you have. Whenever you create class, you always have. You always write it built and he can write other functions. That stuff, it's all but built, has to be there. If that AB is your main entry app. Alright, if that is the one that's actually taken care off Executing and displaying all your content for the mobile app that build has to be there, OK, and basically the other stellar distinction it if it extends the stateless, visit your state full of idiot, then it has to have a build. If you're creating a regular class, you don't have to follow the same pattern where you're gonna have You're not gonna have basically a build. You can create your own little function. It's not gonna be seen as this build function right here. Okay, now the widget tree. How, for example, out this case consists off a center reject that contains a text child now center midget alliance. It's rigid sub tree to the center off the screen, which is why you see this flutter. Ah flutter I hope for all right here in the middle of the screen. And and, uh, basically, you have center, a limit end and then child and then text wrapped into it. Okay. All right. And now what we're gonna do is that we are going to learn how to create how to include dependencies off external packages, how to basically bring or import external packages into your project. Now, um, Flutter uses a different city manager. And if you go in bub Specs, Doc, GMO pile, What you can do is under dependency. He can define a song. Dependencies. I have added this CSS color one of them. And this up this scary. It basically shows that we want anything higher than 1.0 point zero. Okay, so you gonna do is we're gonna add Mother one. I am dishonest English and English words. Basically, I would coercion higher than 3.1 dot zero. That so it's gonna basically a salon test. English words package contained, if basically open source package that contains a few 1000 off English words. Blessed some utility functions. And how do you find how these packages now, How did I find this package? Basically, if you go on bub dot darkling dot org's slash flor, this is there. You can actually search for further packages in If I search for English English words, it's gonna be right here. And this is basically how it looks. Seek and see the usage, and you can see the change log. You can see the example and that he can see how basically can install it. All right, so the benefit of using original studio gold is essentially save. You're your code is going to basically call this floater package cat, and it's gonna load old independency basically is gonna make them available for you. So uh so yeah. So basically, this is how you will you will know. And this is how you get the no external packages included in your in your project. Ok, cool. So next thing we're gonna do is we are going to import suspect now, So we're gonna see import, and, uh, it started back into like it's suggesting. Okay, let's say English. Underscore words slash english underscore words dot dark. Okay, there you go. Attack right at the completion and gonna put a simple now reason the screen lighten is there going school Reliance there because we're not using any of the functionality for death, which is light showing us that air, but, well, we're gonna just use it right now. So this copy this and I'm gonna comment to slight and going to say child is going to be new text, and, uh, we need some text here. Now, how do we get a written index? Basically, we go up top, and we say final final word pair and we say new word, Pan, We don't have tapped a pass any Anything we say got friend. Okay, so this is going to get us a random next game. We're going to say word hair dark as that's a camel case. Our baby has Paschal case, all right? And if I if you go ahead and reload, are happy, um OK, so definitely is gonna sort. And I don't because hard reload may not work because we have added some dependency. You're Abney's to basically include those dependencies into your project and basically in your a p k or I be a file and then lose it again into the into the simulator or device. So that is why we were actually getting the better. So hopefully how if we do a relaunch, we should be able to see are changes. There we go. And he have grain man already showing up there. Okay, so that is a example. Now it just do a hardly time. You're gonna see it Basically generates a random next for us. Okay, so that is basically how you can include external libraries. Okay. Into your project. Now the stop book. A state. Full widgets without state ful. Stateless, but just a little bit. So maybe some information might be repeated here, but let's talk about those. Let's make that that distinction clear. Okay, So stateless. Stateless widgets are statelets. Widgets are immutable, meaning that their properties cannot be changed. So everything that defines a stateless which it all the values are final now. State full. Did it maintains state that change during the lifetime out of Egypt. And we saw that with the check box example, But we're checking it off. It was showing a different text and was showing the text box being changed and state being updated. Okay. Implementing state full ridge. It requires at least two classes. So one is a state. Full class state, full class. That creates an instance. And 2nd 1 is a state class, A state full reject class itself is immutable. But state last persists over the lifetime of a midget. Now, next we are going to basically we're gonna go and create some state ful rigid how we call it a random words. And we're going to create a state class for when the world state and the state will eventually maintain and proposed the favorite world Bear for the midget. Okay, so, uh, let's add a class here. You call this friend Words extends state full. What is it? Okay. And then how are we gonna say create state and it's gonna basically all right, that and it actually expects a return really returned in the random words state. Now, you don't have that yet. And we are going to be creating that next protector. Discreet class, and we'll say that extends state. I went when them worse. Okay. And baby got. Now, um, says it cannot be actually, so the return time isn't same. Uh, basically. So you can say it's, uh, extends heading. You can say the same thing here. We're gonna say this didn't go missing, Conquered implementation for build, like said how we need a somewhere. We're gonna need a build. Basically. So this is where we can actually define that seven gonna state build and just eight enter so we can actually get the default implementation. And this is the final word. There is equal to new work. They're not random Excel and standing s a return new text. And this is just going to be weren't better dot has Haskell case. Okay, so from the Afghan neutrality up, we no longer need this. So we can actually they move that and, uh, here we can say instead, off text, we can say we get new random words. Let's try to reload and see if that does anything. And, uh, if you notice, our results are still showing up. Um, that means that our implementation actually hurt so and is giving us different, different words here. So this is how you can see, like, you know, we can combine. Ah, whole point of classes. Two teams of from shouting to be created. And what you've done here is you have actually created. Basically, you have created your own rigid here. And then you have used that which it. So instead of using text, which is like another rigid you actually creating your own started using that. All right, so that is that is about, like, you know how you can create your own reject and apply those regions in place off like standard. We're there to create to achieve some kind of functionality that you want. Okay. So, hope. I think this is gonna be a little bit more clear to you how to basically create your own in the next. How video? How we are going to be weird when I start looking into how to create infinity scrolling list for you and we're gonna go from there. Thanks again for watching. I'll see again the next week. 17. Create First Rich UI App in Flutter Part 2: Hello and welcome back and investigate. We are going to be continuing to build our app. And basically, in this video, we're going to be starting to look at Infinity school Lubo list for you. Okay, so we're gonna keep scrolling the list for you, and it's gonna keep adding items and we can scroll to the infinity. So Right, so that's what we're gonna build. So let's start by creating a new variable in our state random warrant state, and this a boat is going to be called. I know. And we are going to be keeping it this internal, basically a pirate available. So, um, underscore basically defiance and enforces the privacy and in dark language. So that's how you create your private label. Okay, so you can say so Just show, All right. And we're going to say a word air type away, Okay. And then we're gonna create another one, and this is going to be another the final, um, biggest fund. Okay. And has given it a const text style of it. And text travel takes fund as part size at this parameter against 18 points. Okay, now, the next thing that you do, basically being added function called Bill suggestion to this random words state class. And this method is going to build the list view that is going to be displaying the suggesting word bearing. Okay, what is list for you? Well, it's true. Class provides a property for item builders. It's so it's basically a, uh a A table of you can think off with a bunch of rules. That's what it is, I guess. An android? Yes, sir. Him in various called this for you in higher s case. It's called a table of you. And that's that's what That's what you're gonna be creating and basically has item builder , a factory builder on a callback specified as the anonymous function. Now, two parameters are passed to the function, the bill context and the role it aerator. Now it aerator begins with zero an increment east time. The function is called. Um, it's called once for every distant word bearing. Okay, this'll model allows three suggesting list do grow infinitely as the user schools. All right, so let's let's continue. So basically really good really is in the budget. Um, this, um so we can actually create you better. Uh, and it's gonna be again with it. And, uh, it's going to be build suggestion petitions. You're gonna say, return new list of you and this list of U I's gonna call this builder function, okay? And builder takes few things like padding. And yes, they cost on. This is basically batting around just like, oh, strings, like in a little bit, like, you know, spacing between the edges and stuff like that. So edges instead, all 16 points, you know? All right. And, uh, then the next matter is item builder. And this is the ability to your doctor about which is it sex and anonymous function, And actually, it rates over so context. And I, um, and since function and have a gonna see if I a thought is odd. Okay, then you get in return. New defied. Okay, So this is me returning a divider, reject as c e o of a branch sees right here. Should be good. Okay, Now we can say final index is equal to I, right, but to so I, uh, Tilda divide to is basically I by two and returns the indigent result. So? So for example, if you do, I want 2345 and becomes 011 to 2. All right, so this calculates the actual number off world bearing in the list for you minus the divide . A legit. Okay, so we can say if the index is greater than equal to underscore suggestions that lind then you can say and score suggestions. The end. Oh, and be like, get art, generate word pairing. I don't take 10 again. Generate. 10 were appearing at this time, and, uh, then we're going to return this Peter underscore. Build well, score suggestions. Oh, Index. Okay, so let's just give it. Yeah, that a cynical And, uh, now, basically, if you notice that there's a hair that build grow and how Benadryl function is not going, it's still gonna basically create that, um, this index is starting an error because expected to find how, of course, soup does not have these break brackets, but start does in every other language, usually does. So okay, against create dysfunction from feature. First you go see with it, and it's gonna build grow. And, uh, you know, can the word pair pair post It's why. All right, And then he gets a return new list dial, and this list style is gonna have title. And the title is going to be you new text. And, uh, data is going to be bear dot has Pascoe case and style. It's going to be underscore bigger font. Okay, so that is that. Now, one thing that we wanted to is how we're gonna go to our random word state. Oh, uh, not Forget this. And let's go to, um yeah, the random words state file. And basically, what we're gonna do is we are going to be, uh, returning. Where is there a bill that's our together? Okay. Saying the bend context, we're going to say they turned its Hey, thanks s a return Return. New scaffold. This scaffold is going to have a title. Why is there okay? So return New cap hold. I fell. Oh, at a bar at Seidel. Sorry about that. App bar. Okay. Inepar has title, and the title is new text. Um, name generator. Okay. And then it has it has body, and this body is build suggestions. Now let's update the build method for my app and we can remove the scaffold in the Akbar instance for my app and and then we will manage that. Using random words state class, which makes it easier for us to tease the name for the route as it appears on the AP are as how the user never gets from one screen to the other, and that is going to be in the next step from going to see it. Okay, so in the my app bar, um, what we can do, it's how they gonna see your material. And the title is going to be the name generator, and then home is where just got and right here to save you works. Okay, so let's hope everything is getting in this. Please run and see it. Okay, Cool. So you can see you ever less showing up. And if I keep schooling is gonna keeps going, and it's gonna keep generating. Do you names for us. Okay. So yeah. So that actually brings us, um ah to the end of this video. And as you can see, we can actually, we just created a very cool, scalable table view askew. Call it in your IOS haps in this fuse in your android eso in the next video, we are going to basically creating some adding some interactivity. So we're gonna add some capable icons and on the metro And when user actually tap those, we can have marked them as their favorite name. And then we'll create another page where we are going to basically show all their favorite names and stuff like Okay, so hope you guys enjoyed sister do and I'll see you guys next video. Thank you. 18. Create First Rich UI App in Flutter Part 3: I go back and, uh, we're gonna continue building our app for the names and real. And in this video, we are going to be adding some interactive lee to the APP. So be we're basically going to create a little hardships next to these growth. And when user actually taps on those, how are we gonna basically say them as there favorite? I said, let's get started. Basically, first thing we're gonna do it's every going to go to our random words state class. And I guess right underneath suggestions gonna add a new property called Final Saved. Um, and this is our same set. So we're gonna see a new set. And I said, is a pipe word. Yeah, and you slide that. All right. And then you're gonna go to our builder row section right here. You're gonna add the variable here. It's well, final, already saved is able to underscore same that contains there. Okay. So you can check if it contains repair. I'm gonna put that in already saved oflife, and that we're gonna do it's This is the place where we're generating this new list and are less actually essentially. So our text ends here. That's a new text. And you can say trailing here. That's the trading optic. And we can see a new icon. And I can't are another set of widgets that actually provides some beautiful icons built in . So you don't have to, like, you know, import images and stuff like that. You can simply call this rigid icon. And you can basically provide some folks Chaldean and those icons for shop, so already saved her Neri condition on that, you can say I can't dot favorite different. Otherwise Icahn sexually. So I comes now and dark favorites if and icon dot pay for it 100 score border, which is empty icon, right? And then we're gonna say I'm gonna also defined the color on ST already saying we're gonna check it over, and we're gonna say color, uh, colors dot Bren, Otherwise we're gonna say return No. So used to default color. Okay, so let's try to heart reload and see if we have something. Well, we definitely have something, and we cannot for some reason, we cannot interact with that so we'll see what is going on. Your break. Um, I can't stop favorite home and saved so He's a trailing new icon and, um, and then say Same in color color's I'm afraid that's the color property. Old safe cushion are Yeah, I still looking. All right, Uh, and OK, so I see you are the property that I can't steak. So it takes a name and extraction size and color. All right, so it's just past, not this worldview right here. I am, actually. Really? Did you just passed? Icons stopped Favorite stop in build. Dozen gates. Um, because what we're supposed to be seeing is empty heart shapes. They're supposed to be seen, but it looks like there's some issues on there. Still showing your question, Mark, Um, hi. That was very strange. Should be. Yeah, it's a new training and training is new icon, and, uh, it takes already saved question because I thought I say faith. It's not smile that ends. Just do that. Not add for icons, not I'm over. So let's check these out. Let's see if neither Okay, so I have thes Oh, you know what? I think I know the boat. So if I go, um, in my previous project, when I was actually experimenting this I said using material design false. I need to turn. That's true. And if I do it right now, let's hope Oh, this isn't build. So because this is a change, how you have to actually start building, and it should show because of what material design was disabled, That's why did not show the correct I got. So I'm gonna actually put her from Sheltie back here for Favorite and, uh, people all right. Boerner They call her a is equal to already. He saved. So the question Mark Kolner read all this stuff, right? And far. No. Okay, so let's do a heart reload that ago. That is my favour. Now, if you notice how we do not have interactive d just yet, So that's the next thing. Well, you will be. We will be doing I will be providing the interactivity now. In order provide the activity we need Teoh set state to notify the framework That state has been changed. So we can do is, uh we can say right along this you can say on tap. So basically there to safety is on on that or on long press. So are you gonna do set state and, uh it's set. State is a excellent, like, anonymous motion in this function. Basically say, if already saved. So if everything is already saved, then they say saved that removed pair gave you a double between between them as saved dot and better. Okay, so now if we do a heart, we should be able to step on this. And look at that. How are hearts are changing its color and we have a bit of animation off the selection that is going on here. Okay, cool. So we have added now some interactivity into this. And now in the next video, we are going to be exploring how we can navigate to a new screens. All right, so hope you guys enjoyed this video. Hubble to see you guys. Next idea. Thank you. 19. Create First Rich UI App in Flutter Final: all right. Hello and welcome back. And, uh, in this video, how we are going to be building a new screen, and we're gonna be never getting to that screen to see all of our saved. Basically favorite font names. So how what we'll be doing? Basically, we're going to be using something called Route R O U T route in flutter. And what is rock? Basically, route is a way to navigate between two different places. So we're gonna be learning how to never get between the home run and they knew. And the new route that you're gonna create. Um, and, uh, the navigator means a stack that continues APS route. So a whole bunch of routes that basically just holds and pushing her out onto a navigators stack basically updates the display to that rough. So basically, just bushes s. And as you push a new vote to the navigator, stack it. You're actually called into that screen. Now, when you pop Iraq from the nephew to stack, it actually returns to the previous screen. Okay, So what we're gonna do, basically we're gonna add a list. Aiken to the EP are in the build method for the random words state and really user is going to click on that icon. The new right near out that contains the favorite items is gonna be pushed to the navigator and it's going to display the icon. Right? So you're gonna know what we're talking about. Estimates we start building it. Okay, so let's go. Random words. State right here. And we're gonna go to our scaffold. However we are creating are skeptical mattered. So build suggestion, take. We have this in and we have a title. And them this app are also contains something called Actions. Okay, and actions is an array and basically, how we are going to providing some authority into that. Okay, So how what that social the would be? Hey, it's up. Basically, we can say, um, new, I go on, but, um, so we're gonna have a have a Nikon button. An icon button takes icon. So we're gonna say the icon that we need is a new icon. Um, I don't stop list. All right. And yes, a on pressed for a tad, we are going to be doing something now. What? That something is gonna push. Saved. Aha. Seven gonna be uh, calling this push saved method numbers. Well, it's not there yet. Hand. We are going to be just creating that. So let's clear that avoid on this card Bush saved. Okay? And in this death, basically our error should go away. And this is we can say here it's a navigator dot off context dot push. And we're gonna right before salty. Right. Okay, So what we going to basically, in this personal charity, we're gonna say new material page proud. There you go. In this material patri out how we are going to say a even to call a builder and, uh, this builder, it's going to take context. Uh, it's an anonymous function, basically, and U s a final by, uh, tiles he's been called to underscore steamed that map. This is a have a function that actually startling with your wife's, and it's gonna map for each pair. You know what's gonna do Basically gonna say, return a new list tile for this map family. So whatever you've passed a pair on basically created a list of value out of it with title as new text, like so and basically the new Texas going to prepare dot as asco case spent style underscore. Big fart or biggest fund. Okay, let's put a single in here. And, uh, once we have a right Sophia piss it closed. Okay, Um, then we're gonna basically divide this. So s e r. Texas clothing here. Our list is closing care chemical. Um, And then we have this closing care, so this is gonna say, defied, divided is equal to list Tiote don't fight, it tells. And in a pastie context and tiles two titles. So okay. And you call that to list into it. All right, now, basically what we're gonna be returning. So do this. And, uh, but we could be returning from here. It's gonna be returning a new scaffold. And at a bar seven are the table has in the text. Hey, uh, and, uh, saved. It's a chess chance and gonna have ah, content body. And this body is going to have a list for you. So the Children do you find it? All right, cook. So once they have done that, what I can do is we're gonna do hot reload and taking out. We have a icon here, and as you tap on that icon. We have a whole for items that we have saved here. Okay, so he and more items, unless that's actually move and just add one and just click on it. And then we go, We have jazz. Look, and again See, here we have selected jazz. Look, how cool is that? All right, cool. So last thing, actually, we should before we wrap up this one. Yeah. Let me really quickly show you how you can changed it seem for the app. So if you go up to your my app stateless. We did right here. How we can actually said team right here, I guess A theme. Um And this is going to be new team. Um, data? No, right. Team data? I think so. And this team data, we're gonna say primary color. He's going to be colors. Don't wait. Good. If I do heart reload, write them. There you go. You have just changed the theme and you can actually try out other colors like orange, orange exit. OK, do hot. We load and then we go. We have hot basically our index int. So as you can see ham, this is like super cool and very, very easy to do things in flutter. And it actually shows you a lot, many ways off, like, you know, doing things. So I hope you enjoyed quite a lot in this by creating this app. And that's in the hands on approach sentry gonna be taking in future videos, that's all. All right, eso just to wrap, like you know, this what you did in this video. Basically you created a fully functional sort of app from ground up. Okay, you wrote a dark cord. You leverage some external libraries of used hard to know to basically quickly see your changes in the rial running app implemented state full video and allowed interactivity. In your act, you created a lazy, loaded infinitive scrolling list which displays less views in less styles that I created route and added logic to move data between route, home route in the new about right, he also learned about changing the look and feel by using things. All right, so hope you guys enjoyed how this video and I really appreciate, like some good reviews. So please, please, please give me some good reviews and what I'm gonna be doing. Basically, I'm gonna be updating this content. So I'm gonna publish this, and I'm gonna actually creates the more content and keep uploading and keep updating this course. So stay tuned, and I will be providing Maurin more updates. Flair is news or takes a little bit time to do a lot of research. And I won't actually do a whole lot of research and then present to you guys a ready made solution so we can actually learn. Learn together. So that is what we are going to be doing. All right. Thanks again. And I'm gonna actually, uh, update the content very soon. So for now, I will see you guys in a few in a week or two. OK, go. Thank you so much. 20. Using Themes in Flutter: Hello and welcome back. You there today. Now we are going to be looking at a team saying flutter. So, basically, if you if you want to provide shared color, sir, foreign styles throughout Europe, we can take advantage of teams. Now, there are two wasted findings How you can do it up wide or you can use a thin budget. Basically, And this happen, we are going to be creating something called, uh, we're creating APP scene and basically team data and then now basically color basically provide a color scheme. You are All right. So let's get started. I have empty your project. Open hand on in court. Another package. We're clever slash foundation star go. All right. And I have material dot dot Already important. A skater Mean gone to severe. You're gonna be calling our ap basically running. So if you point my abs, it's not clear yet. Let's go get the class my stems State Klis yet something. And then what will you do? Basically override the build, so don't No. And here you go, you a happening It's the name is today and then we're gonna return. Uh, basically new material help and we're gonna try to title. Fine. It's happening, Mr Deline. It's a thing he knew seem data. This is that you can actually use pre defined things like dark fall back light and no, but we're going to create our own. So you say brightness is equal to Oh, brightness are dark and primary color. Well, two colors dot light blue with a shade. I mean, you can provide how much lighter you want, and I'm gonna use 800 valley here. An excellent color. It's another one you are dot i am 600. Okay, Clearly. Okay. And we're going to stay home. Is creating home page for the new my home. Gonna create this class in a minute and what we're gonna do basically, by this I see you do that title. Next thing you can do is we are going to be creating this class gold by called page skins. Stateless. Wait, It Okay? Yeah, I think that's a string. That's your title and my home page. Um, call the constructors key. It's clean. I required. They start that gold. The title is a choir with this. All right, it's a super super. That's exit is something that they have to call the super off to stateless, which basically good handwriting. So for that reason, and then from here, please building gold turn you scaffold and this bar bar and at bars title text And it's gonna be tidal Hey, and it's cynical, enhanced. And we can say, you know, body the center so underlined, channeled Dating her. Yeah, Koehler down there. Seen dark off context. So should go that context dot x and color Gonna get the X and color that you have to find here and here. Actually. Get that. Yeah, I was a child. It's going text. This is going to provide it a scream show, text grade, background color style is off context. Yeah. Cut. Next thing. Okay. Now, um, just for this one. For now, I also want creating button just to show you like floating action, but that you can create with very, very easy, So allergies are warnings. So worried, by the way now, right, it's filling. I think it's gonna launch now. Very cool. Soon as you can see, we have we created the steam their priest to find that retard. I'm gonna give finally colors to blue. So it's like number. And then we give back on core. And that Babylon that used what container? Um, right here at X and color. And then we print our text on that with the same color texting and which is, like, now gonna reward it like toe white color, basically to contract said, And, uh, and creating and creating a extra The background, Uh, look at something. So that's the one most thing actually take. Yeah, float. But And I'm defined that so impotent floor action button right here and continues Uh huh. And this is the example of, like, you know how you can have seen basically apply thing least park off, like off your APP context. What's one more time? Copy with Can you copy the X uncover se colors dot yellow. Then that's a child. It's morning action, but all right, they're gonna press you say no. Anything on breath and style is going to be, uh, an icon from icons. Not Okay. So it's hard to reload and take a look. So there we go. We have this button you are putting weapon that we have created. We actually go over it. Nixon color. So a safety would have. Like, I wanted a different color, like deal. Thank you. All right, cool. So that was it for, like, things. And I hope you guys enjoyed basically themes. That is something that that you can use to create. Let go a common looking field in one place. Do manage all your colors and styles. It is very, very helpful. And, uh, basically, I am acquainted, Like, you know, if you if you're using more check out thing did, uh, Bell commendation just to get more idea. But yeah, this is how basically we can use things well within our up. I hope you guys enjoyed the studio, and I will see you guys in mixing you. Thank you. 21. Create SnackBar: Hello and welcome back and dad today how we are going to be looking something called Snap are e entao. Well, what is the snack bar? Basically. So when you create APS that follow material to find, basically, if there is a, like, a short message or alert that you want to give to your user like some some action they have taken. Basically, I feel dog a form and saved successfully. Then you want to show them on the limerick saying, Hey, actually, uh, this will save or something like that. Right? Um, so in those cases can you can show a snack bar and with the snack bar, you can also give some excitable buttons and stuff, and they national All right, So the steps to create snake bar are raising you create a scaffold, and you basically display snipe are you provide in the actions you wanna be? Take right. So in this example, we are going to be building a complete example for a sniper, right? So less get started. I have a the import and the package already included, and we're gonna create my abs are gonna actually call this difference of the college a smock far. Okay, uh, this was our class of again as a class that our demo sends state less. Was it and se or I built that turn todo Teoh. Like Is that told? Gonna create home page. And how big is gonna have a scaffold gap Old basically out. Are you have? Yeah, this is kind of in the text. Thanks for. Okay, well, I but body now we can we create a new class? Oh, and, uh, we'll actually use that. So snack or back where we can actually segregate are responsible to do a different class class us neck. Our page extends date, reject, build one. And, uh, well, we wanna return. Return is new center. Uh, his child You raised mutton own press in the safe. Eso basically, uh, we're gonna put a button on this. Yeah, Dad, because they when you press that, but you wanna show these more. Okay, so you say fine. Lisnek bar, far equal to you. Snack bar? Yeah. Can say basically, I can supply some content. Deco too. Text. But some eso no se. Okay, then action that this is the action. It's a snack bar action label. Undo all right on press. He connects to the, uh, do something here to well, this exam believer. Thanks. Simple in here. And, um, you have here going here and, uh, right here. I say scaffold. Um, not on text show. Yeah, I see little here. And, uh, as a child who ride a child. Basically text show far. No. Right. Okay. Yes, actually. And take a look. I did. Are, um basically, what's gonna happen? That's the shore page. You know that base? We're gonna have a, uh, a button, which is gonna have text show. Thank bar. And we need click on that button. I'll begin the show they asked for at the bottom, and it's gonna have a, uh uh, under wooden other side. So let's see. Have a go. He had, uh, wait for a few minutes and you can actually click on undo, and they're making up perform anything else? All right, so that's it for this but this temple. And, uh, I'll see you guys in next video. Thank you. 22. TabView and TabBar: Hello, Mac. And how we are going to be exploring tabs. So we're gonna basically create tabs within our within our app And as, uh, like, you know, you may have seen this is a common pattern and take a touch. We makes your navigation very, very easy to have multiple tap. And that way you can actually segregate your content based upon different in Houston styles . A lot of text, Lee. I use a tabs quite a lot, so it makes sense. Oh, to have one in the floater. So what we don't do, basically we are going to be first creating a tab control. And within that type controller, we're gonna basically how to find how many deaths there going to be and then create tabs, and then we'll create content for each other's tubs. Okay, so, uh, let's get started. I'm gonna create main function here. Just so I'm to the point. Say one app. No tab bar. Come on. The Cold War class basically tab are stands state list. We don't. And then next thing you need to do with you, Okay, down here in return material have okay in this material. Probably gonna have home and this is your home bitch. Now, out for the top controller we can do. Is they even created your own tap controller then? Or he can use default that controller, which it? And if you use default, that control religion basically gives you simple options now, bad since it's already created from top controller and it actually gives you, like, you know, some abilities, basically, how you going to find? Lengthen the child in evidence so you don't have to start from scratch. OK, so that's what we're gonna use me as a new default dab told her that and, uh oh, here. We gonna basically give it to let how many taps you want. So I went to three. Then you're gonna say, child, and this is going to find out of step old. It's a bar is a bar sample. Are is going to have the bottom is gonna have dad bar tab bar that, you know. And this is a place where we're actually going to define. He stabs. So, uh, basically, it's another of the region and will be used his rigid basically, for for a tab for creating taps. Basically dab use. Okay, so this takes a parameter called tabs Isn't all right? Yes. A dab Yeah. Can say icon And you just can't have, like, icons for this. So icon, new icon and icons don't direction like you see that. See? Cool. So new. Yeah, Icahn, Icahn's direction Boat I come I cause dot direction bus I to want and, uh see. All right. You Yeah, missing one. Okay, All right. Home. So what? We have our visit in place, and, uh, we're gonna just idle for new text tab. Well, Obama, basically, we're gonna get body Body is going to be simple, Dad Bar and a bar view is it's that content area that define so basically, tab is associative tap our view and have, like, same number off tab our views as we have tabs s. So we have, like, you know, each you stand but will be having I see you. I call just gonna show icons here. So I caused correction. Let's copy this times. That's both us. Okay. No, make sure you my problem is okay. Cool, I said, and let's rebuild in launch. I see It's building trying to build. No, I call. That goes. So we have three deaths like we defined. And as you can see, we get this default animation and the CYP basically Disher for free, built in with the default tab controller. And, uh, you can either flight, are you? They should. That's thing. Have another one. They say the next item it's but you can control space to see a car. Kind of same thing here. Nice and hot works. Yeah. So you have are forced. Cool. So I guess it's because relaunch Oh, it's how nothing not to you, because okay, So sometimes your heart reload does not actually render all the elements properly. So in those cases, you may wanna kill the app and basically re logic if you notice in the last Tamil the last time we were trying it was only going up until here, but it was actually showing the content for the card as well. So this bar selection that shows which was selected was not moving properly and relaunching the app actually fixed the issue. I called. I hope you guys enjoyed to studio See you guys next week. 23. Animated Drawer Menu: Hello, everyone. Welcome back. And today we are going to be looking at side navigation or drawer what's called in and wriggled. So we're basically going to be creating a draw. Our, uh, that is gonna open menu from the side. All right. And basically, um, there are two types off navigations like that navigation that we explored last in the last video and the next one in our drawers. How? Which is we're gonna take a look today. Um, I So let's get started. Basically, how we are going to be creating a s s create you. Let's take it up one more time. Um, yes. So it gives us a good practice off having it so back age clever. And we need much jail, not start and go. And then we're gonna create white mane, all right? And they're gonna call her half, Um, me, My At this time, it's clear the class, my app extends state less waited, and, uh, next thing we need is a title. So let's create final string AP title is equal to Krauer. And what? Okay, and then we gonna see build. All right, and return. Um, new material. The anto basically in this material that we're gonna say Title. It's going to be apt title and home is going to be a new class, though. New my home page I You're gonna pass table to this after idol, right? Let's create this new class. So class hi, home Page extends. I think that it. And, uh then we're gonna say, final kind I go and as a i home page and it is their constructors. So basically key his map to the game and start title ok dot Super and, uh, not thought should be colon super and key. Yes, we're basically, and then you're gonna stay build and yeah, okay thing that should be okay. So I call those theater. Okay. So what? Do you know what is going to return perfectly? Oh, we are going to be creating a new scaffold, so Ah, that's great news. Careful. And this is that we're gonna create our Grauer, so we're going to save us. We're gonna to find the app are so new. App bar and title is going to be new text, new texts and basically going to use the title that we have a fight. Okay, Next thing we need is Ah, body. I was going to find the body and guess a new center. Um, and, uh, child is a new text next, and the day diets my rage in town. Then you're gonna say drawer is new trawler like so And this is how you gonna create now for recreate Trower? We can have a list of to the power and this insurers that user can scroll through the options. So basically, they're gonna get describable list which taken, select, like, you know, any many items. So basically, you can have, like, you know, as many, many items and as many Let's pardons himself on that list, which helps you create and manage better for your queer navigation. If you notice stabs off the tabs is related like you know how many times you can hold on the page. But this is an alternate way. If you have too many, many options that you got to be, put it in a drawer. Okay, So let's create or child knew this view, all right? And, uh, it's a business trip. Um, we're basically going to say us we're going to remove any padding having a safe riding edge inset. Um, agent steps is dark, dear. So rule any padding that have from the list just to you, and then we're gonna say Children. And if they knew Grauer Header. Okay, creators, child. And this is going to be new text. And, uh, it's this a header here, and, uh, decoration. We're going to give it new box decoration. And that's a color is colors talked. Okay, I want to have that. How Began, actually. Um, but comma here and new. So this is there are head her. It's ahead of saying this is what? Our header, the ending. And, uh, then we can create new list. I haven't list. I Okay, you can see table is in your text. I don't want I need, uh you stay on track, okay? And this is where you can give their functionality for cap. So we are going to say it takes enormous function. Navigator got, uh, context. And now you never pop, actually, is the is the option that you provide, or basically a function that you call to return back or close the drawer. Basically. So this is how you actually close the drawer and and and return to the main page and what we under? We're going to basically copy this, and I will say I have to Okay, in time, that should That should do it. So let's see. My have. Okay, so that's not it. Later. And, uh, the other thing that lost Oh, it's chicken. We're saying, OK, so it's just complaining about the the names. Basically, these are just warning so you can follow along all these, um, hold these past practices that go that just really accord is offering. Um, but there's no enter course ever. So we can actually just leave it like that. No. Okay, so I'm just gonna start executing and you can see it's basically up. This is the deep up love and actually tells you step by step. What is going on? Check out It will. Build is on. Okay. And, uh, there we go. So that's just the drawer that has been at it. And as you can see, three stacked bar icon is already showing automatically. When you click on it, you have a nice header. Well, where you can have what you know and imagine stuff like that is all, like, you know, and in some I think of this as a profile so that have profile image here and name and everything can have and take a look. So few I have select the item you can actually. Your basic low calling to close it back. Okay, so that's your drawer from Sheltie Complete. Now, Hope you found this on No useful. And, uh, we'll see you guys in next video with another. A cool way off developing your component. However, the influx thanks again for watching costing as an extra. 24. Orientation Detection: and today how we are going to be looking at orientation based you. I update. So we're gonna look at a grid of you and how you can create basically a grand view and detect orientation change. And depending upon the orientation change, we can update our you. I so don't do basically, in the portrait mode, I was going to create a list off about 100 elements and then begin a check into your intention is portrait mode that we're gonna show two items in a row. Otherwise, if it's Wednesday and we're going to show three items in right, so let's get started and get on, right? Right on. So we're gonna say import, um, package. But there flash material dart, and then we're gonna say white mane, All right. Oh, by this time you must. You guys must be getting used to this. But it's a good practice to type your type of your code every single time because that's gives you a really good practice. And you learn basically little nuances of the goat. I thought it was great class. My my app extends state less with it. Hi. And then we're gonna say Build it um, gonna give a date AP title. And, uh uh, this one again. We're going to create a separate last to handle the page. Toto have, like, you know, our great logic differently. A layout logic differently. Okay, so it's equal to orientation. Demo. Okay. And you say return. Basically. What do you return? New material app they go. Then we can say title is equal to apt title In home come is a new orientation list is a club that we're gonna create and title ap title bracket. All right, that's it. So let's create this class right here. I have a copy and say, class, this extends state less it Santa. And what we're gonna say is just gonna say, final string and, uh, orientation list must call the constructor. So again, saying thing key, Cain and they start, I will basically, these two parameters and then you called super like E there. All right, you're gonna think Go. I've been here in Alsace, return our new with capital. It's And within this capital, we're gonna have a pepper so far title its new text title. Good. You're gonna have body. Somebody is going to be new orientation builder. It's only gonna use. And this builder takes Basically, if you look at this help which shows builder takes context in orientations that you say older, the next leap passes context and orientation okay, and basically function. So we're gonna return in you Great. You and, uh when um this great of you thought count critically within this, Have you gonna say cross excess count, which is or yeah, orientation is equal to equal. We go to Korean station Dark portrait. If it's portrait, then returned two goals through three columns. All right. And then you say Children and the Children are gonna be new list and, uh, you're gonna say not generate and 100 is a length and generator eyes basically, um, going to be the This is their We are actually going to define our index, and we're gonna create a closure method se return you center and child is going to be new. Move text, and this text is going to be item and dollar. Um, index, So dollar sign is basically for string replacement eso you type anything within the code surgical coats, and if he is best buy dollar now index is basically taking the local label str