FlutterUI - Stunning designs with emojis

- guys welcome back to another video and first of all I would like to apologize for not making a video for a long time guys I have got projects in hand that I've got to work for Bland's and hence I wasn't able to find time to make videos for this channel anyway let's get started with today's video in this video let's go ahead and try to recreate both of the screens using factor so if you notice carefully this set there I mean both of these screens use emojis just I use emojis to make this or the full food delivery app I guess no food ordering app so like I said let's go ahead and try to recreate these two screens first of all let's break the screen on the left into smaller components so this screen contains these three part this part the head they're the search bar and circular avatar part then this contains a list view that displays the food items in the list like a small cards and it also contains a tab view these are tabs and there are some items illustrators below it's in every tab so first of all let's go ahead and do this part this part okay I have blank application that I just care for that I will remove all of these right and the more this as well and the same thing as well won't be needing all this now we will create a new file - whoa page dot dot fine and here what we'll do is - for page sorry dashboard page serious amended and simply import this and now let's cover a moody - poopy [Music] [Music] all right now we have made these to remain awake on this circular alta let's run this on a mobile device and see how this looks this tuxedo dot PNG I have it here in me as its directly guys some fails ok these are nothing but emojis so let's go ahead and run this like I said alright guys now you can see that on the mobile device both are stuck together right so cool now you can see that we have this wonderful we have created this stop bar let's go ahead and add these two lines of text since that's going to be just two lines of text I'll just you know cut the video here and then resume recording fine I have added those two lines and I'm using your google fonts package here the child is just important now that this is done let's just say this see how it looks on the mobile device cool now we have this text here as well let's go ahead and do this search bar okay such boxes so I have to say I'll add another [Music] [Music] [Music] [Music] [Music] [Music] right now we have a nice-looking search bar as you can see here right so now we have this part here that interested right let's go ahead and do this part here the second party list you okay so first I'll add a text all right now we have the text and then the next thing we need to do is add this list view so [Music] [Music] [Music] [Music] alright that son it looks really good on our mobile devices well right now all we have to do is call this function a couple of more times with a different set of parameters so let's go ahead and do that cool save this see how this looks on a mobile device cool right as you can see here now we have this nice-looking scrollable list view exactly like we have it not the same spec right he had the chips the donuts and the hamburger now let's Gordon do this tab section okay the third section of the screen the test is tagged section so after this I'll simply use of space and [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] alright guys now you can see that this first screen is ready right you have this nice scroll view not only that we handy tab says but I don't know how this looks on the video guys but on the mobile device this looks insanely cool this looks awesome so especially the tabs so let's move on guys now that we have done the screen let's go ahead and try to do this screen ok this is nothing but a detailed page a kiss upon tapping one of these I guess will be taken to this page this page has a lot of stuff we'll just break this down once again we'll do the top bar first and then this and then this part and this part ok so yeah we're bored and do this part first [Music] [Music] [Music] [Music] [Music] [Music] [Music] alright guys this is done as you can see here we also created this nice-looking notification badge as well let's go ahead and try to do this part the one with the big burger and the two buttons okay so [Music] [Music] [Music] aha we got the big burger on the screen right now let's go ahead and do the two buttons if you notice carefully the buttons have like a circle shadow below them right now a lot of people have been asking me how to do this this is not box shadow base box shadow is something that will be appearing all around the widget right you can obviously use offsets to slightly move the shadow here and that let's see how to do this especially so this I have once mentioned in my previous video like you could use a stack for this but a lot of people were asking me how exactly to do that so I'll show you how to use a stack to bring this effect but I don't know I mean if there is a better way kindly let me know in the comments know we didn't test this little thing right let's just go back chips donuts okay you know accessory fine now let's go and try to finish off what we were doing so after this the buttons are arranged one below the other so I will just use a column the stack I'm using specifically for that shadow effect there is no other reason to use a stack okay children and I'll add a container that has a height lesser than the height of the button that I am planning to use so this will be like 45 it to be the same as in like 40 and decoration sorry decoration in the box of decoration and this box decoration he'll have like mm border radius or the radius border radius start circular same finger 15.2 box shadow box shadow box well and what the color here find and blur radius 6.0 spread radius these are just some visual effects for the shadow of say okay that's just the shadow base the shadow behind the button so I have to create the actual button and the icon inside it as well right let's use another container for that this container will have the button actual button so container this container will be placed on top of the top of this container right and if I apply a give it a little bit more of height and width then it'll look as wait I'll show you 850 50 you will also understand why I gave this offset offset is nothing this is the X component this is the Y component okay so I am just simply moving the shadow a little bit so that it wait he'll show you guys and me just talking about it with declaration box here I am NOT going to be specifying any shadows or anything I am just going to be specifying the border radius and that color gonna start white fine no after this I would simply you say J icon icons for food water and in say this I'll just specify the color for the economy give it a size let's say this see how this looks on a mobile device cool right now you can see that not only we have a nice-looking button we have that initially appealing shadow below that as well as this you can see this right that is a subtle hint of a shadow here that's not just too prominent on other sides the top there is no shadow as you can see it just simply blends in with the background color whereas at the bottom that is this nice-looking shadow effect a slight looking shadow effects for that it looks as if the button is just popping out from the screen so we are able we are able to create that exact effect in our mobile device as well as you can see here let me add this other button as well so that you can see the whole thing other button is going to be exactly the same there is no other difference so I'll just have to stack a ladder under the stack fine add another stack and then this stack it's just the icon is going to change I just say this and now we have this - looking icons that appear to be just popping out from the screen and this is this effect is mainly due to the offsets that you have specified we placed we have placed another container below this particular container which is acting as a button and then that container so on the time the actual shadow I'm just offsetting the shadow a little bit so that it looks it accentuates this particular button okay now that we have that in place let's cord and okay let's move on let's move on with creating this particular section this section is a bit okay this is a button which on tapping it should increase the amount rate since they have specific point ETS 2 is 42 here since the burka prices $21 okay let's go ahead and do that guys [Music] [Music] [Music] [Music] all right guys now as you can see here we have this nice-looking thing to work as well right this one this one okay so yeah it looks fine and if it's below zero it's not doing anything right now that we got this as well let's go ahead and simply do this and finish off this screen so let's get back into the code I know it's been a bit of a it looks a little bit this is a bit of a lengthy video but hey if you try this out on your mobile device just clone this code from a github repository and try this out on your mobile device and it looks really really awesome guys just with emojis you could create a cool-looking screen design like this so just try it out once okay [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] all right guys now we have finished this screen design completely right we have these excellent as you can see here we have this excellent screen and then we can also increase the quantity obviously and we have this nice-looking part at the bottom as well as you can see here right so yeah guys this is exactly what I wanted to show you guys today kindly don't do this kindly don't do this inside a real application okay in the real application this entire thing would be in JSON format which would have specific key values and inside that it it will be like this guys video should you would have liked something like this [Music] it will have something like this case in a real application the data model would be something like this and you can easily reference this probably this has a very variable variable and what you'll do is you will reference this like this fine and this will contain all these this entire list so you can simply do a map on this element dot whatever okay cheese or polka no order so yeah this is the right way to do this okay since this is just a you a challenge and I'm not going to be doing anything with that I simply showed you how to do that but ideally this would be the right way to do this okay so I'll remove this photo anyway yeah this is exactly what I wanted to show you guys today we have in this video we have successfully done this these two screens right yeah this nice-looking stuff and this nice scrollable list to you as well and we have a working quantity button using which you can increase the quantity or decrease the quantity so yeah guys this is exactly how you can create a standing design just with using emojis you don't need any fancy images or any red a mask or any blur effect or anything it's just with the help of emojis and font Google note Oh sans font or something yeah you can create such a amazing design a minimal design like this it's exactly what I wanted to show you guys today simple but yet effective in conveying more tea that are done being the data that needs to be conveyed to the end user so if you like this video kindly hit the thumbs up button it'll help me a lot kindly hit the thumbs up button and leave a comment if you like what I'm doing on this channel kindly subscribe to my channel guys subscribe to my channel it's free and click on the build icon so that you receive notifications each and every time I upload a new video in that way you won't miss out on any of my content right I try to upload more videos right now I have a couple of projects in hand that I'm working on that's the reason why I wasn't able to upload a video for so long but soon I will try to upload at least once a week okay so kindly subscribe to my channel and I'll talk to you guys my next video bye

Channel: Raja Yogan

Views: 33,550

Keywords: Flutter, FlutterUI, GoogleFlutter, Minimal designs, Clean designs, UI Challenge

Id: A1ski_fjSlY

Length: 39min 46sec (2386 seconds)

Published: Mon Jan 27 2020