Open In App

Flutter – Liquid Swipe Animation

Improve
Improve
Like Article
Like
Save
Share
Report

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 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],
              ),
              ),
    ]),),
  ))
            ];
       return Scaffold(
      body: LiquidSwipe(
        enableLoop: false,
        pages: page,
        slideIconWidget: Icon(Icons.arrow_back_ios),
       ),
       );
 }
}


Output:



Last Updated : 20 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads