Today, I am going to explore Liquid Swipe Animation in Flutter. I will show how to integrate a liquid Swipe animation into your flutter application. Liquid Swipe animation is amazing animation provided by flutter, and its Created for the Android and iOS Platforms.

Liquid Swipe Animation

Liquid Swipe animation is a kind of animation on the screen that has feel like water flowing on the screen it has circular type animation too. We can use this animation specially on Splash Screens this looks amazing.

Implementation :

Dependencies:

Step 1: Add the liquid swipe package in pubspec.yaml file.

liquid_swipe: ^1.5.0

Step 2: Add assets to pubspec.yaml file.

assets:
– assets/img/

Implementation of main.dart file:

main.dart:

We have created the main.dart file as a entry file in flutter in this file we simply call new page called MyApp() which contains pages to show liquid swipe

import 'package:flutter/material.dart';
import 'MyApp.dart';
void main() { 
 runApp( MyApp(),);
}

MyApp.dart

In MyApp.dart we created a containers for pages in a single file, in this we have total five containers with different background color to show the animation properly. In this we use one image as background image this image is same for all the pages or we can say for containers. While adding the image from asset folder make sure that you have enable the assets option from pubspec.ylm file and give the correct path in dart file.

In LiquidSwipe package we have lots of options to customize the animation some of the we have used here.

LiquidSwipe(
              pages: pages,
              positionSlideIcon: 0.2,
              enableSlideIcon: true,
              slideIconWidget: Icon(Icons.arrow_back_ios),
              // onPageChangeCallback: pageChangeCallback,
              waveType: WaveType.liquidReveal,
              liquidController: liquidController,
              ignoreUserGestureWhileAnimating: true,
            ),

I kept this code very simple so that anyone can understand it easily..

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:liquid_swipe/liquid_swipe.dart';

class MyApp extends StatefulWidget {
  static final style = TextStyle(
    fontSize: 30,
    fontFamily: "Billy",
    fontWeight: FontWeight.w600,
  );

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int page = 0;
  LiquidController liquidController;
  UpdateType updateType;

  @override
  void initState() {
    liquidController = LiquidController();
    super.initState();
  }

  final pages = [
    Container(
      color: Colors.pink,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset(
            'assets/img/1.png',
            fit: BoxFit.cover,
          ),
          Column(
            children: <Widget>[
              Text(
                "Hi",
                style: MyApp.style,
              ),
              Text(
                "It's Me",
                style: MyApp.style,
              ),
              Text(
                "Prajwal",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.deepPurpleAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset(
            'assets/img/1.png',
            fit: BoxFit.cover,
          ),
          Column(
            children: <Widget>[
              Text(
                "Take a",
                style: MyApp.style,
              ),
              Text(
                "look at",
                style: MyApp.style,
              ),
              Text(
                "Flutter Liquid Swipe",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.greenAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset(
            'assets/img/1.png',
            fit: BoxFit.cover,
          ),
          Column(
            children: <Widget>[
              Text(
                "Liked?",
                style: MyApp.style,
              ),
              // Text(
              //   "Fork!",
              //   style: MyApp.style,
              // ),
              Text(
                "Give a Star!",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.yellowAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset(
            'assets/img/1.png',
            fit: BoxFit.cover,
          ),
          Column(
            children: <Widget>[
              Text(
                "Can be",
                style: MyApp.style,
              ),
              Text(
                "Used for",
                style: MyApp.style,
              ),
              Text(
                "Splash Screens",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.redAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset(
            'assets/img/1.png',
            fit: BoxFit.cover,
          ),
          Column(
            children: <Widget>[
              Text(
                "Do",
                style: MyApp.style,
              ),
              Text(
                "Try it",
                style: MyApp.style,
              ),
              Text(
                "Thank You..!",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
  ];

  Widget _buildDot(int index) {
    double selectedness = Curves.easeOut.transform(
      max(
        0.0,
        1.0 - ((page ?? 0) - index).abs(),
      ),
    );
    double zoom = 1.0 + (2.0 - 1.0) * selectedness;
    return new Container(
      width: 25.0,
      child: new Center(
        child: new Material(
          color: Colors.white,
          type: MaterialType.circle,
          child: new Container(
            width: 8.0 * zoom,
            height: 8.0 * zoom,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            LiquidSwipe(
              pages: pages,
              positionSlideIcon: 0.2,
              enableSlideIcon: true,
              slideIconWidget: Icon(Icons.arrow_back_ios),
              // onPageChangeCallback: pageChangeCallback,
              waveType: WaveType.liquidReveal,
              liquidController: liquidController,
              ignoreUserGestureWhileAnimating: true,
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  Expanded(child: SizedBox()),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List<Widget>.generate(pages.length, _buildDot),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output Screens looks like this..

Get full source code: https://github.com/PrajwalZade/flutter_liquid_swipe

Thank You..!