Animations Package Tutorial | Flutter Package Spotlight

animations are crucial in making your app stand out in the crowd with flutter it's really easy to add animations to spice up your app thanks to the material design team we can use the animations package to add high quality pre-built transitions to our apps i'll go over page transition switchers container transforms shared access transitions and fade and fade through transitions [Music] before we get started make sure to smash that like button and subscribe as it really helps out the channel if you want to learn how to build real world apps with flutter check out my courses on launchclub.io and with that let's get started we're going to add animations to a pre-existing app so to follow along you can head over to the github repo linked in the description below and clone or download the starter project branch once you open up the project you'll notice we have some to do's which we'll get to in a second let's run through the project first in the pubspec.yaml i've set the flutter sdk version to at least 2.12.0 to enable null safety in the dependency section we only have one import the animations package at the top of main.dart i've defined placeholder text and two images from unsplash the material app hides the debug banner and displays the home screen widget home screen is a stateful widget with two state variables show list and slow animations the app bar has an icon button that toggles the value of show list we use the value to display a list of items or grid of items tapping on the icon changes the content instantly the list displays list tiles each with a leading image title and on top we have a default material page route transition to the detail screen tapping on a grid item also navigates us to the detail screen with the same transition on this screen we have a large photo variable that is toggled by tapping on the image if the large photo is false we display the image title and placeholder text otherwise we display the photo with height and width set to double dot infinity in our home screen we have a bottom sheet with a switch that changes the time dilation to slow down animations this will be useful when we want to see our animations in slow-mo the first animation we're going to add is a fade through transition when the user taps on the icon button to change from a list to grid and vice versa all we have to do is wrap our conditional in a new widget called page transition switcher that has a required transition builder with child animation and secondary animation in its callback the child is the widget defined in our page transition switcher the animation value defines how the new child appears and the secondary animation defines how the old child disappears in the case where show list changes from true to false the new child is the grid and the old child is the list the transition builder returns a fade through transition and we pass in the corresponding parameters now when we tap on the icon button we get a nice transition let's enable slow animations by tapping on the toggle to see it in slow-mo next we want to change the default material page route animation to a container transform when we tap on the tile it should expand into the detail screen above return list tile let's return an open container open container takes a transition type which will set to fade through a closed builder with context and a void callback open container and an open builder with the same callback inside the close builder we return our list tile and change the ontap to open container calling opencontainer causes our open builder to fire where we'll return our detail screen the detail screen takes in a title and image url now when we tap on a list tile we can see the fade through animation we'll also add on closed that prints closed this fires when we tap the back button in the app bar and is useful if you need to do something like show snack bar or update the ui let's move down to our grid and set padding's child to the same open container with our grid tiles the transition type is set to fade by default if it's not defined but i'll specify it here to make it clear what the transition is and now we have our fade animation we tap on the photo in our detail screen it should animate along the z-axis to take up the width and height of our screen we can achieve this by using a page transition switcher with a shared axis transition wrap the large photo conditional in a page transition switcher the transition builder returns a shared axis transition with the transition type set to shared axis transition type dot scaled this can also be set to horizontal the x-axis or vertical the y-axis now this works but it's a bit too fast we can slow it down by setting the page transition switcher's duration to const duration milliseconds 500. one more thing we need to fix is the way this animates the first tap on the photo should expand the photo and the second tap should make it shrink back down to fix this all we have to do is add the reverse parameter with the value not large photo [Music] this looks great [Music] and that's all for this video you just learned how to use the animations package to liven up your app if you enjoyed the video don't forget to leave a like and subscribe and check out my full flutter courses on launchclub.io thanks for watching and i'll see you in the next one [Music] you

Channel: Marcus Ng

Views: 19,663

Keywords: animation tutorial flutter, animation flutter tutorial, flutter animations package, animation flutter, animations flutter tutorial, flutter simple animations, flutter animations for beginners, flutter animation for beginners, flutter animations tutorial, flutter simple animations tutorial, flutter simple animation tutorial, animations tutorial flutter, flutter animations package example, flutter animation package tutorial, flutter material animations, Flutter simple animation

Id: 3GMq45zRVLo

Length: 7min 2sec (422 seconds)

Published: Wed Apr 14 2021