Flutterexperts

It’s very much-structured animations cause a UI to feel progressively natural, add to the smooth look and feel of a cleaning application, and improve the user experience. Flutter’s movement bolster makes it simple to actualize an assortment of animation types. Numerous widgets, particularly Material widgets, accompany the standard movement impacts characterized in their plan spec, but on the other hand, it’s conceivable to redo these impacts.

In today’s article, I am going to explore Liquid Swipe Animation in Flutter. We will show a demo program to integrate a liquid Swipe animation into your flutter application. Liquid Swipe animation is impressive, and it was Created for the Andriod Platform, iOS Platform, and React Native Platform.

Table of Contents:

Liquid Swipe Animation — Introduction

Implementation — Setup Configuration

Code Implementation

Code File

Conclusion

---

---

Liquid Swipe Animation

Liquid Swipe animation is a movement on the screen that has a water-like feel. These animations, as often as possible, have a moderate, flowy development that may wave or repeating designs. (Furthermore, that is what makes it work; liquid swipe animation needs to feel realistic.) Liquid swipe animation may create results as a floating state or swiping action.

This method has genuinely begun to detonate in prevalence, for the most part since ioS, Andriod, and Web devices can render the strategy productively. For this animation, we are will Need liquid_swipe Package. Liquid Swipe is the Unveils a New Page like Liquid Animation

liquid_swipe | Flutter Package
This repository contains the Liquid Swipe source code. Liquid Swipe is the revealing clipper to bring off amazing…pub. dev

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

liquid_swipe: ^latest version

Step 2: Add Assets

Add assets to pubspec — yaml file.

We will add images in the assets folder

assets:
  - assets/

Step 3: Import

import 'package:liquid_swipe/Helpers/Helpers.dart';
import 'package:liquid_swipe/liquid_swipe.dart';

Step 4: Run flutter packages get in the root directory of your app.

Step 5: Enable AndriodX

Add this to your gradle.properties file:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

How to implement code in dart file:

You need to implement it in your code respectively:

Liquid Swipe Setup

In the LiquidSwipe() method we need to add pages, enbaleloop, fullTransitionValue, enableSlideIcon, waveType, positionSlideIcon.

body:LiquidSwipe(
    pages: page,
  enableLoop: true,
  fullTransitionValue: 300,
  enableSlideIcon: true,
  waveType: WaveType.liquidReveal,
  positionSlideIcon: 0.5,
),

After that, Create three Container for 3 Pages where we will Create Container widget For Each Separate pages.

final pages = [
  Container(...),
  Container(...),
  Container(...),
];

First Screen

In this screen, we will add a gradient color and show two fields of E-mail and Password.

Container(
  decoration: BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    stops: [0.1, 0.4, 0.8, 1],
    colors: [
      Color(0xFF4563DB),
      Color(0xFF5B16D0),
      Color(0xFF5036D5),
      Color(0xFF3594DD),
    ],
  ),
),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      CircleAvatar(
        radius: 70,
        backgroundImage: AssetImage("assets/fruit.jpg"),
      ),
      SizedBox(height: 15,),
      Text("Flutter Liquid Swipe Demo",style: TextStyle(
          fontWeight: FontWeight.bold,fontSize: 20,color: Colors.white),),
       SizedBox(height: 15,),
      Card(
        margin: EdgeInsets.symmetric(vertical: 10,horizontal: 25),

shape: RoundedRectangleBorder(
            borderRadius: BorderRadius
                .circular(20.0)),
        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Row(
            children: <Widget>[
              Icon(Icons.email,color: Colors.black,),
              SizedBox(width: 10,),
              Text("user@gmail.com",style: TextStyle(
                  color: Colors.black,fontSize: 17,fontWeight: FontWeight.bold),),
            ],
          ),
        ),
      ),
      Card(
        margin: EdgeInsets.symmetric(vertical: 10,horizontal: 25),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius
                .circular(20.0)),
        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.all(15),
          child: Row(
            children: <Widget>[
              Icon(Icons.lock,color: Colors.black,),
              SizedBox(width: 10,),
              Text("*******",style: TextStyle(
                  color: Colors.black,fontSize: 17,fontWeight: FontWeight.bold),),
            ],
          ),
        ),
      )

],
  ),
),

Second Screen

On this screen, we will show some foods item in detail.

Container(
   color: Colors.cyanAccent[100],
  child: Column(
    children: <Widget>[
      Container(
        width:420,
          child: Image.asset("assets/food.jpeg",fit: BoxFit.cover,)),
      Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          children: <Widget>[
            Text("Foods Item",style: TextStyle(
                fontWeight: FontWeight.bold,fontSize: 20,color: Colors.blueGrey[800]),),
          ],
        ),
      ),
      SizedBox(height: 20,),
      ListTile(
        leading:Container(
          width: 90,
          height: 150,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              image: AssetImage("assets/pizza.jpeg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        title:Text("Pizza",style: TextStyle(
            fontWeight: FontWeight.bold,fontSize: 16,color: Colors.black),),
        subtitle: Text("Pizza is the world’s greatest food. Nothing says “I love you,” “I’m sorry,” or “Let’s be friends,” better than pizza.",style: TextStyle(
            fontSize: 16,color: Colors.grey),),
      ),
      SizedBox(height: 20,),
      ListTile(
        leading:Container(
          width: 90,
          height: 150,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              image: AssetImage("assets/pasta.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        title:Text("Pasta",style: TextStyle(
            fontWeight: FontWeight.bold,fontSize: 16,color: Colors.black),),
        subtitle: Text("A super quick, healthy and delicious pasta that can de whipped up under\n15 minutes.",style: TextStyle(
            fontSize: 16,color: Colors.grey),),
      ),
      SizedBox(height: 20,),
      ListTile(
        leading:Container(
          width: 90,
          height: 150,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              image: AssetImage("assets/chili.jpeg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        title:Text("Chilli Potato",style: TextStyle(
            fontWeight: FontWeight.bold,fontSize: 16,color: Colors.black),),
        subtitle: Text("Chilli potato is a Indo chinese starter made with fried potatoes tossed in spicy, slightly sweet & sour chilli sauce. ",style: TextStyle(
            fontSize: 16,color: Colors.grey),),
      ),

],
  ),
),

Third Screen

In this screen, we will show an order success and deliver an order status.

Container(
  color: Color(0xFFE7D6F8),
  child: Column(
    children: <Widget>[
      SizedBox(height: 10,),

Image.asset("assets/delivery_man.png"),
      SizedBox(height: 30,),
      Text('Order Success',
        style: TextStyle(
            fontSize: 22.0,
            color: Colors.black,fontWeight: FontWeight.bold),overflow: TextOverflow
            .ellipsis,),
      SizedBox(height: 10,),

Text("Now, you're connect directly\nwith your order, lets check the detail\nJust wait your service here",
        style: TextStyle(
            fontSize: 16.0,
            color: Colors.white),overflow: TextOverflow
            .ellipsis,textAlign: TextAlign.center,),
    ],
  ),
),

Code File

https://gist.github.com/ShaiqAhmedkhan/1e73d999083a9ed0a7805d854a4bc3e3#file-my_home_page-dart

You will see a full code on GitHub, this is a small demo program to integrate with Liquid Swipe Animation, and the below video shows how Liquid Swipe Animation will work.

Conclusion:

Liquid Swipe animation is a significantly trending design procedure. Movement can help keep clients inspired by your UI design longer and furnish one more motivation to collaborate with content. This Ui plan method should look basic and reasonable. Excessively fast movements.

In the article, I have explained the basic architecture of Liquid Swipe Animation you can modify this code according to your choice, and this was a small introduction of Liquid Swipe Animation from my side and its working using Flutter.

I hope this blog will provide you with sufficient information in Trying up Liquid Swipe Animation in your flutter projects. This is a demo program that will integrate Liquid Swipe Animation in a flutter, So please try it.

❤ ❤ Thanks for reading this article ❤❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter Liquid Swipe Animation Demo:

flutter-devs/flutter_liquid_swipe_animation_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---