Animated Button | Simple Animations - Chapter 1 | Flutter

[Music] welcome back to my channel today I am just starting my another series which will contain basically very simple animations that will be very trivial to the application but they will add a very good experience to the user okay and this is the first video in this series I have named it as simple animations so later on if I find some difficult animations I will create another series but for right now this is one of the animations that I will be showcasing you today so talking about this animation this is from med-surg ik if I have pronounced his name perfectly so what he says is you have initially state of your button as confirmed when you click on it it goes into the tick icon and then after that there is a tick I can end the text so what I have thought is we will just simply create a container okay I won't wrap it inside material button because material button already has some padding inside it and this will actually hinder our borders so if I add borders to that material it will be some sort of issue so people without material button we can go with material itself and work on that okay and let me just change it if you are getting some noise so please forgive me for that so I am just writing a little simple invention okay this will be a title of the app and here in the center widget I will just create a container or let me just start with animated button so this is our own button that we create okay and inside this will pass something so I am actually trying to create this button as I would say we will create a widget custom widget and everything we will pass in here so when I say everything I I mean that the color of the button when it is in the not click to state so this is this green it's my first color primary color I would say and second recolor is my white color which actually actually comes when click on this okay now I also have something called duration of the animation so I will pass in the duration also here also I will pass in the Styles exercise of confirm as well as successful so first Texas initial Texas side and the final texture sell to these all will be passed into this animated button so to do that let us create our animated button dot file and start very simple and believe me guys I have already done this and it's it has come out very beautifully it's almost and it's actually 99% matching this we won't regret you won't regret after watching this video ok so inside this container first of all let's I would say let's just be 8 some things so some strings we will create so initial text this or user will pass and final text so these are 2 extra strings ok final and we will be adding color so or we will be directly what I would say I will create our button style class ok that button style class will comprise off let me just show you here button style class will create and here you can directly mention initial color or initial text it's time right and I would say let us give the type of it so that it's more meaningful to you ok so Texas time initial text system and final Texas style so these Texas styles are different so my initial Texas style will actually contain this white font and final text style will contain the primary color of the button ok so let's add two more things final and second yeah let's because it makes more sense when you write secondary color and primary colors now we can also have icon size or that can that if not is specific to the button so we can add a final icon data and we can get first of all we need to also have icon data right and after that we can I can size it car let us take double because I am just generalizing this button before is talking okay so don't think that I am just doing a waste of time it's just initializing of the variables so that we can actually use them now we can also take a duration so this duration will be on any machine relation later on I will add one more thing not right now because that make that might confuse you animated button and then we can simply text and we'll take some bigger display so that's just nothing too much think about that okay so this is how my constructor is being created why it's not getting formatted maybe in the later stage might get so okay now inside this okay let me just complete this also okay right now initial texas-style primary texas-style secondary color okay let's go ahead with this when later on we find that we have to make it more generalize and then we will make it okay this dot primary color this table secondary color and they start initial exercise and this dot round it'll just corrected final so okay we have done that now what is the logic behind this first of all let us take our material and okay I will add color to it later on then we can ever tried and before that we can all say okay got it so inside button is tell you can have one final elevation right so that user is able to a user of this widget is actually able to decide the elevation that he needs okay so the system now we are done with elevation we can use Richard okay not widget so before this we have to convert this straight less widget into a stateful widget it was my mistake that I did not do it beforehand and let's since we will be adding animation to it so let's do a single ticket or sorry picker because I remember we have to use multiple times we have to have we will have multiple tickers in this okay so elevation coming back to elevation we will use widget dot button styling dot elevation so this is how we will be proceeding further now in 12 we have to it because we have to handle the click as well let's add child and let's add content and then this we will be doing something here now okay we let's have a container first before that I would like to create one more thing so how we start with this we have three states of this button first is only text showing the text and second state is only the icon has been shown and third one is stuff I can end the text both okay so we will be creating our you know okay so this will be button state where we will have show only text similarly show only and third will be show text right okay we will deal with this and okay okay now getting further ahead let's take a container add some padding to it so initially it's not constant it will change actually so agents instead start symmetric horizontal we will be taking it as very huge actually so it can be 48 because as you can see in this confirm has lot of padding in this and as well as successful also has so this buttons formal padding will be something like this and then vertical padding we can take only eight okay just we will see we will change it again so then declaration so let's not worry about decoration right now and let's add color to it primary color so we can access that which at all buttons primary good right and then yeah so we have to make so this will be a row now we have to add multiple children in this so this is my complete row and based on state this will be visible this will be visible and everything will happen so we will first consider taking a complete all the elements means we will be first handling short text I can state it but not checking it so just adding everything here okay so first of all let me just also okay I mean exercise taught me so that it doesn't take much of the size then I will have children in this and inside that text I will have so or before that I have to have I can also my I can be icons okay I already have icons so digit odd icon data plus size will be Richard dot icon oh yes now I also want to have color and this color will be my primary color because this button actually deals with this dad only so widget dot but in his style dot frankly could you know this right tick icon color is green and that color is similar with this okay so we will be dealing with that right okay then our text will be a widget taught right now it will be initial text just like that style will be widget dot button style dot initial existing right and what is this okay so we have to add a comma here okay i formatted the file and yep now let us check what is being displayed I would like to see how much it is done so we will first import animated button and then what we have inside that we have multiple things so animation duration we can leave because we are not using inside right initial text we can directly pass in confirm and final text can be since we are not using phonetics well so it won't throw any air if if you don't pass it so submitted then initial text is trying on through was here so by so we have to first let's deal with icon data so which I can be need we need I can start check yes so we have fast in icon data you might be wondering why I am NOT passing icon directly here right because this icon data needs only icon data not the icon and this check returns I can take down okay that's fine okay then we have icon sites so I am just giving some size then we have button style so let's create button is tell for this right what we have in button is style okay so we have primary color so color start green dot shade 600 was the color that I eventually found that it should be and my secondary color is white as you can see here it's white background okay and then we have elevation so elevation I will like to give 20 as of now right now and initial text style so let's introduce texture style here and you know what will happen if you don't give text style here you know suppose you are doing like this then what will happen okay let's just give me let me give you see this return type is dynamic and you won't get hints what type of thing you can actually use in this so it is better if you know the type of variable it should be you should specify it okay then in textile it is very simple you can give 24 font size color you can give primary because it is initial I would say other start green or shade it is in my initial text okay sorry sorry my initial text color which is confirmed so confirm has text color of white okay so colors white and then have nothing else right now in this then I have final text style which is exactly Flickr of this but with a different copy with a different color sorry so here I can have Green not shade 600 right now I have this file formatted anything left in this I guess animation duration is left not in button inside but instead we have completed all the five things and come out of button style and see an animated button so we have animation duration it is better to give any mission duration on the problem and so it's perfectly with you voluminous then constraint duration we will take milliseconds 1000 right now only 1000 ah okay we are not dealing with animation duration we are not dealing with final text right now not with final Texas time so we just want to see what is the output of this okay I am running it in my iPhone simulator okay now while it's running let's create some animation controller it's just a ritual you know when you are using any missions you should have this and also you need to state so that here you can actually initialize the controller so this has nothing to do with our output which will be shown let us run it now so this is controller and this we can pass here okay I know no problem in that okay let us not go now and just use it right oh it's not running again so let us first write this pod also for that we are done with the formalities control dot I suppose yep now let's run it let's wait some five six seconds not much is left we have done the foundation work in this animation so it will be done very quickly and almost MMX to match next 5 to 10 minutes it will be done it's very easy yeah so ok so this is the button ok fine no problem with that oh ok icon is not being shown here yes I can should not be shown but it's there you know it's there if I click here I have row I have icon so I can is there but since it's matching with the primary color so it is not displayed here but it should not be shown itself so now what to do you know I would say let us have a variable but in a state right and that button state will have current state right and let's make it so current of state let's initialize this current state here so what we want is our current state it is nothing but button state dot show only text right fine then on click of this button we would actually like to make the state has first of all so there is two states will changed so let me first make first animation current state equals to my button is state yes dot show only so let's do it first this thing so when I click on this icon will not be displayed or text will not be displayed only I can be displayed let's do that fine so to accomplish this we need to check what is the current state so if current is say it equals to equals to button state dot show only icon then this should be shown otherwise we have to show container right yep so I have forwarded the code this is my condition it's better to put it inside parenthesis so it's looking like we have this complete condition then copy this condition and if we have show only text then display this right yes we will will actually modify this right so let's try and on top of this put this statement inside city state so that the state of the button is changed and this gets red when the when this build is called again okay so let's run it and try to see what its output okay so there is some no problem okay so Texas there okay so otherwise if we don't have show only text we can show container so we are dealing with two states right now show only text and shown live icon so this is my pattern but this is how this has come very peered what we can do is it is taking complete height I really should not so let me just check it okay fine so I have to fix my height now so what should be my height of this container now height of this container is sum of two things my widget dot icon size close whatever padding I am adding so eight plus eight it is sixteen right now this is my height of the button let's see if it is fine okay now we have perfect button but there are curves here there are curves here okay so let's do that we can go to the question in boxed equation right inside box decoration now we have to give color to it and we have to give border to it and we have to be border radius to it okay so let's give this three things so what should be the color so if my current state is show only icon I have color as for a certain develop which is white so which is hot button style dot secondary color otherwise it will be a dot button style dot primary color yep I think you are understanding this okay so if I have stated only icon what is shown here only I can has a background of secondary color white color right yes now go to bottle inside water you can have something called as border dot all and color can be similar conditions actually not so similar so if I have only icon right what is the border color it is again a primary color right and if I don't have icon it has actually no border no border is there so we can pass in well here right then border radius also it is common so we can have more the radius it is common for complete radius and then we can give here ten now I thought I am thinking like this that I can have this value also as our custom value so here in the button Israel itself I can add one more thing final border radius okay so this pottery did I have to give and here I can pass it on widget dot border button style dot about a days and this I can pass from insider but instead for the radius take on that so this map of the radius let me just put it back time does it take it's not taking so let me give ten first what is this is not defined in the button is J oh yeah so I forgot to add it inside constructible yes yes permitted it now it's working okay let's try to run it so how it looks fine color not equal to null no problem this is our own or not a big issue color if you are giving in box decoration you should remove from your container right now it looks bit messy but it's perfectly fine it's just formatting okay I think this is this you know so fine we can add color start transparent so if in case there is no icon the border color should be transparent so how it looks okay we have something like this why this is because material doesn't have a border radius so what you need to do is you need to give border radius to it and just copy this completely it should be same and your child should have same border and also your material should have some wonder then that this white thing will go on now when we confirm it looks like this but there is no border okay so we need to deal with this now okay so this is color and weight I think I am NOT so let us give ten let's try to run it no no it's not running this day so definitely there is some problem second we color is white okay sorry so surely I can should have primary color so my Potter was there but it was white in color and when I click on confirm now I have perfect them right now we need to deal with something extra we need to again check what is the current state because we need to modify this 48 to something lesser because it should be a square thing when we click on this light icon is shown it should be a square thing and 32 is the size of it right and 8 is the vertical so ok what we need to do is go to this current and if this is the thing make it 16 as 48 so this padding of this button will change based on whether only icon has to be shown or button with my expedition ok so this looks good now not a problem right I think so okay now we let's just animate these things okay after that we will do something fine um yeah let's add animation fun so inside this controller now what I do is when I click on inc well i first start controller dot forward so I am animating the same you know this controller I am starting this controller I won't need this now now inside this controller okay so my values are getting changed from zero to one so now controller dot oh right and I will get all the values from zero to one inside this listener what I will do is I will just show you what it brings first of all so controller dot right let's just run it first and see what happens when I click on confirm I got some error okay duration property should be set either okay fine so we forward to add a duration even I forgot it so major dot animation beautician we have a deterioration based on duration it will actually put the values 0 and then 1 so 0 to 1 it goes now we have to divide transmission in two parts so overall animation duration is 1 second we have to divide it into two parts so confirm once becomes only icon then after that only icon becomes I can winter text okay so we need to divide it if controller dot or let us take this value outside right and then check this value value if it is less than 0.5 do something else it control the dog control the value is greater than 0.25 right so we need to change our current state when it is less than 0.5 my current state is show only icon and when it is [Music] set state and inside this activated so this actually fires and tells the widget to be built okay then but in state so if it is growth and greater than but this 0.5 value it is show only show text and I can vote right and let's now see what happens but before that let me just check so I should remove this right and let's run it okay I believe there will be no animation right now I have to figure it out okay so this happened no problems we will handle everything no problems now what we need to do is umm fine so whenever you might have heard about animated container it actually happen automatically takes color transitions you know so initially when primary color changes to secondary color or second niccola change its primary color it will be happen using animation we don't need to use twins everywhere okay so let's give it a duration of same animation duration or right now I will hide a hard-coded because I want some mathematical calculations behind this and I don't want to confuse you much that's why I am doing a hard coding right now but I will change it now see this do to see the change in the size because we added an immediate addition why this happened because yep why this happened so this happened because initially the color was primary then it became secondary so there was a change in the garage now we didn't have to have this show text eigenstate we have not handled so here we have to handle actually what happens is when the animation is halfway after the means it's actually near about 0.5 this is the state and once it crosses 0.5 so text I can straight has come so we have to handle this now tell me when B when we have to show this where is the icon okay then you have to show icon I can should be displayed when my state is show only icon or it is show text an icon right so this condition is perfect now otherwise it should be a container now there is one more thing there is a sized box in between this successful and it okay so we will add a size box all right and inside this size box we can or give a bit based on some calculations again so if my condition is show text icon then only then only I have to give a bit to it so get letter give 20 otherwise it should be 0 right so if it is text and I can both then only you have to add a size box in between otherwise nothing now to do this thing let us take it insider now to actually get this text let us create a widget method okay and this will actually return based on stage so current state equals to button state dot show only text then we have to return something as if current state does this so if it has show only icon and then else is show text an icon so let's just copy it if it will only text it is my initial text right if it is the only icon it's my container right and I have to add or return a statement also I don't know because in one of the languages it happens God really think it happens so when it is show only a show text an icon it is my final text and final Texas file right and now I can remove this complete switch it right so fine let's run it now what happens let's see okay when I click on confirm it okay fine same thing so no problem something is happening no we will manage it now the color again becomes green so why is it so low because this decoration has the color now if similar conditions this color should be secondary this color should be white if my state is show only I can end show text item so when these two states are there I have to show white color right and in terms of border I'd show if only icon and or if show text icon so I can do with this so let's run it my border is also shown only when I can in text I can out there it's not shown let's click on this find so it has happened now let me just now it's happening very quickly so let us do some threshold works okay so I would like to have this value as 0.2 and point 8 so this state gets changed when it is less than 0.2 and from point three point four point five point six point seven nothing gets updated State is still this for 0.3 point four point five point six point seven eight and after that the state gets changed and then this happens so let's do that so this happens okay this will also go or this fluctuation will also go let me just show you again so when I click on confirm it simply goes to this and quickly changes so why is this quickly changed because of the deviation right this deviation is always five hundred so whenever there is a change it takes five hundred milliseconds right what we need to do is it should be if this is point two it means we are taking zero two point two and point eight two one which is point to itself so let us define a duration variable small duration just I want to just understand make you understand this what is my small duration my small duration is my total duration my total durations twenty percent which is zero two point two and point eight two one so how I can get it my small duration will be let us take this also private moderation this moderation will play a very important role in terms of any mission right so what is this rigid dot my animation duration dot in milliseconds or I would say okay simple waves initialize the duration put some milliseconds into it what is the value of this milliseconds so my total animation duration in milliseconds in 2.2 this is 20% but milliseconds take only in value so we have to make a round of it to int might this might you know it will take it will convert 0.2 - 0 right so let me just make it as round so this complete value it will be thousand into 0.2 which is 200 but since it is 0.2 so it will become 200 point 0 so we have to round it that's it and this is how we can get a small duration now this is moderation you have to assign here small duration and let's see the output okay it failed somewhere it has feel let me just check ok it lost the connection so the problems I am learning it again ok is it still an issue expected to find ok somewhere I missed so Oh fine fine fine so I miss the thing right now this is wrong so it will count it okay let's turn it now this is my 200 milliseconds when it is widget dot animation duration is thousand milliseconds my small duration is 200 milliseconds now what will happen this animated container has to animate its value from one size to other size from one color to another color in 200 milliseconds not incomplete 500 milliseconds or thousand milliseconds so I am clicking on this so it becomes like this okay let me just increase it to 2000 so that we can find clear-cut animation when I click on confirm it goes like this and it goes like that oh it's little bit fluctuating let me just so I found and this fluctuation what's happening because somewhere it's getting laggy I know so solution I found that it's if we wrap this row itself in animated size widget okay so this will actually happen very quickly we do we sink this and duration as my small duration okay and also curve as okay let's remove the curve first and let's try to check what is output so I have given duration here so this duration will work for color change and animated size will work for the size change okay so serious it looks good now so let's add some curve balls curves rod he is in sorry is in and let's see what happens so it will just animate in a beautiful way right I think it's happening a good now okay what I think this submitted or submitted text actually should scale from 0 to 1 because in this case I find it that this successful if you see it very closely successfully comes successful comes from 0 to 1 so let's add or two in here let's add our animation with a double value right and it should be my scale animation scale final text animation so that it's more specific to that where we are we will be applying it let's quickly initialize it and it's less than five five minutes left for this video so hold your nose and this will be a my tween right and inside begin I can get 0 and inside and I can get one right and animate be using this controller so whenever the controller's value will change this it will affect the value of this right and at that moment and let's wrap our final text inside or scale transition right now we need to provide our scale to it and that will be our this one right let's try to run it okay so I'm clicking on one phone and this happened and it happened like this I think it's it's working I believe let me just reduce font size so that it looks better then I don't know say click on confirm yeah it is scaled actually so it looks nice now plus there is a lot more cap here so inside inside this if you go there is a lot more gap so we can actually add it there is no problem that where is our size box it shows it should be 39 fine so now what we need to have is when this animation has ended actually you are creating a button and you don't have or tap on that right you should have or tap on that right so when if someone has clicked on this you should be able to control the functionalities so on top of this you need to perform some functionalities right suppose you need to print okay animated button pressed right this type of functionality you need so for that you have to have one on tap field inside my animated button right and it should be like this right sorry sorry sorry so sorry so I'm just making it as final and this can be done like this and here you can do at this counter so this on tap should be called you know when I click on this so when my animation ends which is here how I can get that my animation has ended so I have to add status listener where I will get my status of the controller whether it's completed whether it's running in forward or anything like that so if my current status equals to animation status not completed then I need to return on tap in that - or widget dot I believe so yeah so this will be returned and functionality of this method will be called I believe this should work and let's see in the run method so now when I click on confirm animation is going on after the animation nothing got printed no problem so I believe we have to do like this okay so now if I click on confirm animation will going on animation is finished and we got animated by button pressed so guys this is my first simple animation tutorial I believe you are now able to understand how to create these type of many missions and one thing yeah and yeah so I think in my next video I will be coming up with some and other simple animations so so you can add some beautiful functionalities to your app by creating this type of animations okay so yeah up till then um so bye and thank you guys so the link of this um you are this code will be there in my github link which will be in the description so my project will be under the name simple animations and I will be going to add into some folder so yeah so this will be added in one folder and all those things related to this animated button will be added to that folder okay so I might do in that way okay thank you guys do not forget to subscribe to my channel and also hit the PAL icon so that you never miss the content whatever I am posting on the channel

Channel: Techie Blossom

Views: 21,996

Keywords: Simple Animation, Flutter SDK, Flutter UI, AnimatedContainer, AnimatedSize, Custom Button, Animated Button

Id: l0VccGP-ygA

Length: 41min 55sec (2515 seconds)

Published: Sat Apr 20 2019