Flutter Animated TextField - CustomPaint tutorial

hello guys welcome to five minute flutter Channel and in this video I want to talk about text field in flutter and after that and we want to make some animated text field it's have some little animation like these and we want to create this we use text field and custom painter for create that and animation controller it's work when we focused on text field animate is completed from left to right and after we unfocus and change focusing on another uh widgets in our page animate is reversed and completely height okay let's go to the code we have this page I want to show you another time in my computer you can see that when we change focus in this simulator or a board there is changed all right after that I can I wanna create new window and create another project to create this step by step okay you know thank you all right I'm sorry for noise and you see that I create this I bring my code in here and I wanna run it okay this is a very simple and blank project flutter project and I want to run it and after that I want to create I'm going to change my home page and some cleaning okay after that I removed this text oh my God and we have a text field and check it what happened after running my code okay we will we wait for building this okay this is our very very plain text field that's have nothing just a simple text field but we wanna change it to animated text okay we need to handle we can do this with uh some ways but I'll do that with custom painter and unlimited controller you can do it with another way but I do I do it with this way and for these we could change text field decoration I used input decoration and I set border input border to not and you see we have nothing in here just text field and I want to create some board there manually on that I do it with custom painter okay I create class custom painter or custom board there for their painter extends Uh custom paint custom painter I'm sorry oh my God and I need to I wanna cut it off why okay paint we have it I think draw of paint method okay and shoot rebuild all right now yeah and return true okay in here we want to create our board there okay we have a canvas and size I have some videos about custom painter you can see those and check it I create a circle menu and a guide arrow in this video I use very very simple lines for border of this text field we can check it I wanna wrap it for example custom paint yeah and our painter yeah custom border painter and for example I create canvas dot draw path yeah we need a path I create with wire path a simple path and we need a paint where paint I wanna paint that color for example color is that red and paste dot mode or stroke it doesn't remember what's happened paints that color mode I think mode blend mode no it doesn't remember remind what's okay stroke stroke no I'm sorry I'm very sorry about that Style yeah painting style that's true and we want to check it what's happened okay we have nothing because I need to create this path for example I want a path dot move to 0 and 0 and path dot line two for example we have X and Y I wanna set that and size that sweet I'm sorry I think it's mistake on X and Y I'm sorry size tweets and in here I set zero and you have silly and you can see little I think paint That's true tweets for example it's good to be a three you can at least like I said to my passcode to the uh if if you if you see that I want to create another container and uh decoration box decoration for their box for their Dot for their dot all color colors dot for example Gray and you can see these okay we have I set some padding to that to see all of that packing accounts digits like all for example 24 and you can see this board there and when I set to path go to zero and zero this is zero zero because it's 0 x and zero Y and we move our path and pointer in here and when we say line to size that reads and our size is uh very it's it's fit our text field and size that which is end of uh X and V doesn't move any uh height okay I wanna bring my custom custom board there code in here because it's make some time and I want to skip that because it's very simple I create and I explain after I copied this I copy all of that and right click new file I set custom oh my God there you go new five custom I made order dot Dart and paste it in here okay and we have some utils class can I copy and paste in here yeah all right and I can import utils in here yeah everything just fine okay I can explain you what's happening here because I wanna create our uh I can back to this code because I want if you see that we have two paths one of them start from here and go to here and one of another path start from here and bring bottom up text field and end in here you can see this and and for that I create path one and path two and I have some utils in here I don't explain actual uh logic in this video but do to these uh utils method uh get percent of Animation that's I need to rename this it's not good name percent or animation percent animation person is the I can zero to uh y rename symbol anime percent okay it's uh passed from our animation controller and start from zero to one uh and when we passed our animation person in this method it's returned some parts of these paths not complete path because of that we have uh in each millisecond I passed I think uh 14 1400 millisecond and in 14 00 millisecond uh I have these animation okay I wanna back to these and we have our custom board there uh I am in Maine and I wanna delete this class and we have custom animes for there okay this take from its neat animation person okay I bring my code two in here copy them and you find animated text field dot Dart oh my God rename okay and paste it here and remove some of these and I want to explain you what's happened okay I wanna for example colors xion for example yeah and let's check it okay we have a custom paint and custom animate border that I explained you and we have some Alpha dot value that's person of our animation and we have uh label for input decoration and we set input border none and content padding because we need some padding to our text view okay I will explain you after I set it here for example if I remove these I can animate it I can put animated text field for example I called paste and suffix I wanna I don't wanna have no suffix or I can't nullable for that and it's working great if I pass now okay you can see this animation and what's happened I wanna everything is in animated text view for that I need Focus note an animation control layer we create the initial or animation control in initi state you can change your time I put 400 milliseconds for that and we have a animation curve I set curve easing out you can change and if you check it again you can see it's uh have some speed up and speak down in creating animation and it has tween animation because I said before we have our animation from zero to one and after that I animate it uh to this Alpha and this Alpha have value from zero to one and we said animation and we said at least we said listener for our controller and use statistic because we want when our animation changed from one to zero in 400 millisecond rebuild the UI to have this animation okay and we have another listener for Focus note because we want to check if our focus is changed to has focused it's mean uh when we click our text field this value and delete the listener is called and this value is true and all animations forward because or any and and because of that our animation is complete and when has focus is false our animations our our reversed I can show you if for example I in here I create another text field for example in here yeah you can see our focuses change and animation forward and reversed okay uh we want to use this text field in other parts of our tutorial for example in another video I want to talk about creating a simple login page with these uh text fields and that's that's it I hope you like this video and this tutorial and if you have some suggestion or some points please tell me in comments and goodbye

Channel: Mahdi Mirzadeh

Views: 5,428

Keywords: flutter animation, flutter widgets, custom paint, mobile app development, flutter course, flutter for beginners, mobile apps, purpose: educate, app development, flutter app, android tv, cross platform, flutter app development, vscode, ios 16, flutter custom paint, flutter ui, flutter custom painter, flutter custompaint, flutter developers, custom paint flutter, flutter tutorial, flutter tutorial for beginners, loader in flutter, custom shapes cubic loader in flutter

Id: z41Uxc6LEUo

Length: 18min 13sec (1093 seconds)

Published: Fri Jan 06 2023