How to Create Liquid Swipe Animation in Flutter | Liquid Swipe Flutter
Tags: flutterliquidswipe, liquidswipe, flutterliquid, liquidswipeflutter
Published: 2020-01-08 07:14:02

Today tutorial, I am going to show you how to create Liquid Swipe Animation in Flutter. liquid Swipe animation is amazing and its Created for iOS Platform and for React Native Platform. this animation Or Liquid Swipe Animation is Inspired by [Cuberto.](https://dribbble.com/shots/5813405-Liquid-Swipe-Open-Source)

![cuberto liquid swipe](https://raw.githubusercontent.com/Cuberto/liquid-swipe/master/Screenshots/animation.gif)

For this animation, we are will Need **[`liquid_swipe`](https://pub.dev/packages/liquid_swipe) Package.** Liquid Swipe is the Unveils a New Page like Liquid Animation Just like the Above animation.

## 📱&nbsp;What we’re going to Build
 ![liquid swipe flutter](http://alltechsavvy.com/wp-content/uploads/2019/12/liquid-swipe-flutter.gif)*flutter liquid Swipe*

## How to Create Liquid Swipe Animation in Flutter

**Let’s Start the Tutorial**

If you Don’t know how to Create a [Flutter app](https://www.alltechsavvy.com/add-ads-to-flutter-app-in-under-10-min/), check out [Getting started with Flutter](https://flutter.io/getting-started/)&nbsp;official tutorial.

**💻 Installation**

First, you will need to add package name [**liquid\_swipe**](https://alltechsavvy.com/liquid-swipe-animation-in-flutter/) into Pubspec.yaml

In the&nbsp;`dependencies:`&nbsp;section of your&nbsp;`pubspec.yaml`, add the following lines as :

```
liquid_swipe: ^1.3.1
```

Now run **Flutter package get&nbsp;** in your terminal which we’ll install **liquid\_swipe** package.


```
import ‘package:liquid_swipe/Constants/Helpers.dart’;
import ‘package:liquid_swipe/liquid_swipe.dart’;
```

**liquid\_swipe.dart** for LiquidSwipe() method and **Helpers.dart&nbsp;** for WaveType animation so you can either select&nbsp; `circularReveal` Or `liquidRevel` Animation.

Before We Start Coding, You Need to Download Assets For this App.

[ Download Assets  
 ](https://github.com/sagarshende23/flutter_liquid_swipe/tree/master/assets)

For that Create a Separate Folder and give a name ‘ **assets’** to it & add Assets you can Download Assets File From [Here](https://github.com/sagarshende23/flutter_liquid_swipe/tree/master/assets)

![Folder name is assets](http://alltechsavvy.com/wp-content/uploads/2019/12/Folder-name-assets-1.jpg)

![img and Font](http://alltechsavvy.com/wp-content/uploads/2019/12/img-and-Font.jpg)

and Add this Below line into **Pubspec.yaml** file

```
assets:
  - assets/img/

fonts:
  - family: Product Sans
    fonts:
      - asset: assets/font/Product_Sans_Bold.ttf
      - asset: assets/font/Product_Sans_Regular.ttf
```

We need to Create a Simple `main.dart` file to contain our `MyApp` widget just like Below Snippet

```
import 'package:flutter/material.dart';
import 'package:liquid_swipe/Constants/Helpers.dart';
import 'package:liquid_swipe/liquid_swipe.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LiquidSwipe(),
      ),
    );
  }
}
```

Okay, In the LiquidSwipe() method we need to Add _ **pages, enbaleloop, fullTransitionValue, enableSlideIcon, waveType, positionSlideIcon.** _

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

After that Create three Container for **_3 Pages&nbsp;_** where we will Create Container widget For Each Separate pages.

Before we Start Creating Pages we Need to create **_Textstyle_** For Text Widget Just Like Below Code Snippet in a `MyApp` widget.

```
static const TextStyle goldcoinGreyStyle = TextStyle(
     color: Colors.grey,
     fontSize: 20.0,
     fontWeight: FontWeight.bold,
     fontFamily: "Product Sans");

 static const TextStyle goldCoinWhiteStyle = TextStyle(
     color: Colors.white,
     fontSize: 20.0,
     fontWeight: FontWeight.bold,
     fontFamily: "Product Sans");

 static const TextStyle greyStyle =
     TextStyle(fontSize: 40.0, color: Colors.grey, fontFamily: "Product Sans");
       static const TextStyle whiteStyle =
     TextStyle(fontSize: 40.0, color: Colors.white, fontFamily: "Product Sans");

 static const TextStyle boldStyle = TextStyle(
   fontSize: 50.0,
   color: Colors.black,
   fontFamily: "Product Sans",
   fontWeight: FontWeight.bold,
 );

 static const TextStyle descriptionGreyStyle = TextStyle(
   color: Colors.grey,
   fontSize: 20.0,
   fontFamily: "Product Sans",
 );

 static const TextStyle descriptionWhiteStyle = TextStyle(
   color: Colors.white,
   fontSize: 20.0,
   fontFamily: "Product Sans",
 );
```

So this will be a Six TextStyle is Required for the creating a Pages text style.

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

**#FirstScreen**

```
Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldcoinGreyStyle,
                ),
                Text(
                  "Skip",
                  style: goldcoinGreyStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/firstImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              // mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: greyStyle,
                ),
                Text(
                  "Gambling",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Temporibus autem aut\n"
                  "officiis debitis aut rerum\n"
                  "necessitatibus",
                  style: descriptionGreyStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),
```

**#SecondScreen**

```
Container(
      color: Color(0xFF55006c),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldCoinWhiteStyle,
                ),
                Text(
                  "Skip",
                  style: goldCoinWhiteStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/secondImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: whiteStyle,
                ),
                Text(
                  "Gaming",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Excepteur sint occaecat cupidatat\n"
                  "non proident, sunt in\n"
                  "culpa qui officia",
                  style: descriptionWhiteStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),
```

**#ThirdScreen**

```
Container(
      color: Colors.orange,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldCoinWhiteStyle,
                ),
                Text(
                  "Skip",
                  style: goldCoinWhiteStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/firstImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: whiteStyle,
                ),
                Text(
                  "Gambling",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Temporibus autem aut\n"
                  "officiis debitis aut rerum\n"
                  "necessitatibus",
                  style: descriptionWhiteStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),
```

**#Okay So this Our Final Code**

```
import 'package:flutter/material.dart';
import 'package:liquid_swipe/Constants/Helpers.dart';
import 'package:liquid_swipe/liquid_swipe.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const TextStyle goldcoinGreyStyle = TextStyle(
      color: Colors.grey,
      fontSize: 20.0,
      fontWeight: FontWeight.bold,
      fontFamily: "Product Sans");

  static const TextStyle goldCoinWhiteStyle = TextStyle(
      color: Colors.white,
      fontSize: 20.0,
      fontWeight: FontWeight.bold,
      fontFamily: "Product Sans");

  static const TextStyle greyStyle =
      TextStyle(fontSize: 40.0, color: Colors.grey, fontFamily: "Product Sans");
        static const TextStyle whiteStyle =
      TextStyle(fontSize: 40.0, color: Colors.white, fontFamily: "Product Sans");

  static const TextStyle boldStyle = TextStyle(
    fontSize: 50.0,
    color: Colors.black,
    fontFamily: "Product Sans",
    fontWeight: FontWeight.bold,
  );

  static const TextStyle descriptionGreyStyle = TextStyle(
    color: Colors.grey,
    fontSize: 20.0,
    fontFamily: "Product Sans",
  );

  static const TextStyle descriptionWhiteStyle = TextStyle(
    color: Colors.white,
    fontSize: 20.0,
    fontFamily: "Product Sans",
  );

  final pages = [
    Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldcoinGreyStyle,
                ),
                Text(
                  "Skip",
                  style: goldcoinGreyStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/firstImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              // mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: greyStyle,
                ),
                Text(
                  "Gambling",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Temporibus autem aut\n"
                  "officiis debitis aut rerum\n"
                  "necessitatibus",
                  style: descriptionGreyStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),
    Container(
      color: Color(0xFF55006c),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldCoinWhiteStyle,
                ),
                Text(
                  "Skip",
                  style: goldCoinWhiteStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/secondImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: whiteStyle,
                ),
                Text(
                  "Gaming",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Excepteur sint occaecat cupidatat\n"
                  "non proident, sunt in\n"
                  "culpa qui officia",
                  style: descriptionWhiteStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),
     Container(
      color: Colors.orange,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldCoinWhiteStyle,
                ),
                Text(
                  "Skip",
                  style: goldCoinWhiteStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/firstImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: whiteStyle,
                ),
                Text(
                  "Gambling",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Temporibus autem aut\n"
                  "officiis debitis aut rerum\n"
                  "necessitatibus",
                  style: descriptionWhiteStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LiquidSwipe(
          pages: pages,
          enableLoop: true,
          fullTransitionValue: 300,
          enableSlideIcon: true,
          waveType: WaveType.liquidReveal,
          positionSlideIcon: 0.5,
        ),
      ),
    );
  }
}
```

**You can see the full source code of the project&nbsp;** [**here**](https://github.com/sagarshende23/flutter_liquid_swipe) **.**

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything in the Tutorial, Please leave me a comment and I’ll do my best to answer it.