Hi, Introducing Liquid Button for Flutter. It supports Web and Mobile, not tested on Ios. Inspired by Liquid Button in JS.

Preview #

Live Demo #

Download sample apk as shown in example from releases.

Experience Live Demo on (not on mobile) : https://iamsahdeep.github.io/liquid_button/#/

Getting Started #

• Add this to your pubspec.yaml

  dependencies:
  liquid_button: 0.0.1
  
  

• Get the package from Pub:

  flutter packages get
  

• Import it in your file

  import 'package:liquid_button/liquid_button.dart';
  

Example #

• Look for complete example in example folder.
• Remember to wrap it with GestureDetector or InkWell, might include in next version.

                LiquidButton(
                  expandFactor: 20,
                  backgroundColor: Colors.black87,
                  height: 100,
                  child: Text(
                    "Liquid Button",
                    style: TextStyle(
                        fontSize: 30,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                  gradientColor: Colors.black54,
                  width: 400,
                ),

Attributes #

Currently we have 3 buttons : RoundClothButton(poor naming :p), ClothButton and LiquidButton. Here are some of the attributes in which height,width and background color is the required. Rest can be left to have default values.

• expandFactor : (double) Allows you to decide Expansion of the button while animating. Should be less than 50.
• backgroundColor : (Color) Color of the button.
• gradientColor : (Color) If you want gradient effect onHover, if not given no color effect will be there.
• retainGradient : (bool) If you want to retain the gradient effect when mouse leaves the button area. Default is false.
• gap : (int) Integer to provide gap between subsequent point while painting the line. Do experiment with it, Should not be greater that height/2.

Known Issues #

• Lag on Web - It generally happens when we are using multiple Liquid Buttons on same screen due to usage of MouseRegion.You might experience the same on the live demo also. Check this issue https://github.com/flutter/flutter/issues/41194
• Gesture not working on Web on Mobile - Need to work on it..
• Note : Please report any kind of bugs you are experiencing.

Author & support #

This project is created by Sahdeep Singh but with lots of support and help.

If you appreciate my work, consider buying me a cup of ☕ to keep me recharged 🤘

• PayPal

Or you can also endorse me on LinkedIn to keep me motivated.

I love my work and I'm available for freelance work. Contact me on my email: [email protected]