https://github.com/iamsahdeep/liquid_button
Liquify your buttons, web demo at website
https://github.com/iamsahdeep/liquid_button
button button-animation button-widget buttons flutter flutter-apps flutter-package flutter-plugin flutter-ui flutter-widget liquid liquidity wave
Last synced: 11 months ago
JSON representation
Liquify your buttons, web demo at website
- Host: GitHub
- URL: https://github.com/iamsahdeep/liquid_button
- Owner: iamSahdeep
- License: apache-2.0
- Created: 2020-02-27T11:49:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-01T20:01:43.000Z (almost 6 years ago)
- Last Synced: 2025-03-18T17:24:43.058Z (11 months ago)
- Topics: button, button-animation, button-widget, buttons, flutter, flutter-apps, flutter-package, flutter-plugin, flutter-ui, flutter-widget, liquid, liquidity, wave
- Language: Dart
- Homepage: https://iamsahdeep.github.io/liquid_button/#/
- Size: 2.39 MB
- Stars: 21
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
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
```
* 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](https://github.com/iamSahdeep/liquid_button/blob/master/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](https://github.com/iamSahdeep) but with lots of support and help.
> If you appreciate my work, consider buying me a cup of :coffee: to keep me recharged :metal:
> + [PayPal](https://www.paypal.me/sahdeep)
>
> Or you can also endorse me on [LinkedIn](https://www.linkedin.com/in/iamsahdeep/) to keep me motivated.
>
> I love my work and I'm available for freelance work. Contact me on my email: sahdeepsingh98@gmail.com
