Flutter Implicit Animations 2024 | The Right Way

have you ever dreamed of bringing mind-blowing animations to life and flutter hold on to your coating socks because today is your lucky day I'm going to guide you through crafting stunning eye-catching designs using the power of flutter animations in this video we will create this awesome design using amazing animations of flutter where we can drag this image up or down and under this widget another widget is expanding or collapsing and by clicking on the image widget we can also go to the full view screen we are starting from this design already you can get this start source code in the description this is simple where we have an app bar bottom navigation bar and locations widget in the body inside locations widget we have a page view Builder this is the Builder which builds all the images here we have location widget inside the item builder of page builder which is one of these cards inside location widget we have an image widget inside image widget we have build image build top text and latl long widget in a stack latl long widget has some text and an icon in a row first of all we want to create the transition of this image widget so inside location widget. Dart file let's create an expanded Boolean flag to check every time if image widget is expanded or not expanded we have to create the animation like in the preview between these states via this expanded Boolean flag so let's wrap our image widget with a stack and then wrap our image widget with animated position to change the position of image widget if you see the preview image goes up a little bit and then it goes down first let's animate it and then we will animate the white container below it let's set the duration to 500 milliseconds and then we are checking if it is expanded then it will be higher like 150 pixels from the bottom otherwise it will be less like 100 pixels from the bottom next let's wrap our image widget with gesture detector to recognize the user interaction for this on pan update is used for if the user interacts with the image and drags it around let's create on pan update method here we are checking if y coordinate is negative this means the user is expanding this widget or dragging it to the top then set expanded to True using set State and the other case is that if the y-coordinate is positive this means the user is not expanding this widget he is dragging it to the bottom so set the expanded to false now it looks like animation by dragging up or down and it is changing the position of the image 50 pixels more to the top when expanded we can do this with every location widget which we have here now we want to create the white background container in the preview this image is going up and then white container is expanding a bit and also changing its opacity position height and width to create a white container below the image we have already wrapped this image widget with a stack I have created the expanded content widget to create this white container here you can see this white container below the image widget inside expanded content widget we have address rating stars and reviews in a column next we have to change the height width and position of expanded content widget therefore let's wrap this widget with animated positioned let's set the duration to 500 milliseconds it should be exactly the same as the duration for other animation like image widget in our case now let's set the width and height according to the expanded Boolean flag if it is expanded we have little more width and height otherwise we have less height and width this is the original position of the container now let's also put a bottom inside to change the position of the container according to the expanded flag if it is expanded then it is 40 pixels from the bottom otherwise it is 100 if you see the preview carefully content inside expanded content widget is fading inside and outside slowly therefore wrap it with animated opacity set the same duration and we are checking if expanded content widget is expanded then opacity is one otherwise it is less and now everything is working fine next we want to build this complex animation which you see here when we click on image widget we will go to its detail page in the full view page as in the preview therefore we have to do this animation from here until here to open the detail page we use ontap property of gesture detector inside the open detail method we are checking if expanded is true or false if if it is false make it true and then return otherwise go to the detail page inside the detail page we have app bar an image widget here we are calling the detail page location object is representation of this data here with text address stars and reviews which is going inside the detail page and we also have animation property this animation property comes from this page route Builder page builder property of page route Builder widget is used to define how this anim should go from one page to the other page builder callback is responsible for building the page content and incorporating the animation let's also set the transition duration and reverse transition duration to 1 second we can also put some animation here for example we want to apply a curve to the animation therefore let's wrap detail page with fade transition and use curved animation for opacity the curve here is defined as a const interval which means that the animation curve is applied from 0% to 50% of the animation duration next let's see the preview again here we have to connect everything for example the avatar on this page and on the detail page and also connect stars here and on the detail page connect this image with image and text with this text all these things are going from this page to the detail page with cool animation inside the detail page we have a column first let's create an image wrap this image with stack to have lat long widget over the image and then paste the lat long below the image the lat long widget is at the top which is not visually appealing we want to put the lat long widget at the bottom therefore set alignment to the bottom center inside the stack now we want to animate this image first from this page to the detail page therefore we have created here a hero widget that we will use for everything that we have to animate from one page to the other a hero widget is used for creating hero animations hero animations are animations that transition between two widgets with similar shapes or content this is commonly used when we want to smoothly transition an element from one screen to another maintaining a sense of continuity and visual appeal we are requiring a tag and a child here inside this hero widget to animate this image from homepage to the detail page we have to define a tag for the image on homepage and also on detail page if we have to use hero widget for the image image we will wrap the image of both pages with the hero widget and it is also compulsory to use the same tag for images of both pages so inside detail page first wrap its image with the hero widget I have created a new class hero tag where we will Define the tag of the image because this is the tag that we also need on the other screen to make hero animation work inside the hero tag class for image we get the URL here and then return it we will Define all hero tags here in this class and access them easily now we have to do the same with the image in the image widget class where we have our image here we have the build image method and wrap this asset image with hero widget now both images have the same tag After hot restart now you can see if I expand it and tap on it it is doing animation with the help of the hero widget of flutter and reverse animation is pretty cool next we will create animation for this text and this review section therefore inside the detail page and after the stack and expanded widgets in column paste here detail info widget and reviews widget detail info widget is this widget here at the top and then we have this review widget at the bottom inside detail info widget we have a column let's create address line one some space address line two some space and stars widget let's also create the review widget here we are creating list view. separated and inside it we are building reviews here inside the build review method we are creating a circle Avatar some text and an icon in a row and then description text below them in a column now if we see the preview again this white container which is actually expanded content widget its text of address line one address line 2 stars and circle avatars are animating in the detail page therefore let's go to the expanded content widget and now search all the widgets that we have to animate when navigating to the detail page here is the address line one this is actually this text here wrap it with hero widget and use the tag of address line one now inside our hero tag we create a new method address line one this is based on address line one it is always important to have unique tags because we also have other widgets here and also we will need other tags later so create them here for the hero widget of Avatar we also need page index to make unique hero tags for every page now go back to the expanded content widget and here is our build address rating and inside it we have address line two and stars widget let's wrap these with hero widget and use the tag from the hero tag class also for Circle Avatar let's wrap Circle Avatar with hero widget inside build review now it's time to do the same with other stuff on the detail page because you see only this image is animating right now when we go to the detail page on detail page we have this text this text these stars and then Circle avatars we have to wrap all of these with the hero widget here we have the detailed info widget inside this widget we have three widgets which we have to wrap with hero widget address line one address line two and stars widget therefore wrap hero widget around these three widgets now if you see here the flow of Animation is not quite right there is some problem or something wrong with this text here we can fix this bug via the hero widget simply wrap the child with material widget and set the type to transparency this is doing all the trick because it will be transparent due to the material widget on top of it if we navigate from one screen to another screen now if we go to the detail screen there is no problem with the text anymore material widget is needed always if we animate a text from screen to another screen hero widget works fine for images without material widget but for text it is needed now only these avatars are left to animate so go to the detail page and inside the reviews widget we search for a circle Avatar and here inside build review wrap it with the hero widget and now if we click on this image then they are aligned here in the different review sections and lastly we want to animate this text in the review section if you see the preview there is no text in the beginning and it shows up slowly and inside this list view we are creating every review section like here so let's wrap the build review widget with animated Builder let's set the animation to the animation that we get from here we actually get this animation from the page transition if we go to the location widget we have this open detail page method here inside it we have created a page route Builder and this page route Builder is basically giving us these animations which we put here inside our detail page and then this animation is going to to our review section now back to our animated Builder let's put the Builder inside where we actually want to create this animation and return the fade transition to change the opacity of the text also set the opacity here to the curved animation we use this animation from the page transition and also Define how fast the curve should be animated set the child to child which is actually build review now if we hot restart and then go to the detail page it is changing the opacity here this this is the full functionality of our app that we wanted to achieve and we have finally achieved it so this is the cool and amazing animation that we have implemented together so guys what did you think of this video let me know in the comments thanks for watching Remember to like this video And subscribe for more content like this

Channel: Coding With Flutter

Views: 3,753

Keywords: Flutter, Dart, Flutter and Dart, FLutter animation, Flutter Implicit Animation, Flutter development

Id: C0hqFb16HeU

Length: 12min 48sec (768 seconds)

Published: Mon Mar 11 2024