Flutter Fancy Page Wave Transition Animation | Flutter UI Design Tutorial

[Music] hey hello friends and welcome to retro portal studio and in this video we're going to be taking a look at creating this wave transition in flutter you can see that when i click on the floating action button the first screen disappears with the wave and the second screen is layered on top this effect is quite easy to implement and it's only a matter of few tricks it can be a bit intensive for dense screens but other than that it's really cool so let's take a look at how we can create this okay so right now i'm on a simple flutter app in which i have two screens one is this home page that is this right here and as soon as i click on the floating action button we're moved to the second screen which looks something like this the code for this screen looks something like this you can see that the second screen is a stateful widget and all the main layout of the second screen is in this page content class which itself is a stateless widget the reason i have separated this page content is to make it easy for me to explain to you how we're going to create that wave transition we have to move this content quite a bit so it will be easy for us if we keep this content separate along with these two screens i also have this assets folder in which i have images and this contains all the images which are being used by these two screens now let's move back to the main.dart file and close this assets folder for now at this point in my home page when i click on the floating action button the second screen appears but with the default material page route animation so the first thing that we need to do is we need to move down to the floating action button and instead of using the material page route or cupertino page route we need to use in a page route builder in this we need to pass in a page builder which requires a function and in this function we're given with a context an animation and a third argument that we do not require and from this function we need to return the second screen that is the destination for the navigation i'll reformat the code and now if i run the app once again and click on the floating action button we move to the second screen but without any animation our work with the home screen is almost done so let's move to the second screen now currently in this app the second screen is a stateful widget but it does not really matter for this app the first thing that we need to do in the second screen is to remove this page content from here and instead pass in a tween animation builder the reason for this is because we need to animate the fading in of the second screen in the tween animation builder i'll pass in the value for tween that will be an instance of tween with a begin value of 0.0 and an end value of 1.0 for the duration i'll pass in an instance of duration of milliseconds 1500 you can change this value according to your own taste but for this tutorial this is fine along with this i'll also pass in a value for the child and this will be the page content and finally we need to pass in a builder and this builder requires a function and in this function it gives us with the context the value of tween and the child this child is the child value that is given to the tween animation builder the reason for passing this child is just so the builder does not have to create the page content with every build now everything that we need to do to get that wave transition has to be done in this builder function and for doing this we'll be using a shader mask so what i'll do is i'll return a shader mask from the builder function and in the shader mask we need to pass in a shader callback now if you don't know what a shader mask is i'll link a tutorial for this in the description below and you can also find the tutorial via the information button on the top right corner now in the shader callback we need to pass in a function and this function is given an instance of rect and from this shader callback we need to return a shader and we can create one by using a gradient in this case we'll be using a radial gradient and from this radial gradient we can create a shader by using the create shader function and in this function we need to pass in the rect that we get in the argument for the shader callback we'll return this from the shader callback function and now we need to put in the values for this radial gradient but before doing that let's take a look at what we're trying to create here with this illustration it will be clear to you the reason behind using a radial gradient will be having the center of radial gradient at approximately the position of the floating action button with this it would appear like the wave is going from the center of the floating action button that is at the bottom right corner to the top left corner for this radial gradient we're going to be using 4 stop values and 4 color values the stop values will go from 0 to 0.55 to 0.60 to 1. the area between the 0.55 and 0.60 will be transition between the two colors and with all this we'll be animating the value of radius with this it will appear as if the wave is going from center of the floating action button to the top left corner so let's get back to the app and fill in the values i'll minimize the emulator for now and for the value of colors in the radial gradient we'll pass in four colors that is colors.white colors are white transparent and transparent for the stops we'll pass in a list of doubles like we discussed that is 0.0 0.55 0.60 and 1.0 for the sensor we'll pass in an instance of fractional offset with a value of x of 0.95 and a value of y with 0.90 for the fractional offset the top left is the 0 zero and the bottom right is the one one so if we pass in point nine five comma point nine zero it would lie approximately here you can adjust this value according to your own taste but for this tutorial the value of point nine comma 0.90 will work just fine with this the sensor of the radial gradient will almost be at the position where the floating action button of the home screen exists along with all these properties we also need to pass in a radius for the radial gradient for this we'll pass in a value of tween that is value that we get in the argument of the builder multiplied by 5. the way this radius works is that the value 1.0 for this radius is equal to the shortest side of the box now once we have given the value for the shader callback we also need to pass in a value for the child of the shader mask for this we'll pass in the child that we get in the arguments of the builder function at this point i'll bring back the emulator and at this point when i click on the floating action button you can see that the second screen appears with a wave transition i'll do this once again but with this you can see that when the transition happens the background is black the reason for this is that the default navigation mode is opaque for this we can go to the main.dart file to the floating action button and in here for this page route builder we can pass a second argument that will be opaque and for this we can pass in a value of false and with this there is one more thing that we need to keep in mind for the second screen that is the destination we need to set the background color of scaffold to colors.transparent or else the default background for the scaffold is white in color at this point i'll run the app once again and now when i click on the floating action button you can see that the wave transition happens and the second screen comes on top of the first with a smooth transitional wave now the reason this effect happens is because of the blend mode and the colors that we passed basically the default blend mode of the shader mask is blend mode dot modulate in simple words the source image is the second screen and there is no destination image so when we pass in the color of white the second screen is presented on the screen and with the transparent color the second screen is invisible so with this as the radius increases the transparent colors moves out of bounds and the white color takes the complete screen and hence the second screen is completely visible if you don't know much about blend modes and how they work i assist you to read more about them on the flutter.dev the link will be in the description below as you have seen that this transition is nothing but a few tricks put together there's a lot more that you can do with this and if you find this video useful make sure you hit the like and subscribe button and also consider following me on twitter for future updates see you next time peace

Channel: RetroPortal Studio

Views: 29,860

Keywords: flutter, flutter ui, flutter ui design, flutter tutorial for beginners, flutter page transition animation, flutter transition animation, flutter page transition, flutter navigation, flutter animation, flutter page navigation, flutter android studio, flutter app development, flutter animation tutorial, flutter shadermask, flutter tween animation, flutter page route builder, flutter page route animation, flutter ui design tutorial, flutter app, flutter widgets

Id: futE-2pAE30

Length: 8min 35sec (515 seconds)

Published: Fri Feb 05 2021