Flutter - Liquid Swipe Animation - GeeksforGeeks

15 Jan, 2021
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';
Step 4: Add the dependency to your pubspec.yaml file as shown below:
 Add dependencies:
liquid_swipe: ^1.5.0
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';class MyliquidSwipe extends StatelessWidget {      final page = [    Container(       color:Colors.brown,      child: Padding(        padding: const EdgeInsets.all(100.0),        child: Center(          child: Column(            children:<Widget>[                              Text("Welcome To GeeksforGeeks",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("   GeeksforGeeks  A Computer Science portal                      for  geeks",              style:TextStyle(              fontSize:30 ,               color:Colors.green[600],              ),              ),    ]),),  ))            ]; @override Widget build(BuildContext context) {   return Scaffold(     body: LiquidSwipe(       pages:page,       enableSlideIcon: true,       ),); }}
Output:
android
Flutter
Technical Scripter 2020
Dart
Flutter
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - BorderRadius Widget
Flutter - Stack Widget
Android Studio Setup for Flutter Development
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - BorderRadius Widget
Flutter - Flexible Widget
Flutter - Stack Widget