Skip to content
Related Articles

Related Articles

Flutter – Liquid Swipe Animation
  • Last Updated : 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

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
import './liquid_swipe.dart';
  
  
void main() {
  runApp(
    MaterialApp(
        
          title: "My Ani",
           home: MyliquidSwipe(),
        ),
         
      );
      }

chevron_right


  • 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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,
       ),);
 }
}

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :