liquid_button

Description:

liquid button

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

copied to clipboard


Get the package from Pub:
flutter packages get
copied to clipboard


Import it in your file
import 'package:liquid_button/liquid_button.dart';
copied to clipboard


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,
),
copied to clipboard
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]