Flutter – Liquid Swipe Animation
Liquid Swipe animation is used to slide the page like water which show different design and pattern on the screen. It creates a floating state. Liquid Swipe animation is a significantly trending design procedure. Movement can help keep clients inspired by your UI design longer and more motivated to collaborate with content. This method provides the app with a smooth look in a new way.
Follow the below steps to implement the Liquid Swipe Animation:
Step 1: Create a Flutter App using the command:
flutter create liquid_swipe
Note: You can give any name to your app.
Step 2: Create a file in main.dart and home.dart to write code.
Step 3: Import the liquid_swipe dependency into the main.dart file using the below code:
import 'package:liquid_swipe/liquid_swipe.dart'; import 'package:flutter/src/material/icons.dart';
Step 4: Add the dependency to your pubspec.yaml file as shown below:
Update with NULL safety
Get the package from Pub:
flutter packages get
Step 5: In the LiquidSwipe() method we need to add pages, fullTransitionValue, waveType, positionSlideIcon, enableSlideIcon which are the attributes of the LiquidSwipe() method as shown below:
body:LiquidSwipe( pages: page, enableLoop: true, fullTransitionValue: 300, enableSlideIcon: true, waveType: WaveType.liquidReveal, positionSlideIcon: 0.5, ),
In the main.dart file we have a main() function which calls runApp() by taking any widget as an argument to create the layout. We have the home as MyliquidSwipe() which is a stateful class(Mutable class) as shown below:
- Step 6: We will add images in the assets folder. All the images you need on-screen you can add there. Activate assets in pubspec .yaml file as shown below:
assets: - assets/
Complete Source Code: