Training & Diet App | Flutter UI

hello everyone welcome back to my channel so if you are looking to learn these type of animations this is the video for you if you're looking to learn slavers this is the video for you because I will be showing you slavers here okay when you scroll this it comes beautifully down when I press back button it goes back and it goes to this position so these animations as well as if you want to learn about creating this progress radial progress indicator and if you want to learn these progress indicators then definitely this is the video for you okay so this is the video this is the UI that we will be completing in this video I hope you will like this and hit the like button share it with your friends as many times as you can and keep supporting me keep watching my videos so let's begin [Music] let's see how I have taken the images so this image this and this plus one two three Elton's I have taken from Google some of them are taken from Google so you can see that this is the back image of course this have this thing I didn't know about it biceps has this just as this so it will come in the image but you know you can take from your designer this is the fruit granola this is my own I created a tablet first you know item which was not there so I thought of that and pesto pasta okay so these three images will come here of course one of them will come here when we select any one of them and these icons will also come here and here other than this let me close all this so we are now creating so we are in lip folder we will create a UI directory because I am an intelligent so if its named as directly here I will go with pages and my first page will be profile screen should be dot fight a shout out to the guys who have supported me by buying me a coffee and I really appreciate that so to other people if you want to support me there are two ways to do that one you can go to buy me a coffee and you can look for my URL which I have already given in my all of the videos you can find in the description it is somewhere here you can see the support and you can buy me coffee through this URL which will lead you to this page and you can go and buy me second thing you can also go to PayPal and pay me this is the URL which is also there in the description below okay so thanks again if you want to support me then you can also go to the my website which is techy blossom com scroll down to the page and you can buy me a coffee from here as well okay so thanks and keep watching my videos thanks for your support in future if you give I will definitely mention your name and I will definitely follow your queries if you want okay so there is a life template for adding a scaffold which is SCF so once you press tap your escape vault will come automatically with a continue container and so looking at the design for this page we have this page divided in some sections again there is some background color so let's do that first there is a scaffold which has a background color I am putting it as Const because when the page refreshes is in future this color will not get initialized again okay so the color code for this is e 99 a nine and the body we will just run the thing and I will show you how the scaffold color looks like okay so we can see the color here and this debug you can remove from this attribute okay now coming back to profile screen however the screen is divided into some parts this is my first part which is on top this is my second part which is at bottom but this is this can be treated as a bottom navigation bar okay so we are going to use that so let's take a stack first of all so that we can use position widget okay a position widget I am talking about the top part first so let me get the top as zero height what should be the height so it turns out that this is 35% of your screen height okay so we will take a height from media to eat and in future if we find that it should be little bit more then we will definitely change it but right now it looks like it is 35% so height will be height into point three five then of course left will be zero right will be zero so that the complete width of this is taken child will be a clip right keeper roundedrect which will have corner radius of vertical which will have bottom as 40 so only and also since it's almost we can use this so using const actually is a performance booster then this build function rebuilds itself this instance in specializations have have done with const will not be again initialized yeah so it will be a like static thing it will be like a constant thing which will not have memory allocation again anyways so bottom will add border radius to both the bottom edges then it will have a child which will contribute in color of that will be okay let's see the output so this is out it looks good right with the minimum code we can see that we have come with this operator now forget about the middle part let's do the bottom navigation box first so it will be bottom navigation bar which will be which will contain a list of items okay all those lists of items are nothing but a bottom navigation bar items okay so icon will be right then we will decide the size later on then the second item I can start so it's the third will be profile thought its person perfect um let's see the output before that I should remove these commands because the file is not formatted the way I want it okay of course we need this fine so it looks okay yes I wanted to show you the errors because I am most confused whether to use bottom navigation bars or create my own custom thing but it turns out that I can use bottom navigation bar it also without the title so the hack around that will be so it fails that item dot title not equals to null which is true so it says that item dot title should not be null right so we have to go with a title it's a mandatory thing so what we will do is we will create a text will name it as home and we'll create a texas-style Azrael color of that will be color of our bottom navigation bar okay so it will be in my opinion it is white if you see the design it's white okay so this hack have to be applied everywhere so I will also add Const here like all it will be memory booster for us okay so I will copy this titled hole and add it here like this oops so let me just correct it so this is the title and it's fine right what is the title here it's a profile or you can see a profile okay so search fine let format the funny and run it again so this is how it comes out okay of course there are a lot of things that needs to be changed so we have to add the border radius right and you can see title is not there even though it is there it's not visible because our because of our hack now what is the benefit of using bottom navigation bar sea bottom navigation bar comes with many things like you have current index which you can decide it can be one so though this element will be selected it can be to this element will be selected so all these things are already happened or already done for you right even you can play with the type so it will it can be shifting type it can be filled so type if you use a shifting type you know okay maybe some issues I will just solved it it will work but with some more parameters okay and it also has selected icon theme unselected icons in which we will use it has icon size default defined so we don't have to give a concise every for every icon okay then we go to icon size I will leave it as 40 let's see yes we are go to the height now and selected icon theme will be I can theme data color again it will be a Const so bring it in your habit it was not my habit till date but I am making this as my habit and it is actually beneficial okay so select it I can send data you can see it matches with our icon right and unselected similar stuff it will be colors dot black okay so you cannot use conflict already defined colors black 12 yeah looks nice right so our colors are defined our icon size is defined now we need to add the curve like this right so you need to wrap this in clip alright and you just have to give border radius which will be again vertical but this time it will be for top okay it just got circular same dimensions and now you see that you have this right now I would say you can probably you cannot add padding and margin like those so you cannot achieve exactly this but if if you are fine with this then you can go forward right and you can also create your own it's not a problem but right now I think you should learn bottom navigation bar also but can there be a hack no there cannot be hacked you cannot add some mods in here I think there is no way to do that probably in icon if you are using widget that I would say you can use some adding let's try that okay and it should be only top okay so you have increased the bottom navigation bar height itself which in terms turns out that this is the hack with some cost okay so I will add for now if you feel it right you can proceed using this in your codes wherever you want yeah and after doing this we are proceeding to our main section okay okay so let's minimize all these right coming to this position we need to add something below that right so we will use a lien position widget because it gives us good flexibility to add at some a specific position right so my top left right will be same top will be changed to height in 2.0 I can say um g8 is the value that I came across okay and height we don't need it has to occupy other remaining help okay so basically I'm talking about it should start from here and it should occupy the remaining of this space right so I'm just making a container making giving it a color so then I can show you how it will be rendered okay so it will be you can say gray okay yes so we also need to give height of it out of the container basically so it can be something height into 0.6 0.5 so this is my height no matter how much you give it will take the remaining height okay so if you give point for definitely it is going to take lesser but if you give 0.7 then also it is going to take the maximum point eight maximum no changes in that so you can give point six to be good on that paper and even if you give complete height you know to support bigger screen you can use this okay so let it be like that then in child we will have which I will call which will have column okay so why I am taking column so basically this whole thing now has in a column state right this is first item then these this row there and then the third item so that's why I have taken a column our first child will be padding okay so and giving bottom I am using patting is I want some bottom padding that's why and nothing else okay so this is my bottom padding and of course we need our child which will have a text text will be means for today okay okay then below this so I will have to take again a column so no not along then I will take a expanded widget okay the child will be I will explain you but before that let me again show you what I will do it will be read s Inc and similarly second X printed this will be low assent okay so as you can see a red has taken complete is because we have not given I to a letter sent to blue isn't right that's why it has taken complete so we will definitely give a hi to it so let's not focus on this right now but of course this is there somewhere okay okay right okay then so we need we have what this means for today so we will bring it on the left hand side so it will be cross access alignment or to start so this brains sorry this brings our meal for today on the left hand side then we need left margin as well so it should be 32 right it should be only 16 okay so this is perfect positioning for this then um I don't need this grey color I just remove it okay now this Texas style we have to give so it will be X style color which is being it's gray and weight is too much white font weight dot to 800 or 7 find me a dog three you know this looks good font size it's not too much perfect no we need to a draw a roof right so in the child you will have probably you donate this container now we'll have a single channel is called view anyway level child it should have row and multiple items so what are these multiple items these are our meals right so go on to the folder create a directory which will have model I am creating a sample model now which will be meal okay and I already have that copied so this is my meal class now as you can see Meal Time name image path calories burn and time vehicle all these are from here okay now I am not taking from data from server so definitely I need some static data so for that I have also copied have also kept a copy of this so you can declare meals at a global level somewhere here okay and it will be an array okay so this is a array which is containing three meals breakfast dinner and snack which is over this thing right and I have given image path as fruits fruit granola and anything everything like that now since we are using asset so you have to go to abstract pro tml and uncomment these assets probably you have to just write this assets and it will be available right I'm in bed to meal now we can use meals as a enough in a in a for loop for a room okay so we'll use for loop before that before that let's create a meal card okay which will be a single card okay so I will take material and I will wrap this material in a container the reason to do this is we will take a margin okay so we need we need a right margin which is between T and a bottom margin which will be then okay why we need because as you can see each meal card has a right imagine and what imagine just to see whether the shadow is properly visible or not that's why okay so right will do yes so in the material you will have border-radius which will be about the radius would fall as 20 okay fine then the elevation will be 4 then it contains some common okay so first one is the image so basically meal card requires a meal right and this meal can be imported will directly pass this in our constructor okay so we will have me imagine that we will have a mealy object in our meal card yeah so we need our emails dot asset fine and it will be it will take almost half of the screen size right a half of the meal card size so we are again going to divide it this column into parts again going to divide this into parts first again we will use expanded okay I will show you in future you don't need expanded actually expanded has a problem with this so we will I will show you what you have to use but the normal thing that we generally do is using a expanded widget to divide the problem into sections okay now the second expanded widget will take all the text from you break first to dwell on ray and everything like that so we will take meal dot name and not giving styles right now I just want to show you what you have to do okay it's not me name will be meal time then the name oops I'm forward to use children here all these things will go killed Rijn then we'll have again calories and the time so it will be calories before that this will be low calories and it will be time taken and one surprise widget it should be a cyberpunk just to give a margin at the border right so it's close height of which can be 16 just I need any fact you can take right so now we need to give the image so which will be needed image path right this looks correct let's see what is the output of this so we cannot see anything that's what I want me to show you okay so we will okay why we cannot see because we had not used method so we'll go to this row we'll use for loop okay then we will you I left and we stored these total end which will iterate over I plus plus and no need to add curly brackets you just need to use your need card with the meal provided so it will be means by needs at position okay so this is how your meal card will be right okay it has formatted itself let me yes this is good to see okay let's see the output we cannot see anything yes that's the error I wanted to show you so it says that render flex children you must have seen this a lot of time so the solution is this and I tried it for the first time it says consider setting main exercise to main exercise dot min okay so where is the issue you will go here so it turns out that this column ik - oh okay so I will set main exercise dot even as it has described in the description okay and using flex with loose fix for the flexible children using flexible rather than X an expanded so since you can not use flex fit here you have to use flexible widget okay and here you have flex you have fit which will be flex fit for clues as this has said we we are going to change this okay because we don't want flex fit loose we want tight so we will see why do you want that okay so this is how it is and now if I run it oh it looks good not not a problem of course we need to fix the height of it so my height of this image will be okay fine it's not the height problem it's a problem with this single child grew telescope we need direction for scrolling right which should be horizontal not vertical it is by default vertical so we have come till this point right okay now fine we are almost there can you see it is completely attached to the left hand side so what we need to do is before this for loop before any of the milkers are drawn we will add a sized box with width of 32 so that this is aligned with this means right and this is what we see now you can see the image right curve we cannot see so first thing that we generally do you go to our meal card go to your image dot I said and drag this little clip all right okay and border radius you have to give only for sorry vertical think which will be 20 because this is the same thing that you have given here so you are going to use 20 here and you can see the beautiful color of right now we need to fix the width of this you cannot take the height it will take the liquid ID whatever it has okay width will be 150 okay and this is how it looks right well we will fix this awkwardness don't worry about that and fit what do we do is box weight dot fit height so that it fits the height okay and we have to figure it out yeah now we need to make it as max so that it it takes the max I so all these Heights are similar then we have to make this as tight so that it takes half of the size and then B of course we have to manage how this whole thing is expending expended to complete height of this okay so it turns out that this expended is definitely a problem for us right so if I give height to it somewhere around you can say or if I give size box because definitely I need a gap between this and this so it will be 20 okay it should yeah yeah so we have got this margin somewhere we have lost the track off the third expanded widget right okay so does it mean to use max here no it is not solving a problem okay so probably this is yeah so it turns out that even though I use height and complete I did think what of that way so you have to decide what is your height of this okay so using height in two points five six which is fine for here okay now we see that this image is not you know attached to its left and right it is not completely fitting so we will use fit probably weight and yes it looks now it is 150 bit so it fit sorry is not working so it should work okay film will also not work tough will work sorry so Phil works somehow with more regions okay and yes the thing is you see this scrolling it is perfectly fine right I have given size box here so that it is not cut right and it feels like it is edge to edge is crawling and you have some light something right so that is because of this container and right - okay now we need to correct of course so we have to only play with this column now which will have cross access alignment at its start and I would say just wrap this in some bedding widget so that it has some left bedding of course it is too much for this is small but it's okay yeah we have not fixed this bottom right so this image is also having a curve which should be should be all then and this should be correct yeah so we have found this beautiful solution in this box we will go here and give some height so that it has some reading from top yeah perfect and then all these elements should have automatically should have good space between them so it will be main axis alignment image this amendment dot space between and yes they have beautiful space now only we need to play with the font sizes and texture style so let's create some texture styles which is okay if you are trying to skip the video I would say stick around it's a very informative video and you will learn an order font weight let's see one fitted normal so to cling phone wait let me with the size right force color do I need to change okay when you stand interesting complete for that we need to see something okay so this column you so this box why it's not taking complete weight if we do it this okay because of this column since the this is also in a column in agent this expanded so we'll need to add cross axis an element here as well like yes this looks nice and now I can add looks nice okay our fruit granola definitely is having a bigger font which will be 18 color will be black and beige should be too much yeah this looks nice with this kilo calorie count it's almost similar to this slightly lesser font so I'm going to use no no phone changes I free but yes together with this we need to add this thing low calorie unit okay so we take this in our double quotes and we will wrap it around this so that it is a variable and then a space and this thing it works on okay yes this is great now for this text again you have to wrap this in a row the regions is it is a image here okay so the first time will be imaged or a set and this time it will be sorry it will be icon I can slot so it's a time which is yes this is the clock which is similar and color will be black 12 which is very opaque okay then our time taken similar thing that we will do here okay I will do it for you again so make it in double quotes chill do this then dollar in the bracket and space okay and the style will be similar yeah it looks awkward because I have not a dentist Commons so if you add commas properly file is formatted properly okay this icon size is too much so it will be equal D that looks great there should be a space so add that space size box width of 4 and probably that's it yeah we are good with this and it is cross now let's work on the part okay so this one first of all going to this minimizing everything for our deal card okay blue isn't which is not the correct color so color will be really UX okay it's a gradient okay so go into decoration box recreation gradient which will be a email radiant if I am NOT wrong and it will have colors so of course the second color is definitely we know which is the second color it is 287 yeah but what is the first color so I have already stored this designed or PNG and attached shown in my previous videos how you can get the colors so basically I will take this pen tool click on this and go here and take the first color which is two triple zero eight three okay so the closest go back to this 8c okay looks very similar I won't is it 2xe okay it be so it changes every time because it's a gradient of course so we'll take more like it be okay fine so this is my gradient let's see how it works okay it's a gradient what is beginning so it will be alignment dot top center and end will be which is final looks not like that but okay then of course it expanded we need to add much into it what will you the margin it will be symmetric no it won't be symmetric it should be only because we need from bottom 10 left 32 by 32 okay then bottom is not taken so we need to do something for this probably this time it's time to give it this height yes so yes I see I can see this has come so what we can do is probably this size box which we used in meal card can be played around and this size box which is here can be played out so it can be 5 and it is fun okay great now we are good with this card we need to play with this now so let's add since we are in a box decoration we can have body ideas should be for the radius not all and 40 ok ok no it's too much to begin a 30 this looks nice now and perfectly matching with the alignments and all the child of this container will be upon the course as you can see here ok or you next workout then upper body then of items of course again you can use a loop but I have not created any data for that so we'll use multiple things in it will be your icon button because you know this I can button give will give me a little bit of padding and it will add background color so these are the things that you should consider okay and yes I don't want on pressed so my icon will be it will it takes a widget so I will I am going to move towards it and it will be as its dot i think it's just dot PNG and yes I forgot to mention I have taken these images from the now in project and they were pretty similar but they were in black color so I have those images in black color we are going to apply some color on that so I will show you what the exact image is it is black in color okay so it will be just dot PNG we will see how it looks and then I will show you how to change the color for it okay so of course ice box will be here with some bit it will be 10 and this combination will be repeated two times now just then or is that just back and the biceps this is back okay let's see okay looks great everything is black no problem we will have one more thing so color we are going to give some color here which will be oh I want a button called a visual we have that you'll have to see oh yeah we must have that so it will be three let me check so color one gray is not working correctly oh maybe the black Cooney is changed so thank you Green okay once again a dream likely I will do yeah this is why it okay why this I can return it more taking colors so what I'm going to use it I'm going to use container now because it's not working so why do I use a converter right so we will use China here you don't need on first and before things are not clickable so it's not bad to remove interest as in this case fun great now we need to add ready it's too much so we have to use psyshock so bit okay my you think under okay you can give bit as 30 it's a row something is wrong something so if I select this this is a column text let me add this image finally visited okay wait so turns out the source of efficient okay so I expand it because I want to mean in space to be taken by this there so okay so it should be 50/50 looks nice 50 to take okay so we are going to use in all these items right and of course colors what wait perfect now we need to give some color to it which will be again we will find it through our pen tool so go here and it will be 5 B 4 D 95 p 4d 90 okay so 0 x5 d 4b 90 and do not forget west coast for this column so that is great of course we need to add declaration which will be radius radius to call and this time and right and this color of course will come here okay I said okay no it's too much so it's to list so this is this is right so this thing we have to add to every container you can create a custom visit as well nice oh we need to add a size box before it which is like 2200 so this looks nice yeah great we need to give it four exits to this style who does a column okay let's dot it is somewhere like 12 to be 20 okay they're not visible so reading with white 30 it is visible X 70 it is more visible which is correct 20 is too much size 18 and weight font weight that's and it yeah 16 is great size so we are going to use a size box again and also concept of alignment it start so that it comes on the left hand side now we need to add a padding to it which will be really strong rock it will be 16 is it okay yeah like fine everything is it's in the chin and we will complete this this Texas time now from here and put it for in this upper body first let me format it again for you right upper body of course the font size is 20 now and weight 8800 and color this power white what's good but this is not in caps so we will change it 24 it's correct size we need some size box and it will be for only yeah and this padding again we need so probably you don't need the size box now if you wrap this in a pending Egypt the padding top will do it for you and expected right so now we are going to click on this and before that if you won't even increase the size box widget and decrease the you know bit turn Hydra food if we click on this it should open this is screen so let us do that to that we have missed this part so this is our UI okay we have this this and this so for this I will show you that I have already created a video on this probably it is worth that you see it appear right now so this is how it will animate okay and yes so same thing I will be doing in this video but I will not be animating it I will just have static you know radial progress for that and to animation to learn that you can go to that video of course it's in my playlist only it's called fitness app and it will be part one so you can take a note of that let's move to this part let's create that design and here so we are here we have bottom navigation bar here in this position widget okay so here we go right now of course we need some padding from both the ends right so it is you can say 32 32 and then from top it should be 48 and 10-spot okay so it is from from top of course we need some safe area that's why we need this reading so it should be 50 left 32 I think from right hand side it will be too much to ask for that I am keeping it low so that we can properly you know have this these bars okay okay so it's a column right so first I'll definitely this is a list tile type of thing but in list style title cannot have lesser text size but we will be using lips type only but we will give our own text sizes okay so let's start I'll try it will will be text and it can be cocktails right so I will I will show you date here something like that I will show you what we are doing then subtitle fine so we have hello David okay and this also we will do it drilling we have image dot method so I have added one more image which is user dot jpg jpg so it's a damn image and it will be as if / into the dot jpg right after that of course it should be sir kilometer let's see the output force forward looks so this is how it looks which is so we will play with the image size before that we will do the styling text style okay color what should be the color so it's black only leave it as it is font size and font weight we have to set so it will be a blue 400 and font size will be twelve fourteen is okay yep now similarly we are going to do with the name and the greeting so it will be 800 font size will be 16 and I say yes so let's see the output yeah great looks great color of course subtitle has its own color defined so we need to give black explicitly okay it looks good right now we can increase the font size I think too much margin has been given from top so let us reduce it to 40 yes nice and font size can be 18 here that's okay okay now come back to this email dot I said let's wrap this in circle theater okay this will make it ideally it should have made it circular but it's not making so we have another solution for it that it's clip oval and this will cut this in our circle shape okay now it seems okay after this list style we can move to our radial progress okay which will be in this thing okay so with we have to pass in something at least so it will be screen height so we have we are actually doing with height a lot so let us take that only so this container has 0.35 height assuming it is point 2 I am taking point 2 right now we can reduce it height also we will give it as height into point two okay and then we are directly jumping to creating the radial progress with these two and we will see how it goes any further well variables we need or not so simply creating container before that yeah container will be sufficient so height will go in height and width we go in width okay let's see whether we have given incorrect width and height or not so this is how it looks now since it's in a column everything goes in center okay so first let me minimize this everything goes in center so definitely we have to do cross access alignment to the start that we generally do in everything okay and okay so it has come beautiful we can say sufficient gap here so it's perfect to take point to multiply by screen height in this case let's minimize this also right now we need to add custom paint to it okay and the painter will be nothing but you can say radial painter because that is only going to do the things for us now this will need what is the progress of this radial okay so let's say 70 so we will pass in 0.7 to be in double and we'll create a class which will be radial painter which extends custom-painted okay okay fine so this has canvas we can play with that and should repaint will be done through right now first of all we need to you can say we need to yes we need to take progress right fine and we need to create a circle first of all right so this circle how you can create let's get a paint paint will be nothing but a this blue color with some width and strokes okay so stroke width will be equal to 10 and then weight steady format it color will be as you know we have this color right then we will have our stroke cap which will be stroke cap got round and then we will have one more thing which is no nothing else probably this is the thing right and that form in this so we have a painter now we have size so we need to create a circle so let's take an offset which will be Center okay so how do you find Center size or a bit by two size dot height by two now in our case width and height are same so we can take bit as well but it's okay okay what is this problem okay it says propositional okay we have not made this parameter as positional thats why this error goes there now we need to draw a circle so canvas draw circle with this center radius will be size out of it by two and paint will be paint okay so let's see what happens and how about example so let me remove this we can see the circle right yes yes in the circle but it's a fill type circle so we need to give it a style which would take painting style dot so there are two types of painting styles one is a stroke other one is filled right now by default it is filled we need to use a stroke for that and if we use that we can see this right now which is perfectly fine the thing is if we see the design it is progress type of thing right there is no compete blue should not be there so we need not to create draw art we need to use a we need not to create circle we have to use arc okay so canvas don't draw art now arc I have already explained in the video but arc is something it starts from somewhere it has a start angle it has a sweep angle it asks whether you want to use the center or not and the paint with which you want to paint it so I will tell you what all these parameters will be change what will happen so how you will create the rect so basically rectangle will be created from a circle okay and the circle will be having this center right and the radius of that circle will be sized or bit by two okay so these parameters will create a rectangle okay so we probably don't need this now oh we need the center but we do need this line yes start angle so we are going to use the radians for that and to use radians we need to import a library which is which is vector math okay 64 and as so that we have a simple simple name to call the API methods okay so we are going to use math dot radians now I'm going to use it let's see what happens if I use zero okay and let's see what happens with when I use radians you can say minus 90 or in plus 90 let's see what happens let's see what happens when we use true or false and yeah let's see what happens is all these parameters because I know but I want to explain to you what all these parameters mean right so this is how it is created fine now it is NewsCenter so if you make it false it will be this shot nice now let's see where is this radiance and where is this 90 so if I make it minus 90 so it starts from here right these radians is a sweep angle so how many degrees angle you want to create if I want to create a negative angle it will be like this right so in our case design starts from here zero to this thing right so it is zero oh sorry and one significant fact here is zero is here minus 90 is here okay so we re starting with minus 90 if we start with zero it will start from here and it will go 90 degrees in the minus direction in the reverse direction that said we are starting from 90 and we want to move is this thing right so probably right now you have passed a progress value so what does this progress value means so progress is something which is defined out of 10 and radiance is something which is defined out of 360 so how you will manage these two relations right so probably you can create a double value and you can say relative progress okay now this is just a mathematics we might not get the formula at the first place but we will get it so you know 360 degree is a circle right and progress is something so it can be divided in can be multiplied right so we will get some value which is nothing but progress in terms of 360 right so we will try to use this related progress okay and let's see the output so basically this is how it is but this is in plus we have to just add a minus sign because you want to reverse thing right so I can say my progress was 0.7 if I make it point seven five it is 270 degrees right so this should come here let us see whether it is fine yes and if my progress is completely one what will the output a complete circle so whatever the progress is the arc will be drawn right and in my video I have shown you how you can play with the animation path so I will not explain that it will waste a lot of your time and you can probably go there link will be the definitely in the description as well as you can see the card on the top hand top right corner right now this progress also we need for this radial progress right so we will probably have one more variable which is passed in from top level right and where we are using radial progress yes so it is configurable from this point so it is 70% progress and hence this is the output of course this radial progress have to show something else right it has to show 171 cloak and calories left so for the day how many calories are left it has to show that so you will go to your trial here taper call number take a children or you can use rich text I will prefer rich text here so don't use all them rich text rich text for many of the problems like these then you have similar text so right now I am hard coding this you can definitely achieve it with dynamic content so which steps takes our text which takes the extra spent which takes children as Texas man so my first Texas pan will be one seven three one text on sorry one second Texas pan is nothing but line separator the third one will be to look a little white and we just need to be the style font size will be too much so we take okay this is the color yes this is the one okay similar color we will have to take for this consumer and it will be not that much fooled phones like the locks will be 40 let's see the output okay it's not in center so what he will do you will probably move this to Center and it has come in the center but all this texture line has to be in the center as well so in this text you can program the Gaels after the style no you cannot so let's I should it turns out that you cannot get center align so how you will do that can you do in children style should be in center probably nothing works out then we are in a bit of trouble we are not in a trouble I don't know for some weird reason extra line was there and I could not find it so if you use text-align:center it comes in center okay if you if you don't use it is on the left hand side if we use it it comes in center and all the text is in center now all you need to do is just wrap it in a center widget so that it comes vertically in the center okay and now we have to improve the font size to sufficient amounts okay it's still very less yeah I think it should be fine okay so it turns out that it is too much yeah this is fine this is correct okay we are done with this now we need to focus on these things and fortunately again in one of my video and these are very recent videos let me show you again so I'm going to my channel and I can say that mmm this one not I'm sorry okay that's what we use so I was talking about where's that yes so if you see steady rap flutter concept you have this progress bar if I'm not wrong you can see that somewhere down the line I can show you yes yes so can you see this yes so this is also we have created if you want to learn about this animation you can switch to this video after you have watched of course this one but a same concept I will be applying in this video as well but I will not show the animations so let's do what a small thing is left so basically go to the pub centro DML we have all got this date here so you will have to add this package int L okay this will give us to work on date/time formatting okay so minimizing little progress minimizing this ending everything and this is data hello and also I want to yes I want to increase the font size of these 18 and then you can see that you will have some errors here so we will see that in just a second there will be definitely an error no it's not an L okay fine that's together so this date here there should be some gap right so that's what I was telling about it should be 1/9 oops yes now it's okay for 1/8 which is fine it should have some size broken as well as a gap great now this data we need to handle so we will come here and with let's see what is output it is Saturday , 18 January okay so why don't we take date of Kuwait finals today which will be date time okay and then we import this package I until now come back to your radio so my date will be let's format that so it will be date format dot you can say you can create your own format so it will be Saturday you need so it will be like for ease I think then reformat it so it will be today okay let's see the output first and decide on what is okay so Saturday we have got got now we will move this two curly brackets will add double quote we will add a column so that we have a column now and now we need to work on 18 January so similarly we create another date formatter okay which would be now deed and let's see what it's okay so 11 we have got and yyy what is that January so no it should be mmm so no mmm no let's see this perfect if we do this yes so this is perfect thing that we have done okay now we will work on this progress so coming back to the ideal progress dr here some here somewhere which is in a column of course we need to move it into a row now because on the left hand side of radial progress we have a series of other purposes and such so that other progress we are going to name them as okay it should be straight let's switch it as I am NOT going to show you animation that's going to write this okay then have this is very easy to do basically not daddy do but final strength this name of the diet progress and left so it's not tight progress its ingredient progress like all nutrition because what are you being then you will have left and okay these things these three things you will need and of course you will need color also you can say progress color right look fine and one more thing not to yeah that is okay now we will add constructor perfect okay we'd have to use stack or before that so let's see how each of these things it's a column of elements in a row right column then you know it's something like so it's text which in the end will be something like all sides you have 14 or 12 14 18 wait maybe and one thing the text a lot sorry could we do uppercase right okay now before below that you will have a row of element and it will be like okay so it's a container which has color which is green color okay and then like a text which is left amount so we are going to lose dollar left amount plus right okay so we are going to use this so that we don't have a space after G before G yes and this should have a declaration which will be you know the level of order radius and I dropped n so border-radius will be eight or five is sufficient because it should be just half of your height so that it is completely circle from the edges okay now let's use this for ingredient book progress after this why the why this every time gets minimized okay so you have column of which main axis alignment space between so that there is if there are multiple things like multiple ingredient progress then they will have equally spaced right so ingredient here will be right progress zero point that's a very less because it's just started probably so we will take point three for this point two for the second one in point one for next one over stellar it's green we're going to take green and then left amount will be 72 that's it okay similar things we will copy put it here this time it will be cobs progress point in its light because some people think gods are bad should you do right it will be fat one yellow amount left will be sixteen right let's see the output okay ever so we will see this why this is a window overflows for K so it's huge which sellable something wrong with the height it's too many pixels Oh so if we are using box decoration have to use color in the box equation right because of that okay so what is the weight so that is a huge thing to do with let us take 200 okay it's too much so what will be its according to the screen now right so--but also we need to pass math final okay since we have two longest let's not let's pass with as well right so depending on the screen you know that this thing is 0.2 of your screen hunt so you can probably do one thing that you choose your radial progress not with your height but with the width okay so we will choose bit now instead of fight for our radial progress let's take variable okay then when we come to ladle progress we are going to use width into 0.25 which is wrong probably yeah we have something it electrical okay it is very less so we definitely have to leave it but what should be the value so let's hit and dry now point five point five is too much sorry 1/5 is too much from 4 okay looks ditto right so now point 4 is occupied by with this so 0.5 probably will be occupied by your elements like so I am taking width in 2.5 it is needed the width is needed you cannot neglect that let me run it it turns out that we are not using the weight that's why so again we have to be like this why this guy always keeps on you so our wit will be with what is fast it is too much so we need to change this rate to point forward we are going to not respond three looks nice right of course it is 72 grams to 52 grams no one is going to calculate it on the base of this so they're going to use into noun so that the point zeros are not there as well as you can see we took a lot of margin from right-hand side right that's I there is a gap and we can choose some size box we are almost there for this progress to be done you know yes this should come in the starting project it is not starting properly maybe this rope does not have left in it like there is some you should definitely then what we can do with this since it's a row you can have some spots in between these two items so basically I made it from here to here and then I can also make it move it right I'm amazed to see that this is not starting from proper point and why is that so because this is 250 glam left that's why okay so we need to fix the width right fine we will be with that okay we can play with that so if we add expanding digital it takes a lot of okay and yes so same errors probably flexible we can use yes so we leave sweet Sybil flex fate so yeah it's a problem it's very it's not a problem at all so I was digging in deep this column we have given cross access an event as a start which is okay but remember these three things are also in a column these all ingredients so for that we need to be process alignment as a start otherwise they will be in center and now it looks powerful fight so we need to add you know a space between is already given so why they are not taking their own space so let's try and then in our expanded widget and let's see if they can take the space no they are not taking so let's try bit flexible if this works then it's flexible flex fit or closed it's not taken again I don't know when it works basically maybe in all these I have to add then it will work and it will be a good learning for me as well okay so I have almost padded everywhere flex it out it it doesn't work that we lose it doesn't work out so it turns out that it is not taking equal space by any means it should take all ideally space between is already there and unfortunately these people are not taking their own height okay so we can probably yes we can do one thing I got actually I got our solution so we can add as paper in between these two something's really wrong nevermind we will not add a space then we'll just use size box with a very minimal gap that we want which is 10 which is sufficient also and it will probably throw that we work with that yeah that's fine ok now we need to show the progress right so how you do that that's very easy for this case so this is our container well wrap this in our stack okay so what is the progress in this case on top of this gray box we have this progress right so we are drawing something on top of this container which will be very similar to this container only the width will be your width into the progress okay and color will be Providence color and you can see everything like this green red and yellow color now if probably color is too much so we are going to use play okay we are going to is black well yeah okay we are done with this we are going head into the second screen let's create a new god site which will be work out screen so you need a scaffold here as well and I am going to take a column and I am going to wrap this column in a container or a padding digit where I can give horizontal padding listen to give that is there is a horizontal padding from left and right hand side that's fine and since I'm giving yes yes and this padding I can wrap this in a single child is called view because I want to make it a scrollable right and since I am giving padding to water to horizontal I can also give to vertical because it will make sense to have some padding on top of here as well as at the bottom to encounter the safe areas okay fine now in this column I'm going to add children so first child will be my list tile now sorry first I will be icon button so I can read II the close icon color of that will be white and size of length 10 to 40 on pressed I will have to navigate back okay then after that let's see what is left out is there so there is some gap so I will use your size box height of that dividend then I have a list tie leading how will be similar saturating Chenery that we have here so we'll go to our profile screen and figure out for the for today that's what we used so this is about format and style so I am going to water screen now and using it here but convert text widget that's it and date format I will have to use a ints again and before that I will also need to have a variable this will be today it will be holding today's date right so this will work color of course I need to give now bit different so it's white perfect leading is done now we need to give for us sorry it's not leading it's a title okay leading and now we have to give subtitle there is no leading here so the text we will copy this widget increase the font to 24 change the text to upper body and what is it yes upper body color will be white fullness 800 perfect so let's see the okay so before we see the output we need to add a place where we can navigate to work of screen so that place will be let's search for body so it is returned here it's in this column which is in this container so they wrap this in a gesture detector widget which will have app and navigate a dot of push material page route the screen right okay fine let's run it now if I click on this I navigate to some screen right so this is my screen of course I have not added background color for this which will be the F of the colored and it looks like fine so the padding which I gave as vertical padding does not seem to be nice so we can drag this icon button itself in some body so that we don't mess with this vertical padding anymore and we only play with our top padding for this button which can be eight or sixteen with sufficient size okay this looks nice now what we have to do is we have to increase little bit gap between these tools just 20 it might be sounding a lot but 20 is okay let's keep it as it is now for list style we need these two elements so what I will do is we will have a trailing widget now and this feeling widget will be your column and each item of this column is sort of a rule right so it will be a row children and it has icon dot o'clock so somewhere it was time it's a style color of that will be white 30 and after that there is a text of 60 minutes and probably yes color I have to get so let us try color will be white 30 that's the output okay it has come here so something wrong row which is the trailing so this rule takes the whole thing yeah nice so it turns out that row takes complete max so we have reduced it of course we need some gap between these two and this white is little bit more darker that is good wait also it has something else so 600 okay great now we also can increase font size which can be 15 16 okay fine and there is a fine spots so once we do this we can replicate so we can replicate this one room we can copy this some pleadings and put it here we have easy and I can I don't know where it is so it's sort of a performance or rating sort of icon let's search if it is there so it's like okay it's a meter is it there's something called meter No so it will take a while to find a suitable alternative foliat for it is it something speed let's take this small the time sake and it is easy so column will be cross access alignment and start it's always required in this type of you eyes so it comes here and turns out that there should be sufficient size box gap between these two and it is too much so this will be fine yes now a very interesting part after this list time we are going to add the workout list right so as usual the way we have added these items we are going to add ear item but mayn't think this don't forget to think this thing see this thing that give three or set of four chests these are for back and this sufficient gap between all the sides right so I figured out a way we have created a model okay I have created a model which is upper body model upper body workout which has we me is part name and instruction that's it so this is in each path name and instruction now I have created a list of this item okay each of these item is a upper body workout and created a list of this I've created a list of this and has created a list of this all these three lists are there in another list okay so it's set to double array list which you can see here in this scenario so it's a list or chest workout and this is a list or you can say back workout and these both are in upper body array okay epic upper body list so coming to here we will use for loop in I equals to zero I less then upper body not length so what is the length of this it is three right so there are three later - sorry - one and two right so it will run two times and we don't need this okay now you need a column for it right you will have a column which will have its last element as a size box because its height should be 20 or you can say 30 right what is that gap this is the gap okay now other than the size box the last item of this column will be size box but other elements will be list of these three things list of these three okay so you are going to use another photo this time you will use into J equals to 0 J less than upper body I dot length which means that it will tape now three lengths okay so this upper body J dot length is three okay so this thing will run three times and now I will use this pipe again okay this time my title or leading will be nothing but this container that I chose right so this whole container which is already there in this screen this thing I am taking that okay so leading will be that container of course the size has to be little less and binding has to be little less - and radius also similarly this leading color white everything is fine but icon will be changed so it will be upper body I J dot image path okay so imagine loop is running for the first time it is zero index for I then it is zero index for Jane so it will print this thing right then it will print this than this and once the loop increased with I equals to 1 there will be a sized box okay so this is how this is going to work after leading you will be having a title which will be upper body I J not name and you will have a subtitle so basically this was in a text widget this also will be same for instructions what right and we just need to do the Texas times for all these fellow will be white so worried the color white and this is by 70 130 size will be 22 weight it style you can copy [Music] 50 100 yeah and actually the magic and the error comes okay and I static target something so where it is that maybe then I straight ever that's not the problem so I'm clicking on this I can see pistol right of course there is no gap here so we can do one thing but it is okay it's not that bad we can just increase or icon again little bit so we'll go to walk out the screen we will make it as 45 45 yeah that's great and we can make this 70 okay great so this is how it is but before this column we will have a size box required after this list I'll cancel yes look straight so this is how it is there is a sufficient gap here you can add some more gap to this by adding a margin okay engine sits only bottom as eight so it will further add okay it's not adding because it's this bit and height that's right remove that not needed at all but this loop state you can add multiple things here so let me just add it okay or I believe it to you it's a scrollable I can show you why I am saying that because if I add two more then you can see that if I click on this they will be before okay so it's like this and sufficient now what about the animation as I told that it will be having animation so we will go to this animations package plug-in it's a beautiful plugin so go to pub spec go tml and add this and it will be I can as I can see here it will be your container transform okay so to do that you will need to have go to profile screen get dependencies okay then you will use you will have to use open container so it will be like where is that box I will show you that yeah yeah so you have to wrap this in open container because this is the entry point of your animation that's why so open container has this open builder and close builder so open builder will take a context and a void callback you can return what you want to open okay so it will be work off your screen that's it so you can remove this but I will not remove this I will tell you why closed builder will be again it except index and avoid fallback so it will be open container I'm just naming it okay and it also won't store it on a budget that widget will be about gesturedetector okay so these two things are done inside gesture detector or in on tap you call open container remove this and call open venturi that's it and now if I want to run it I will click on this and you can see the animation right so this is how the animation is going on oh but this material I have seen here somehow so after adding open container I have seen this so probably open color or closed color it should be color so transparent okay don't add weight so it should be my a full color which is 0 x SS e 1989 and there is some elevation so we can probably move that as well open elevation close delegation which is 0 great so we have achieved everything that we had transition duration is there transition type is there so in type you can have 2 things which will be you can see what is the type of it container deletion tight container transition type dot fate - I think it's the port will be okay and if I click on this it animates to that and comes back right so this is how fateful works if you want to use fade you can use fade so here fade it also okay duration wise since I'm recording also so you won't find that efficient everything but definitely when I'm not recording it's pretty smooth these are kings mm let's just I want to show you the animation so this is how the animation is okay rest all you can play with it okay fine so we have added the animation now only bard left is this easy has the screen right let's do that okay we will create a new page which will be me I'm going to use sleep slavers either here so custom scroll deed which takes in slavers but first one will be slave or a bar and second one will be slave or child a slab or fill remaining slave a list again anyways so in slave or a bar I will have a background color which will be similar to not this one yes this will be the color but here it will be or the color which is here okay so now background color is done we will set flexible space which will be flexible spacebar and it will have a background which will be image dot asset and this asset image will be coming from the melee which is selected we are going to help me here okay so it will be meal dot image path box fit we will be using cover and then expanded height will be due under oath of 300 yep fine so and do we have something to play with the shape yes so it will be rounded rectangular border which will have border radius vertical bottom 40 okay so only from bottom we will have 40 radius so other than this let us see the output and how we can play with it so go to profile screen figure out where is food granola basically where is your food for loops so it's here it's a meal card in the mail card you can wrap this material with a gesture detector the reason to wrap or this material with just edited is the container which is a parent of this material it's just for Manson right that's first so on tab you can navigate so whenever you leave the dot so the page name is wheel detail screen and we are going to pass in the middle that we have here right so this is how we will be reaching to our second or third page which will be me little screen and so let's run it okay I'm clicking on this okay moving back very nice right right so we have this image but unfortunately we don't have this now and yeah it's a scrolling which is good parallax effect but it's not shaped so probably if this shape is not working we can wrap this in clip and left right and this will have over border radius as vertical bottom 40 right and we have got this unfortunately this color is blue so what we can do is then in this case we can we cannot use this so we have to figure it out how the things will happen here so it's brightness then no so there is nothing search like this probably shape is not working so we can do one hack that just I thought of it you can take a stack okay and basically in this we can take a container which becomes the background of it as our sky for background color so if this works then it's okay otherwise don't know what to do an object isn't works that way probably the height of this can be 300 but it won't go or they know it won't work it doesn't work that way so let me figure it out oh can you tell I keep kept trying on this so let's see this this is what we had when we click on this we have this right and if we give border-radius we can see the blue color because the background color is blue so I thought of giving shape again and when I gave it it turned out that lets you know what the radius all and you have to give the same radius that you have given to your hip effect okay so if you run it now you can see that it is completely working and if I scroll it it moves like this right this is okay and fine so now we will work on the bottom part so this delegate will be a slave or a child list delegate which will have multiple children okay so our case let's see we have this little size box and bit further than food kononova and everything like that so we would have some size box first height will be 20 then a let's try right so I think this list I'll is matching with this one so we'll copy that and here we will copy this thing or we will directly copy this right so go to work up the screen and this is of all this style so we will have the all the font sizes and all only we need to change the color of it so we copy this date format instead of that we have to provide meal dot type which is sorry we not meal time okay white color instead of that we will have gray to blue gray fine and it will be all caps which is not here so we will have to provide it so it will be done in here to uppercase then for upper body instead of that we have the male name right and color will be black right after that trailing will have 27 okay to 71 so this is not a row we will only have this text so you can't rid of this row will have only text here we will have dollar meal dot now we will have to have double quotes first then meal dot close calories space these okay color of course it will not be a white let's take three okay then our ten minutes so we don't we don't need yeah we need the size box shutter speed we don't need we need a time which is excess time and color will be after that we need minutes so dollar time taken need or time taken okay let's see the output okay we have got this nice text color will you make it as three okay we can see proper thing it is this you know the decimation so what we can do is it's very easy to handle these type of issues so what is your so definitely we need to write will add a row and size box we can add as so we will add the icon size which can be considered something so with we will take 20 let's see if it works no it doesn't work that way 30 then main axis alignment we are going to take a steps proper okay so that is powerful now we need to work on you can say you can reduce of size and make it bold so let's make that it will be bold or and it will be 14 so it looks great now we need to add sorry we need to add these things so what I have done is I have already added too thin to things more in my model which is me yeah so we had these five things before now I have added preparation and ingredients so this is my preparation and these are my ingredients okay so I've added in the constructor as well ingredients I will add just in front of you it will be one cup of granola then the second item will be one banana okay third will be half cup of raisins and forth will be 1 tablespoon of any TSP honey okay so we have ingredients we have this huge string of lorem ipsum text with the preparation so let's do it go to militate and in the below ok so this is my second item my third item will be again a size box and again taking this title or font because the font size simulator is similar then the text and this time it will be a hard-coded string which will be ingredients ok and below that you will have a polymer okay then there will be multiple texts so for loop we will run I thought so it will be meal dot ingredients dot length plus plus it will be a padding legit because I will see I will tell you why then padding then we will have okay so I added curly brackets but mistake in a flow so it will be bottom because we need some bottom margin then in child given our text text will be similar to we can say one cup of granola okay so it is mean ingredients I okay and style will do it font size font weight it is normal so probably we don't give it font size it will be 14 let's see how it looks and color will always be black in this case so it doesn't matter and let's see that okay we cannot see the ingredients probably we have tons of mistakes or it's because maybe I have too hot restart because slavers is later difficult to work on yes so it is working with that piece just idea how to restart it and it is working nothing else so everything is in left-hand side of course we need to add padding now to the left-hand side of things so why does it it is happening at the list time so let's try and probably it's already I think it takes some miles in that file so what we will do we will create padding for us here for ingredients it will be somewhere around 16 so we need 16 from either side and this follow itself column also will have of course I knew I will need a sized box for this gap and there is sufficient space so I can add 2 more so that there is good space and I can increase the font size to 18 that so that the text is you know bigger than this at least or let's settle visiting this is great and boldness I can do little bit because it is after all instruction it should be visible now now not much is left in that you copy this thing you copy this padding digit with your size box and after this padding widget you can add it we will add variation right and left all remain same then you will add this spreading and add it to the pair which will be mean dot so this will be your value of progression let's run it and we have the situation of course we don't have from left hand right hand side because we copied this one so we need to have and we don't need bottom so probably we will copy this and or the phone till 16 yeah so this is how it is and you can see beautiful scrolling right go through the application right yeah it looks nice to see the such output and probably you can add only here and let's write bottom as 12 or 16 bit why I'm saying because I want some margin from bottom as well and this was not there so you can add 32 after you add it's little bit more and it's smooth smooth smooth scrolling and you can you know play with your slaver f bar a little more or you can add a snap so you true make it true and run it so snaps floating so you will have to make it something else floating in true so it's like it should be floating as well as the snap so this happens it means once you scroll little bit down it will be completely scroll okay so this is how it will bar right so you can play with it and give me your response in the comments section I hope oh one thing left sorry so as we talked about animations let's add similar animation to this okay similar to this so you will go to this I would say go to the image system this is your flexible image wrap this in open container okay which will have open window and it will be your under school you will return what you will return me little screen right right and remove gesturedetector you don't need this probably what will happen is we will only have this thing clickable but right now what I want is I want that image should go and match with that paints pixel okay I don't want X to be elaborated so that you can add anyways according to your requirement context here you will have open container which is a callback so you will return something and what you will return basically it is flexible that's that's how you you know refactor the things that's it okay and here in open container or you can probably make it else okay here you can effect you can use open container directly which is the callable method and yes I want it left from Shing durations which I will just for you your sake I will make it as 1000 so that we can see that okay there is error so basically this requires not the gesture detector so we have to move this just rejected it's funny still not running flexible you know depth what is that open continual oh okay got it so it requires flexible here so whatever we did we did it under it all the way we will remove this remove this so flexible cannot come here so what we will do is oh okay we add it here okay so just I have copied and maybe I will have pledged some more parentheses or do one thing let's work it again so this is flexible open container is there we'll wrap this in open container and over closed a builder so basically close builders say that this is a the UI that will be active when it is closed okay so this is the thing that is active when your item is closed which is the item which you will be clicking okay and then we have a form builder which will be the same thing that we did before so it really just returned details screen with me okay so it's almost done now we have to see the transition relation it will be so you can see that again we are stuck with this curves so we can again do the shape thing which is closed shape it will be rounded rectangular border and it will have Auto radius similar to that so it is I think indeed less and it looks fine it is back to its normal state now if we click you see the animation see this is the beauty of this library it properly you know transitions from one is pin to others can we are using scaffold we are not animating this out of the works we are just using a scaffold okay so if I click here of course there will be error because there is no ingredients so let me add just for your sake this whole ingredients and preparation I am going to add for these also so that the app doesn't crash and you guys can easy so now that will not crash and I'm please starting so this is the end of the video guys if you liked the video please hit the like button if you're not a subscriber of my channel then you can hit the subscribe button as well and thank you for your immense support and yeah so difficult for this video and I will see you in the next video let me know in the comments section below that how you like the video and what else I don't think something is left in this video but then also I will you it will be great support if you can let me know let me know in the comment section that if you have liked the video okay and if I have missed something so that's it from here and we will see in the next video thank you

Channel: Techie Blossom

Views: 47,052

Keywords: Flutter UI, Flutter SDK, Sliver, RadialProgress, HorizontalProgress, Material Animations

Id: DCskd6_GJtY

Length: 121min 1sec (7261 seconds)

Published: Fri Apr 10 2020