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

Playback Speed


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

Flutter Zero to Professional: cross platform development for iOS Android

teacher avatar DevTechie Interactive, Learn new everyday

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

67 Lessons (15h 9m)
    • 1. New 2021: Flutter photo gallery app

      27:33
    • 2. New 2021: Flutter pass data to next screen

      18:41
    • 3. NEW 2021: Whatsapp Clone

      25:15
    • 4. 2021: Pomodoro Timer App

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

      69:05
    • 6. Flutter2020 Staggered Grid View

      19:15
    • 7. Flutter2020 Animated Pie Chart

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

      35:08
    • 9. New: Flutter BusinessCard

      31:48
    • 10. New: Flutter DiceGame

      12:26
    • 11. New: Animated Age Calculator

      20:06
    • 12. Intro

      5:54
    • 13. What is Flutter

      9:46
    • 14. Installation & Environment Configuration

      9:43
    • 15. Hello World App in Flutter

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

      11:40
    • 17. Stateless VS Stateful Widgets

      17:12
    • 18. Dart Programming Language Tour

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

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

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

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

      11:43
    • 23. Using Themes in Flutter

      11:18
    • 24. Create SnackBar

      6:56
    • 25. TabView and TabBar

      9:36
    • 26. Animated Drawer Menu

      10:26
    • 27. Orientation Detection

      9:25
    • 28. Downloading Images from Internet

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

      9:45
    • 30. Caching Images

      5:31
    • 31. Basic ListView

      5:40
    • 32. Horizontal ListView

      9:27
    • 33. Handling Long ListView Items

      9:26
    • 34. Creating mixed item listview

      18:03
    • 35. Creating mixed item listview 2

      2:34
    • 36. GridView

      6:02
    • 37. Gesture Detector & Tap Gesture

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

      9:41
    • 39. Swipe To Dismiss Gesture

      14:19
    • 40. Navigating Between Pages

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

      18:25
    • 42. Returning Data From Selection Screen

      20:28
    • 43. Hero Animation

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

      15:28
    • 45. Container Class

      8:30
    • 46. Row Class

      7:48
    • 47. Column Class

      7:13
    • 48. Working with local images

      10:09
    • 49. Text class

      9:06
    • 50. FlatButton Class

      2:51
    • 51. Raised Button Class

      2:08
    • 52. Floating Action Button Class

      4:51
    • 53. Icon Button Class

      3:36
    • 54. AppBar Action Buttons

      9:27
    • 55. Button Bar Class

      3:40
    • 56. Text Field Class

      2:19
    • 57. Stack

      6:00
    • 58. Stateful GridView

      10:18
    • 59. Stateful AppBar

      15:31
    • 60. Stateful AppBar

      10:39
    • 61. Stateful Checkbox

      9:43
    • 62. Stateful TextField

      5:12
    • 63. Stateful Slider

      9:46
    • 64. New Social App Part1

      10:55
    • 65. New Social App UI Part2

      16:47
    • 66. New Social App UI Part3

      16:44
    • 67. New Social App UI Part4

      13:44
  • --
  • 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.

3,206

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.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. New 2021: Flutter photo gallery app: Hello everyone. Hope you're all doing great. And in today's video, we are going to be building this photo gallery app. So what we then do is we're going to basically get some photo from the photos from the network and display them on the, on a grid. And basically upon tapping on the photo, we can now open a detail view to show who that photo is from stake at that photo. Okay, so let's go ahead and get started. I have basically created a brand new project. There's nothing going on here. I've replaced the template code with liking artistic constant of the material lab. Just do like, you know, make sure there is no Builder hint. Then I would actually just gathered these links from Pexels.com. Okay, so you can go ahead and go to pixels.com and download some photos and get the author like you know, or the photographer's name and give them a credit. Okay. All right. So let's go ahead and get started. So how are we going to do is we're going to first build a material app, okay? And we're gonna be using router one more time, and that's one. So first create our material app and we're going to make sure that debug show checked mode is false. We don't want to show that debug flag on the simulator, on the app, actually. And for the, we're gonna say like, you know, for the initial route, we're going to start with just slash. There are going to be some other routes. So we're gonna say other routes are going to be okay. And first one is going to be just slashed basically the home. And this is going to happen a context. And this is going to return page one. All right? And we have not created that page one, so we're going to create that hand. It's going to be basically, it's the old at that time. The error. Next one is going to be a detailed page. Okay? And once again, we get the context. And we're gonna, what we're going to launch is going to be the Page 2. Okay? And this page 2 is going to take an image, okay? Initially we're going to pass empty and it's going to take a name. You're going to have empty for that forward. Alright, so this is our basic setup, going to have liking our Beta 1 and Beta 2. Now, what we're going to do for the data, you're gonna create a model. A model. It's going to be a class. And let's call this class photo. Okay? So we're going to call this a photo. And we're going to have two properties for this. We're going to have image and we can have name. All right? And for the photos constructor, we can expect this dark. You may still be basked in and name to be passed in. Okay. With that, we are now ready to build our paint on it. Okay? So we're going to build a stateless widget. So stateless widget, okay, we're going to call this spate one. And that error, the one that squiggly, red squiggly that was showing is going to be gone. Okay, so let's see. You can actually try to take its suggestion. Mistake that. And we'll come back like it's going to suggest if we need to remove the constant. So these are in class, all right, that we are created, okay? So we're gonna do is first create a list of photos. Okay? So we're gonna go at the top. All right. He and create a final list of photo. We're going to call it Photos. And this is going to be an array. All right? This is going to be an array of what? Photons. All right, so we're going to have an image and we're going to have the name of the photographer, right? So I'm going to start cutting these, basing them here so I can track which on I have already used. Okay. Perfect. So let me go ahead and actually you know what? Let me go ahead and create this. Perfect. All right, okay, so let's take this image. Okay, Next item. And you can actually make this dynamic as he can actually get it from a JSON or something, if you like. I'm actually using the static list, but you can actually very well be a little bit more creative and create this as a dynamical system. All right, Just a few more to go. Okay. Perfect. Okay. Go and put the name right almost there. I'm going to grab the name first. All right. Three more. Two more to go. And the last one. All right, so now what we have is basically a list of images that we can show inside our app. Now, next thing what we need to do is go to our bill and we are going to create a scaffold. So instead of returning a container, we're going to return a scaffold. So earnest scaffold. All right, in this the scaffold is going to have an app bar. So app bar, AB bar is going to have a title. Okay? This title is going to be the name of the screen. So we're going to say gal, right? But for dogs actually a scholar photos, That's better. Okay. All right, so it just follows, is going to be a text widget, right? And like the suggestion says, let's make it constant. All right, okay, Next is going to come body. And for the body, we're going to use our grid view. Okay? In grid view, actually, we can leverage the builder for the goodwill. So we can say builder, all right, and for the delegate, and we're going to create, so our Ingrid delegate with a C, we need fixed constant, fixed cross x is count. Best one, okay? And this guy is going to have cross x's spacing to be 0, okay? Main X's main axes spacing is going to be 0. Okay? So they're gonna be basically just next to each other without any gap and cross axis count. Basically how many we are trying to show is going to be three. And let's leave it there. And for the next it's going to be. Basically the item count. An item count is going to be our photos. Dot count, dot length. Because there's going to be, these are going to be like our item count. And for the item builder, now what we're gonna do is we're going to get the context and the index. Okay? So we're gonna take those two and we're going to build out basically our, our view. Okay? So you're going to actually return a, return a gesture. I see. Okay, so we're going to basically return a new gesture detector because we want actually to be tappable, right? So you're going to actually have a gesture detector on there. And this GestureDetector is going to be four tabs, so on tap. Okay, What we're gonna do is we're going to push our new view, the second page, the detail page and do the navigator. So we're going to simply say navigator dot push. And we're going to pass the context that we received. And the route is going to be material page route. And this material, but he's route is going to have basically the builder, which is going to be a context supplied. We're going to build out the Page 2. Okay? And we haven't built out this page yet, so I'm just going to type the signature that we're going to follow. And this is going to be photos, the index that we have received that image. Okay, so that's going to be for the image and for the name. We're going to have photos. Index, dot name. Alright? Okay. And yeah, so that is going to go away in a minute when we actually create that page. So we go ahead and remove this guy right here. And what we're gonna do is we're going to create our page two as well. Stateless widget you can create, can call this Page 2. Okay? And this guy, this guy is going to expect to properties. So there's going to be in this string for image, and there's going to be a string type name. These two is going to expect. Okay? And notably the keys. All right, So let's see. Name must be initialized it. So let's bring back the key. What I want do is I would actually, yeah, let's create our initializer, okay? So page 2, right? And we can have key. And you're going to have acquired image and required name. Okay? So that's going to be basically our page. Let me quickly fix this. Because the suggestion is not working. Let me say it again. Let's see what codec. So it says, why do I want to add a constant? Because we are expecting oh, yeah. Okay. For the constructor reprogrammed to COP. Okay. And we can move this. Perfect. So this is our beach do and as you can see, the I see. Okay, let's see what this area is expecting. Okay? All right, so navigator dot push. So we're going to actually push the, so we can expect a con, contexts. We're going to pass the context, then we're going to supply the material page route, okay, which is going to have a builder, builder we're going to build out with the context and Page 2, okay? Which is going to expect an image. Okay. And we're going to pass our image. Yeah. Yeah, You can now pass WHO is a new, okay, let's take out the new pleased one. And we're going to pass the name, image and the name, alright? And then we are going to have basically said that he and it's going to be a comma here, greater magnitude, which bracket is closing? So okay. Okay. All right. Some issue with the bracket that I'm actually see, try removing an empty statement. Oh, this is one-to-many. We say, you know, it's always get confused with this. Okay. Yeah, that's perfect. So as that Let's fixed what the suggestion is. So they'll go, actually, I like the nose quickly, better. Okay, there we go. So we have our gesture that is built into basically are on tap, is ending either. All right. So we're going to have basically a child. And the child is going to be a container we've got here in this container is going to have, first of all, a decoration. And decoration is going to be box decoration. So you're gonna have the box decoration. Okay? And this box decoration is going to be, it's going to have an image for decoration, image like so. Okay? And inside this, we are going to fit this with Box fit dot color. Alright? And the image itself is going to be a network image. And the image is going to come from photos. Okay? So we can actually get the photos, get the index in. Actually retrieved a photo from there. Okay? And that is going to get us this child container with all the photons. All right, so once we have done that, how we are ready to move on to the Page 2. Okay. So Beach do begin to build out directly the build part, okay. Because you've already got the and the properties image name. We have already fixed the constructor to expect like those two alleles to be passed in. Here, we're going to return a scaffold. In the scaffold is going to have an app bar with a title. This is going to be your photo details. Actually you know what? Let's display the name here. The photographer's name in a TextView text widget. Alright. Okay. All right, cool. So for the body, what we're gonna do is body, we're going to build with a column. And we will show so column. And this column is going to have children. Okay? And the first thing is going to be an aspect ratio widget. So aspect ratio widget and aspect ratio of widget is going to have, first of all, the aspect ratio is going to be one. And child is going to be a container. And inside this container, we're going to have a width. And the width is going to be basically, we want to take the whole width. So we're going to say double-dot infinity. It's going to be the width that you're going to define in for the child itself is going to be an image. In the image is going to be the network image for the image that's been supplied to us. Okay? So that's going to be the image. And let's go ahead and okay, let's leave it with the container. Okay. All right, so now you have the image, okay? And you've got your container, okay? And you've got your aspect ratio, okay? Underneath, we're going to have relevant, this is the container. Okay? So we're going to have another container here. This container is going to have margin to margin is going to be a constant of constant of edge inset 0. And we're going to get 20 points all around. Okay? And then for the child, we are going to create a center widget. This center widget is going to have a child and the child is going to be a text. So this is where we're going to display the name of the photographer. Okay, so we can have our name of the photographer and let's give it a style. We're going to actually increase the font so it can have text style and font size is going to be 40 points. Okay? Okay, so let's make it constant. And yeah, so that's, that's about it. So let's go ahead and see if there is any issue. So on all these and there's no error, Let's go ahead and remove the unused and take the suggestion. Okay. Any other suggestion? This one is saying essentially it wants to replace, okay? So I want to actually leave the container. All right, so with that, let's go ahead and built So an AD, the configuration for Dart photo. Okay, and we're going to basically wait for iPhone 13 to launch this app. Okay? All right, so let's see if there's any, anything in the output, nothing that RL putting. Okay, It's cool. All right, so it's going to build. And while it's building, we can actually try to see if there is anything that we go and actually that we see that we should improve upon. So one thing I want to do is I actually like to indent properly. So if you put like karma and X2, now the property actually creates, it actually formats your, If you better or like you know that layout within the Visual Studio code. So I actually like that. So let's stick with that. And then I'm going to actually wait. So this is our last example. Let me wait for this to launch. So let me pause the video here and we'll resume as soon as the app is launched. All right. So we finally have our yeah, okay. His home, make sure you all see it. Okay. So we finally have our app running. And as you can see, this is our photos app that's showing up. Okay. And let me go ahead and click on one of these photos. And as you see, all of our photos are being now displayed in the view. And we have like our photographer's name at the top and basically the photo, like in the center right there. Okay. So yeah. So this was the photo gallery that I want to show you how you can build using flutter. So once again, thank you for watching and I'll see you guys in another video. Thank you. 2. New 2021: Flutter pass data to next screen: Hello everyone. Hope you're all doing well. And in today's video, we will see how to return data from to the first screen, from second screen. So for example, if you have launched another screen and you have done some operations in that screen, and you want to bring back the data to the screen where you launch this second screen from how, how, how can you do that? So we are going to be, let's say if you're launching the screen using navigator dot pop method, which accepts to international second argument, which is called Result. Then we can actually take any result and pass it back to the, basically to the color. Okay, So that's what we are going to be doing today. So we'll see like, you know, Hopkin create that experience. We are going to basically create two screens. And this green one is going to launch screen 2. And we will use navigator dot pop in screen two and refresh your data on screen 1. Okay, and we're going to create a Boolean variable on screen that'll be used to refresh the data. And suppose you want the spring based data and return data. Then you can write basically a function that ONE click. It's basically presented on the screen. Okay? So we are going to be seeing the example. So let's go ahead and get started. I have empty project created. A hint. This project has. Now basically, it's just an empty project. There's nothing. It's just the template that was created by the flutter itself. That's what I have here. Okay, So what I'm gonna do is I'm going to remove all this. Okay? And I'm also going to remove this, my app. And I'm going to actually create a material up here. So material HAP. And in the material app, we are, we are going to pass some parameters. For example, debug, show check, Banner is going to be false. Right? In for the home screen, we are going to create a stateful widget where we're going to create a home, home screen. So if you tight SD, you're going to see autocomplete for stateful widget. So I'm going to press that and I'm going to call this screen one. Okay. That is going to be the home that we're going to call. So Screen one. All right, so this is going to be our first screen. All right, that we're gonna have, we're going to call. Okay. So let's make sure we have all the brackets are correctly. Okay? So you're going to make this a const. Let's make this a const, okay, to get rid of that suggestion squiggly. Okay, so now when we have our, basically our app created, okay, Then we are going to start writing some code. All right, so the one, the class where we are actually extending the state, okay? That's where we're going to create a boolean. Okay? In this boolean is going to be, we're going to call this a value or a flag. Let's call it valuable. And we're going to set it to false. And we're going to create change data. So change data function. And this change data function, It's going to set the state. All right? And what it's gonna do is it's going to set the value to be true. Okay? So basically the setting value to be true here, and that's where we are actually setting the state. And that is called Inside change state. Right? Now for the, for the widget itself, OP going to do is serve returning a container. We are going to return a scaffold. Alright? In this scaffold, scaffold, we can have an app bar. Alright? This app bar is going to have a title. In this title is going to be a text called first screen. Okay? So this is going to be our first screen. All right, and then what we're gonna do is we're going to have the body, okay? And for the body, we are going to create a column widget, okay? And for the column budget, we're going to set the main access alignment first. So main access alignment is going to be main excess alignment data center. So you want to sure, widget in the center. Okay? And then for the children, we are going to basically create a center widget. And this central region, it is going to have a child and we simply going to display the value. We can say value. If the value is true, right? Then we're going to have constant. You can just create an icon, let's say icon alarm. We're going to create in then we're going to create for our condition, we're going to create a text widget. So it's going to be called data refresh. Okay? So we're going to say icon, icons, dot alarm. Okay? Yeah, let's give it a size of 60 points. Okay? And this is for our, for our ternary operation, like value. When it is true, we're going to display this, okay? And if the value is false, we want to display a text widget called data refresh. All right? Okay, So next we are going to basically have a, so this is basically going to be the envelope for center. Okay? So we're going to have our center. And here is another children that we're going to add. It's going to be basically, first of all, a size box. So let's create a const size box. Okay? How are we going to give it a height of 20 points? Excuse me. All right, so that's going to be our size box. In underneath the size box, we're going to create another center, reach it. And this is going to have a child element. And this child widget is going to be an elevated button. Okay? In the elevated button, it's going to have on press event and on press. This is basically going to call a, an async operation. Into this async operation is basically what it's gonna do is it's gonna navigator dot push. Okay? So it's going to push the second screen, okay? And we're going to use material page route to route these, to manage the routing for these pages. So first of all, we want to store the refresh, okay? Inside a variable and we're going to await on navigator dot push. Okay? And we get a dark bush, gives us access to context and the route, okay, so route is something that we're going to create a and this is going to format this a little bit. Okay? So this is going to be material Page route, like so. Okay. And material please route, takes a builder. And this builder is going to be basically a context passed in. And we can launch screen to here. Okay? So that is going to be basically our screen that we're going to take. We're going to create a hint a minute. Let's see what we have here. Okay. So on presses missing a child elements. So let's see. Elevated button is here. So center is going to have a child. She's going to have elevated button. This this guy right here is going to have a child. Okay. In this child is going to be a constant. Text is going to be called next query. So redact. So that's Quigley is gonna go away. Let's see what they say is refreshes not being used right now, which is true. So let's go ahead and write a little bit more courts. So we're gonna say if refresh is equal to refresh, all right, then we're going to call change data. Okay? All right, In refresh is a string object. So we're comparing the string, we're expected to find. There we go. Okay? All right, so now the squigglies gone in our, all of our errors are gone except the string to, sorry, Screen two. Okay, So let's go ahead and create screen too. So I'm going to create it down at the bottom. You can create a new file. I'm just going to keep it simple. So you're going to call this screen too. Okay? And that squiggly is gonna go away. Now, what we're gonna do is we're going to build our contexts. So once again, you can go into our build. And here we have our scaffold. This scaffold is going to return our app bar, okay? It's going to have an app bar. And app bar is going to have a title. Now this title is going to basically call, be called constant. Second screen. Okay, so this is going to be our second screen. And for the body. Now what we're gonna do is we're going to say center. Okay, so we're going to use the center widget for this. And for the child. We're going to once again have elevated button widget. And just elevated button widget for own pressed is going to simply was gonna do is gonna call navigator dot pop. Okay? And what this is going to pass is not only the context, but it's also going to pass a string called Refresh. So I just want to show you like know, how you can pass a simple liking on string as a result. Okay? So that's what we are doing here. We are passing a string. And for the child element, we can have a const constant for text. And this is going to be called Go back. Alright? So this is basically everything. So as you can see, all of our errors are gone. Let's see what we have here. So remove unused packages. There we go. Alright, so now we have everything ready. So let's go ahead and run this. So I'm going to run it. There's no configuration, so let's add flutter configuration, pass data back. And I'm going to be launching this on iPhone 13 simulator. So let's go ahead and wait for simulator to launch and see if there's any bill error. All right, while you're reading, you can see like it's reporting there are two. My app isn't the class. Okay, Let's see. Where is that? Okay. So this is in the test widget. We have unused. Okay. So if we go back into our files, build, it's still running this as basically in our tests. So we don't really need these, like this is not going to cause an issue. So I think I'm going to let continue, but if you're writing a test and then you might want to address this basically just making sure that correct file is being called and the app is being referred. Okay, so now we should have basically our screen launched. So there we go. We have our screen launch and this is our first screen. It says data refresh. Okay, now let's go back. And there we go. We have changed basically are high gone to alarm. Okay. So let me go ahead and relaunch. And as you can see, basically, we are seeing data refresh or less changed the method or message a little bit. So I'm gonna say this is going to be our default message, okay? And I'm gonna save, this is going to sink. So refresh data on next green. Let's go to the next screen and go back. And they'll go, data is refreshed. So let me go ahead and change this at all. And instead of going back and say refresh and go back. Okay, so let's save that. And let me go ahead and launch to set the state, reset the state. And they go to, Let's make one minor modification. So wherever looking for Icon could, they would go. So refresh, rounded. I'm going to save this, relaunch or rethink. Yeah, Right. Hard Reload and go back. And next screen, refresh and go back. In. There we go. We have refreshed our screen. So as you can see, how with the help of Navigator and use of peter out, you can actually receive that data back from second screen. So this time we're actually only sending a string. That string is being received here, right? In then when that is like real, like refresh string that's being returned is equal to refresh, then only we are changing. So if I change this, for example, if I just do a hot reload and go back, it's not going to change because now our string that's being returned is not equal to refresh one. Okay? So let me go ahead and change this back. And me, you once again, so refresh data. Go back and there we go. All right, so, yeah, so this is how you can actually pass data back and forth between two screens. And now this is the, this is the video for today. Thanks again for watching. I'll see you guys in another video. Thank you. 3. NEW 2021: Whatsapp Clone: Hello everyone. Hope you're doing great. And today, in this video, we're going to be building a WhatsApp clone in flutter. And let me show you what we're going to be building and then we're gonna get started. So you're going to be building this Flutter app screen. And I though we are running this in similarity, but that's where you can ski, can't see the cameras screen. But if you run this inside a device, you can see our camera running. Okay? So you're going to be building this UI where you can show the main page or WhatsApp. You can show the status for the user, cost log and basically entire UI layout. And then like we are. So going to integrate the status page where you can have these story of use for the status. Okay? So this is what we are going to be building in this video. So let's go ahead and get started. All right, so I'm going to pull up the project, the empty project that I have created. And go ahead and fire up your Visual Studio and open your empty project or her liking the template. And we're going to be big. We're going to start removing carbons of this boiler, boilerplate stuff. How very soon? But let's go ahead and first gets some dependencies into our boat. Fact, Art, YAML, okay, and they serve typing. I'm going to actually paste the code. And I'm going to walk you through that. There were like, you know, it saves a lot of time and you can always pause the video and take a look at what's going on. All right, so first of all, for the worship and the environment are there are some major changes that have happened in Florida or so. Florida to D2L has breaking changes. So I'm going to reward this back to two dots, seven. And that actually works for most of the cases. And as soon as you are gonna save, are you going to start seeing some of the errors? So let's go ahead and fix this. So basically, like, you know, I mean this all cord is going to be gone, but but we want our code to be in a good state. So we're going to have like this, like you know, we're gonna remove like no optional sin required. And that's actually going to change. Like, you know, basically bring, bring our project back a good safe. The other thing that we're gonna do is we are going to have lake, you know, a couple of dependencies. So there's going to be one for camera in 14 story views. Okay, so right underneath Cooper deny kind, I'm going to paste that those two dependencies. The first one is for camera. It's actually adds, it adds the camera support. And the story view is the Status view that we just looked at. This guy right here. This is what is the status view. And we're going to be actually using this cool little widget for that. Okay. The other thing that we're going to be, I guess, yeah. So this is the only thing that we're going to do in Bob's dot YAML file pops back down to YAML file. And now we're going to go ahead and create some folders. So what's, so I'm going to create a folder and I'm going to call this one models, okay, inside the model, I'm going to create a new file. It's going to be chat, underscore, marble, dark, dark. All right? And this guy right here is going to host our chat model. So let me go ahead and paste the code and we can talk about it. Okay, so basically we're going to create a class for a chat model, which is going to have properties name, message, dime, and avatar. Url. For the constructor is going to have a lake. You know, all these properties are taking in. And then we're going to create some sample data. So what I'm gonna do is I'm going to put that data in here. And let's go ahead and take a look. So it's going to be a list of jab models. It's just a dummy data. And what we are doing is basically we are creating this array of Jack model They have like in our sample chat messages. Alright, so let me change that to just your PM. Five, BAM, like that. Alright. So this is basically our, our CED model that we're gonna be using. And then we're going to have some pages for all those pages that we've been seeing. So you're going to basically create a new folder or once again, and I'm going to name this folder repeated. And and the page is it's basically going to host some of the bases that we're going to use. So let's go ahead and start building out. So first one is going to be the call screen. Our call screen is, is rather simple, so I'm gonna actually. Start with that. So let's go ahead and right-click and create a new file. And we're going to call this one calls screen Dart. Dart. Okay? And basically are you going to do, is we are going to, I'm going to paste some code here and let's talk about enough. So first thing we're gonna do is import the flutter of material dot, dot. And then we're going to create a class in this one is going to be stateless. Region is simply going to have a center text for calls in. You can actually display a list or something like, you know, here. But for us, we're just going to display a cost. Sort of. So the calls are centered text, that's it. So you can populate that certainly up to you. That's why I actually started with that one because that was a simple. Next one is going to be the cameras screens. So let's go ahead and build a camera screen. And this is where we're going to be using, are we going to be using our plugin? So first, let's import from material dark, dark in camera, dark, dark. And next thing we're gonna do is we're gonna create these stateful widget. Okay, so let me paste the code for a stateful widget and we're going to create a class camera screen which is going to extend stateful video. We're going to create a list which is going to have a camera description in cameras. And basically then we're going to initialize doors inside the constructor. Okay? Next, we are going to create our camera camera state screen, like this one. In camera Status screen is basically stayed for camera screen. If you go and look for the definition, this is the camera screen that we're actually calling right here for the state, for widget. And then we are creating a camera controller. Okay? Now this camera controller is something that's coming from camera API that we are using. And we are going to create that camera, camera controller. And then we're going to initialize the state. So inside the initial state, and we're going to create a new camera controller and we have got the cameras. So you're going to take the 0th position of the camera and we're going to set the resolution to medium. Okay? And then we're going to initialize that, okay? And if the camera is not bounded, then we're going to return from there. Basically. Otherwise we're going to set the state with the empty and, and you just put the disposed to dispose the camera controller and call the controller dark dispose on it. Alright? And then for the build function, even as say like you know, if the camera is not initialized, just return a new container. Otherwise, return a new. So basically gone the next return a new app, a new aspect ratio, our widget and aspect ratio visit is basically going to get the controllers aspect ratios, basic cameras aspect ratio, and add a preview layer using camera preview. And we're going to add the controller, supply the controller to that. Alright, so this is basically going to create our camera screen, right? So next one is going to be the, the chat screen. So a chat screen is where we're going to use our model that we created. So we're going to call the file itself chat screen dark, dark. Okay. And let me go ahead and paste the code and we can talk about it. So let me go ahead and obesity in direct code. So first thing we're doing is we're importing the material dart, dart in chat model. Okay? And then we are creating our chat screen stateful widget, which is initializing the screen state, which is just going to state this guy for the state chat screen. Okay? All right, so let's go ahead and collapse things so we can actually see it better. So all we're doing is we're first creating a new list builder, ListView builder. And we're passing our dummy data into that. So for each data we're going to create a child rigid. It is going to start with a divider and a new list tile. And then list-style is going to have a circular avatar, basically with the theme. And there's network image call that's going to be made to the avatar URL, which is going to become the background image. Okay? And then you're going to have your main access in this main axis is going to be the space between. So we're going to create a row and then we're going to create a text for the name in the time that chat message has been sent. Okay, and then we're going to basically go right after this row. We're going to have like from the subtitle, we're going to have a container with the text message in it. All right, so, so that's our, that's our chat screen. And next, are we going to create our story. Story page view. So let's go ahead and create that. So let me get you the page New File, Storage page view. All right, so we're going to do is once again material dot-dot-dot. We're gonna import that and we are going to import a story view dot, dot. Now Story View is actually another package that we just inherited. I would like you to include it in our pups, pups back. And we're going to create a state less widget, which is gonna initialize a story controller. For our build, you can actually create our story controller. And then we're going to create our list of stories. Story, story item can contain text. So we're going to create the text one of the first one. And then you're going to have like basically you can have like beach image, which is going to be an image to covering the entire page. And then like you know, another image which is going to have a GIF file, okay? And we can keep on supplying our story controller to make the, make sure you know this list and sub in the story. And then parks fit dot container to contain all the, all the items. And then we're going to return our story view with story items controllers because I said the inline to force in repeat to true. Okay. Going to create our story screen. All right, next is going to be the Status screen. So let me create a new file right here. Okay, So, uh, Status screen is basically where we're going to show the status. And let me paste the code for this one is a little bit bigger in before. Let's make sure this picture that our pages are correct. All right. For SAP splash pages, story underscore, page under score of u dot dr. All right, we should have. Okay. All right. So we're going to import material and story-based and then let me collapse. So in the Build, we're going to first create a container with a color, okay? Sort of like a whitish color. And then we're going to create a column inside the columns. Cross excess alignment is going to be at the start. For the children. We're going to create a card. So let me collapse all of these. So we're going to create a card widget. And inside the card widget, we're going to have some child elements like, you know, a and we use basically your child element is going to start with the padding. So we're going to first create our padding here and then we can have a circular avatar. Okay? So basically there's going to be a list of style right here. Inside that. The leading is going to have a stack inside the widget. We're going to have a circular avatar. And we're going to position that. Okay? And inside we can have an icon. So if you must visualize, this is the status. So what we're doing is we are actually getting the plus icon right here. And then inside the container from the position we are actually positioning this inside the circle, circular avatar, and that is our status page. And then we have the text status and the subtitle text tab to add the status here. Alright, so that is our first card basically. And I'm going to collapse that. And I'm going to add some padding for Nike NOW with the text view updates. Okay, and we're gonna make it taken a style and a little bit. Fifth color, gray in font bold. All right, and I'm going to collapse that. Then we're going to create an expanded list. This expanded list is basically going to show our container and then it's going to have batting for Edge said, there's going to be a ListView. And inside the ListView there's gonna be a list tile with a circle. You can actually get an image from random user dark me API, a network image. I'm going to download it from there. For the title, we're going to use texts and we're going to style that text for the subtitle. We're going to just put the text in there in on tap, began to push the navigation to show the story page view. So that's what happens. You actually show the story page right after that. Okay. All right, so we have all the things that are needed are ready to go. So now we're going to go into, are we going to create a new file and we're going to call that WhatsApp home. And then that file is going to basically call all the all these other navigation items. So let me go ahead and copy. So we're going to do is let me do this. There we go. Okay, so we're going to import all of our dart files and all right, so let's go ahead and take a look. So all we're gonna do is you're going to have liking our camera material in all the pages referenced at the top first. And then we're going to create our state for video. And this stateful widget is going to call this class WhatsApp home state. You're going to create our tab controller for estab controller is what you, what you see right here is the tabs that we have, that we have created. So you have tab controller and we're gonna say Show fab to true to show the, the fab button on the chat right here, this is going to appear. And we said that tau controller to the index one hour, which is basically the chat index. So index 0 is your camera index in chat is your first index. So we're going to say here, so focused in there are four tabs in here. All right, and we're going to put the controller and put the put the listener on that on the tab controller and say like, you know, whenever the index is not one, basically it's not on the chat. Then hide the fab. Okay, so as you can see, the enemy did. Fab is being hidden as soon as we actually change the screen to a different screen, right? And then we're going to call the set state. Now let's talk about the scaffold. So basically we're going to create our staff scaffold. For the AB bar. We're going to create our AB bar. Okay, we're gonna put the name, the elevation for the R-bar. And then at the bottom of the bar we're going to create our dab bar in going to supply the tab controller in there. The indicator color. We're going to set it to white. That's the indicator, white color right there. Then the tabs itself like the items. So camera, icon, phosphine, chat skies are taxed and then your status texts in your course. Alright. Then next we're going to have basically our search results, basically the actions for the app tab bar. So as you can see, the bottom is already closed here. So that means all the tabs have been listed out. And now we're talking this section right here, the actions. So you're going to create a search action and basically a more action button. All right, so that's your deborah right there. And so that guy right there is your tab bar. And then you added these actions for more, which is this More button right here. So you've got those actions listed right here for your more, and then basically your search icon right there. Okay? So those tools, search icon and you are more button. So you can have like, you know, your actions there. Then comes to your tab view, which is this section right here. And we are initializing with controller. And we are initializing all the screens that we have. So we have that camera screen and that we created right here. All right, so there's cameras screen, There's just getting cold. And then you have your chat screen Status screen and call screens. So basically 40-year tab, bar view children. You can now put all the tabs that you want to show, okay, and for the floating action button, you show our FAB that actually has open chat. So essentially when you press like you now, are you just going to print something, but it's actually like Node Icon that message to create a new message. So you're going to open the contact in, display the new master. So I think message going to just type them in. Okay. All right, so now go back to our main dark, dark file. This one is going to be pretty simple. Once again, copy and paste and change this to WhatsApp. Okay? So we're going to import from dot-dot-dot async because we're going to use the async. Going to use a camera to support the camera's support. And in the WhatsApp home, in the material dot Dart, how are we going to do is you're gonna get all the cameras. And we're going to get like, you know, basically get all the cameras and that there are, so this called right here is basically going to go out and populate. And the cameras that are available within the inside, your phone, front camera, back camera waiting or camera and all of those. Once we have this kind of populate this our cameras local variable, or they can have global approval. Then we're going to create it. This myapp steepness widget, which is going to have basically the material app. And our title is going to be your SAP and theme. You're going to create a theme data with this custom color, like, you know, cursor or like a greenish color or foreigners. Whatsapp. And you're going to read all want to show the debug banner. So we're going to set that to false in for the home screen we're going to set do once they have home supplying the cameras that we have gathered through this API call. Okay. How would that let's go ahead and start run without debugging. And we're gonna choose that in our early have iPhone 12 Pro Max opened. So it's going to basically install this app. And it's gone into. So it should create a new app right here. And then app, that app should show essentially like our newly built up. Okay, so it's probably going to take a minute and that anatomy or to put Blakey a few seconds to run the build. All right. So I'm going to for the bill to finish. So beloved son took about 30 seconds and there we go, yell or South created. And we are connected. So there we haven't lake in our first w is opened up as the first heads the initial view. And then you have your all your screens. And if you click on your status, you can see all the status. Status is, they've got a story is actually being worked out properly. Okay. So once again, this is where like, you know, the tab bar camera status is not going to be initialized because it's going to be empty. It's usually this is because like, you know, you're not running on the screen, on the on the actual forms or when you run it on the phone, you can see your MRF for you right there. Alright. So yeah, this is it for this video. I just wanted to show you how we can build a WhatsApp clone inside a, inside flutter in hope you like this style like you know, where I can actually talk about the the the the court itself instead of typing it in front of you. So I will see you guys in another video. Thanks again for watching. 4. 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. 5. 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