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 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: