Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
Liquid Swipe Animation in Flutter is the animation that can provide liquidity while swiping up the pages in the app. So, here will be working on integrating the same into our app.
Majorly it is used on Onboarding Screens.
Read more about our Flutter app development services page.
First of all, you will have to add the liquid_swipe dependency in pubspec.yaml file of our project.
In order to get the updated version of the dependency, you can check liquid_swipe.
After adding the dependency, you have to run the ‘pub get’ command.
To create the Liquid Swipe Animation in the app, we will have to create multiple pages/screens in order to make them swipe.
Here, the “pages” property will take the collection of screens inside it which refers to the List<Widget> and the “liquidController” property takes the object of LiquidController.
It also has a property called “waveType” which is used to justify which type of wave you want for your app.
There are two types of WaveTypes:-
1.Liquid Reveal (WaveType.liquidReveal)
If we apply liquidReveal, it would look something like this as shown below.
2. Circular Reveal (WaveType.circularReveal)
If we apply circularReveal, it would look something like this as shown below.
There are some callbacks available in Liquid Swipe Animation as mentioned below –
There are few properties like disableUserGesture,ignoreUserGestureWhileAnimating to enable/disable user gestures.
You can also add the Slide Icon, in order to make it easier for a user to understand that after the current screen, there is another screen as well.
For adding this widget, there is a “slideIconWidget” property in Liquid Swipe.
In this, you can customize the icon you want to display as Slide Icon.
You can also set the ‘sideReveal’ property to true so that some part of the next page is visible to you on the front page.
Here’s the final code below –
The output of the code is –
In this blog, we have read about the Liquid Swipe Animation Flutter.
I hope it will help you out in understanding and getting a brief idea about it.
You can check out our other blogs on Animations in Flutter – https://mobikul.com/animations-in-flutter/
Thank you for reading!!
https://www.pinterest.com/pin/662381057682721276/
https://medium.com/flutterdevs/liquid-swipe-animation-in-flutter-6b1da8ff069a
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
Excellent work, fast, good quality and understood the brief perfectly! Quick responses developing the project and very good cooperation. I suggest to anyone.
Stathis Plakidas
USA
India
Global
Name
Email
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.