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
Add dependencies:
liquid_swipe: ^2.1.1
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:
Dart
import 'package:flutter/material.dart' ; import './liquid_swipe.dart' ; void main() { runApp( MaterialApp( title: "My Ani" , home: MyliquidSwipe(), ), ); } |
- 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:
Dart
import 'package:flutter/material.dart' ; import 'package:liquid_swipe/liquid_swipe.dart' ; import 'package:flutter/src/material/icons.dart' ; class MyliquidSwipe extends StatelessWidget { @override Widget build(BuildContext context) { final page = [ Container( color:Colors.brown, child: Padding( padding: const EdgeInsets.all(100.0), child: Center( child: Column( children:<Widget>[ Text( "Welcome To w3wiki" ,style:TextStyle( fontSize: 30, color:Colors.green[600], ), ), ] ), ), ),), Container(color:Colors.yellow[100], child: Padding( padding: const EdgeInsets.all(120.0), child: Center( child: Column( children:<Widget>[ Image.asset( "assets/save.png" ), Text( "" ,style:TextStyle( fontSize: 20, color:Colors.green, ), ) ] ),), ),), Container(color: Colors.blue[100], child: Padding( padding: const EdgeInsets.all(100.0), child: Center( child: Column( children:<Widget>[ Text(" w3wiki A Computer Science portal for Beginner", style:TextStyle( fontSize:30 , color:Colors.green[600], ), ), ]),), )) ]; return Scaffold( body: LiquidSwipe( enableLoop: false , pages: page, slideIconWidget: Icon(Icons.arrow_back_ios), ), ); } } |
Output: