Liquid Swipe Animation In Flutter.

hi everyone welcome back to my channel in this video I'll be talking about how to create this kind of liquid swipe UI in flutter also there is skip button if you will press on this you will directly move to the last screen and there's also next button when you will tap on this it will navigate to next screen one by one also there are show indicator if you will tap on this then navigation will also happen and yes with this quite cool animation so stay with us and let's start coding right after this [Music] [Music] intro so this is my home screen and it is stateful widget and I'm calling this class from my main function this material app and here as home I'm passing this home screen and inside this build function I'm returning scaold so now after that let's start coding so inside body of a scaffold I'll use stack inside this I'm using liquid swipe so this is coming from the package that I have installed this is the package so I will put the link of this package in the description box also the GitHub link for this particular code in in the description box you can check that so after that it is asking for pages so I'm going to create array of [Music] pages pages and it would be a array and inside that I'll use container let me set The Color Purple Child going to use text for now now we'll use here screen one okay and it is asking for constant so this is my first element and also I want my text in the center so I'll be using here [Music] Center let me add const here and I'll copy paste three more time because I want to show four pages [Music] here so these are my pages so I will put this here after that liquid controller to control the navigation and all so I'll have to create here controller equal to liquid controller and here I'll use this controller now till then let me run this this is the screens and if you will scroll from left to right it is working with the animation now let's move forward enable side reveal true and I want to show icon here so site icon widget so it will take widget so icon it will contain icons dot Arrow this one and also check color colors dot white okay let me add the constant value here here is the icon appears now I want to I icon here next and Skip on which we will navigate from one page to another if I'll tap on next then it will move to second third fourth screen and if uh we will press skip it will uh redirect to last page so after this for that I'm using row children and inside the main AIS alignment I'll be using space between and as a children I'm using text button as a child I'm using here text Skip constant I want to change the color actually of the text button so color would be colors do white okay let me align this and once again I'll copy this for next button I'll rename this as next so here are the buttons so also I will have to wrap this row inside position widget and from bottom I'm providing zero left also zero and from right side I'm providing 30 pixels because of this area I'm providing 30 pixels so that it may look in the center of this current page when we save this there is our Skip and next button now on tapping functionality of this es Skip and next so first of all in the Skip One I'm using same liquid controller which I have initialized controller dot jump 2 it is predefined function which comes with the package liquid controller so jump to and here I'll use the same pages is array dot length minus 1 because every time when I'll press skip I want to navigate to the last page that is why I'm using this logic now let me run this and now when I'll tap on skip it is moving to last page now I'll have to do Cod for next so this is the onpress function inside this let me declare a variable final and Page controller dot current Page Plus one because I want to navigate to next screen and controller Dot animate to page here I'll have to apply the condition if page value is greater than Pages do length then page would be zero otherwise the page and for the duration you can also set duration of the liquid animation basically so now let me save this and when I will tap on next button it is navigating so Skip and next is working fine so in between these two button I want Circle indicator so for that I want that indicator in between these two buttons so I'll apply that here this is animated smooth indicator and for this again you will have to install a package this one smooth page indicator so inside this active index controller dot current page and obviously cont will be our array of pages length till now let me save this just giving some error let me run this here it is this is the button but when I'm tapping on this it is not working so we will have to code for that let's move forward effect warm effect spacing between the dots I'm using here 15 DOT color colors dot white 54 I'm using and active do color it will indicate current page so colors do white I'm using here let me add const here now on tapping of the dot on do click it will return index number so again I'll call this controller dot animate to page and here I'll pass this index now when I'll tap on this dot it it will navigate to that page make sure to add this on page change call back because as you can see here when I'm tapping on this dot it is navigating to the page but dot is not moving so for this you will have to apply this on page change call back function so inside this let me add here value index it is a call back that is why we will have to provide a value here and inside this call a set State function now when you will tap this it will also navigate so far our design is ready for this liquid and this indicator animation so after that I'm going to create content view so inside that I'll replace this container with the actual UI so for that I've created another page it would be State full widget content view let me import the package and we want to pass some values so I'm creating extra parameters here move this [Music] const so inside build function I'm using scaf fold and as a body again I'm using here stack position widget I'm using image from asset folder so image. asset inside this I'm going to use the URL so assets do spot. PNG this one is the image I want to show so let me use here content view as a color let me pass here colors Dot blue and image URL Dash title Dash and subtitle Dash actually want to show you this content view so later I will remove all this container with this content view let me run this scaffold color Okay background color I'm using this from V Dot content background color okay so after this position this image in the corner and then I'll use another image title and then subtitle so bottom I'm using media query dot text Dot [Music] size do height multiplied by 0.57 and from right side media query let me copy this instead of height I'll use here width and this value would be 0.5 okay and I will also have to use height width property of this image height [Music] width so height I want 0.65 width 0 6 here I will have to change this to width now let me save this here it is and after this I want to use image title and subtitle so after this positioned widget I'm using Center and and as a child of Center I'm using column because I want to show image title subtitle so inside column it will visible so again my image will come from asset so image do asset and here I'll be using image which will come from my home screen so widget. image URL height I'll use half of the height so 0.5 and for the width half of the width now let me pass the value of the image here so here I'm passing my URL of the image from the assets so for now I'm passing this image so it is inside this asset for folder so what I will write here assets for Slash linkedin.png and the title Linked In okay and the subtitle I will do it later now let me run this because I have already used V dig. image URL here this is my image and now I will pass the title and subtitle so after this image I'm going to show title and subtitle so after this text widget and it would be widget. title and styling I want some bold title with white color text style font size of 35 font [Music] weight do Bold and the color colors dot white so this is my title now I want to show subtitle so after this again I'll use text widget let me copy this let me add also constant here so that we can get R of this warning lines instead of title I'll be using subtitle and the font size would be 18 this should be font weight normal because I don't want my subtitle in bold and rest would be like color and all will be same so here I will have to pass subtitle also so this is my subtitle and when I will save this when I will run this I'll see my subtitle here and also I will have to apply some padding from left to right padding of 15 now it is looking good so this is for the screen one now I'm going to add this for rest of all the screen so I have added five pages here 1 2 3 4 and this one is five so here it is content View and again I'm passing the background color image title and subtitle again for another one background color image URL title and subtitle now let me run the application it's looking good and please do whatever this screen is saying please subscribe for more videos and obviously I will put the code on GitHub you can check the URL in the description box it takes actually lots of effort to make this kind of video please do give a thumbs up to this video And subscribe for further updates so that's it in this video hope to see you next time in our next video bye for now

Channel: thecodeme

Views: 735

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, liquid swipe, liquid swipe animation

Id: PX1MZlnSG6Q

Length: 22min 40sec (1360 seconds)

Published: Sun Jan 21 2024