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.
Implementation of Liquid Swipe Animation
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.
|
1 2 3 4 5 6 |
LiquidSwipe( pages: pages, liquidController: _liquidController, waveType: WaveType.liquidReveal, enableLoop: true, ), |
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 –
- onPageChangeCallback –> This Callback can be used when we want to perform some action as the page changes.
- currentUpdateTypeCallback –> This Callback can be used when we want to perform different types of actions at different times when the animations UpdateType is changing.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
LiquidSwipe( pages: pages, liquidController: _liquidController, fullTransitionValue: 300, waveType: WaveType.liquidReveal, enableLoop: true, slideIconWidget: Padding( padding: const EdgeInsets.all(8.0), child: Container( decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.black, ), child: Icon( Icons.arrow_right, color: Colors.white, ), ), ), ), |
Complete Code & Output
Here’s the final code below –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:liquid_swipe/liquid_swipe.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), debugShowCheckedModeBanner: false, ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { LiquidController _liquidController; @override void initState() { _liquidController = LiquidController(); super.initState(); } List<Widget> pages = [ Container( color: Colors.white, child: Column( children: [ Container( height: 400, width: 300, child: Image.asset('assets/images/productSelection.jpeg'), ), SizedBox( height: 50.0, ), Text( "Choose Your Product", style: GoogleFonts.itim(fontSize: 24.0), ), SizedBox( height: 20.0, ), Padding( padding: const EdgeInsets.only(left: 16.0, right: 16.0), child: Text( "There are 2000+ products to choose from for your closet", style: GoogleFonts.itim( fontSize: 18.0, ), textAlign: TextAlign.center, ), ) ], ), ), Container( color: Colors.black, child: Column( children: [ Container( height: 400, width: 300, child: Image.asset('assets/images/addToCart.jpeg'), ), SizedBox( height: 50.0, ), Text( "Add To Cart", style: GoogleFonts.itim(fontSize: 24.0, color: Colors.white), ), SizedBox( height: 20.0, ), Padding( padding: const EdgeInsets.only(left: 16.0, right: 16.0), child: Text( "Within 2 Clicks you can buy the products of your choice", style: GoogleFonts.itim(fontSize: 18.0, color: Colors.white), textAlign: TextAlign.center), ) ], ), ), Container( color: Colors.white, child: Column( children: [ Container( height: 400, width: 300, child: Image.asset('assets/images/checkout.jpeg'), ), SizedBox( height: 50.0, ), Text( "Pay by Card", style: GoogleFonts.itim(fontSize: 24.0), ), SizedBox( height: 20.0, ), Padding( padding: const EdgeInsets.only(left: 16.0, right: 16.0), child: Text( "The order can be paid through Credit Cards or Cash at the time of delivery", style: GoogleFonts.itim( fontSize: 18.0, ), textAlign: TextAlign.center, ), ) ], ), ), ]; @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( backgroundColor: Colors.white, body: LiquidSwipe( pages: pages, liquidController: _liquidController, waveType: WaveType.liquidReveal, enableLoop: true, slideIconWidget: Padding( padding: const EdgeInsets.all(8.0), child: Container( decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.black, ), child: Icon( Icons.arrow_right, color: Colors.white, ), ), ), ), ), ); } } |
The output of the code is –
Conclusion
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!!
References
https://www.pinterest.com/pin/662381057682721276/
https://medium.com/flutterdevs/liquid-swipe-animation-in-flutter-6b1da8ff069a