How to use Rive Animation In Flutter | Login Interactive Form with Rive Animation.

hi everyone welcome back to my channel in this video I'll be talking about how to create this kind of animated login screen in flutter I was quite searching for some animation kind of thing to be implemented in then I came across uh this UI uh it was looking awesome that is why I have created tutorial on this when you will start typing here something this bear will look to the text buiild and now when you will type on this password it will close his eyes now when you will tap on login it will become happy and again suppose if I'm not typing username here then it will be terrified and once you will input all the values here like username and password for now I am not going to set any username or password you can set it with the help of a API and all now let me type anything inside this text field now when I'll click on this it will redirect to home screen so without any delay let's get started right after this [Music] intro so this is my login screen and I'm calling this screen from my main function and for this you will have to in install a package named drive inside your Pub spec and then pubget and the package will be installed and this is the state full widget and there is couple of things we'll have to create like animation link here I'm using R animation image from asset that is why I have provided here the path and state machine input SMI input for Boolean Value First is checking we'll have to create another one is hands up we will check the actions here let me create another one trig success and last one trick [Music] failure when it will be failed to log in and we'll create State Machine controller for handling the animation by the name State Machine controller and here I have created form key Global key for handling validation and username text editing controller for username and password controller respectively for handling the text inside the text field that I'm going to use so here inside scaffold this is appar and this is the text I have provided styling here and the background color is also set now inside body first of all I'm using using single child scroll view because whenever my keyboard will open it should scroll as a child of single child scroll view I'm using Center because I want my widgets in the center as a child I'm using here column main axis alignment would be Center and obviously column will take children so inside children I'm using here size box first we will use that R image for animation so I'm using your size box and the height of 350 and width is of 400 and child of the size box would be R animation it is coming from the package that I have installed I'm using here asset because I want to take animation image from asset so animation link I have provided here so this is the path after that fit box fit fill I want to capture the whole state machines and inside this I will have to provide text which is login machine and on in it I'm using art board and state Machine controller will be equal to State Machine controller Dot from artboard and the same text would be written here also and now I'll apply the condition here if State Machine controller equal to equal to null then it will be return from here and and artboard otherwise artboard do add controller would be State Machine controller and is checking equal to State machine controller. find input and again is hands up State Machine controller doind input and text would be is hands up same as for trick success and trick fail till now we have created the code for our character to be animate let's run the code and you will see the character which I'm using here is visible now now I'm going to create a rest of the part which is the UI part including text field and buttons so I'm making this video fast forward if you want to check the code then you can pause the video and check that accordingly on change whenever user type the text I'm checking the condition if is hands up is not equal to null because this is the text field for username and when user starts typing inside username then the bear will ster the particular text field then is hands up will be changed to false and next condition would be if is checking is equal to null then it would return from here otherwise this check would be changed to true now again I'm making this video fast forward because rest of the things will be the UI part for this text field however I'll put the code on GitHub and we'll share the link with you for this whole project you can check that in the description [Music] box here this is the text field for password and the condition will be reverted like is checking not equal to null then it will become false and His Hands Up will be true and also there are a couple of things which need to be changed like this level text and also that error message please enter your password so this kind of thing will be changed for password text field rest will be the same coding for both the text field are done and now this code is for the elevated button so I'm also fast forwarding the video if you want to check you can check the description box for GitHub link or you can pause the [Music] video [Music] so here if user enters username and password then I'm making trig success Boolean value true and if user is not entering any one of the text field either user name or password then I'm making trig fail Boolean variable true so on behalf of that our character is changing the expression if you do not put anything inside both the text field then it will become sad and if you will put all the details like like username password then it will allow to navigate to the home screen so I hope that you must have learned something from this video and like follow share and subscribe to my channel that's it in this video hope to see you next time in our next video bye for now

Channel: thecodeme

Views: 685

Keywords: flutter, flutter tutorial, flutter for beginners, flutter animation, flutter app development, dart language, easy UI with flutter, learn with flutter, make app with flutter, package of the week flutter, flutter package of the week, flutter design of the week, flutter user interface, rive animation in flutter, rive animation for login screen, rive animation tutorial in flutter

Id: HQPi2Lh_05k

Length: 10min 46sec (646 seconds)

Published: Sun Jan 28 2024