Hi, Introducing Liquid Button for Flutter. It supports Web and Mobile, not tested on Ios. Inspired by Liquid Button in JS.
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
Get the package from Pub:
flutter packages get
Import it in your file
- 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, ),
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 🤘
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: firstname.lastname@example.org