liquid_button 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 78


Logo Liquid Button

Pub

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.

Get it from Github 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 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 🤘

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: sahdeepsingh98@gmail.com

#ChangeLog

1.0.0 #

  • Liquid Button - First Release

example/lib/main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                RoundClothButton(
                  expandFactor: 20,
                  backgroundColor: Colors.black87,
                  gradientColor: Colors.black54,
                  retainGradient: true,
                  height: 100,
                  width: 400,
                  child: Text(
                    "Round Cloth Button",
                    style: TextStyle(
                        fontSize: 30,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
                ClothButton(
                  expandFactor: 10,
                  backgroundColor: Colors.black87,
                  height: 100,
                  gradientColor: Colors.black54,
                  child: Text(
                    "Cloth Button",
                    style: TextStyle(
                        fontSize: 30,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                  width: 400,
                ),
                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,
                ),
              ],
            )),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  liquid_button: ^1.0.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:liquid_button/liquid_button.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
55
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
78
Learn more about scoring.

We analyzed this package on May 24, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.1
  • pana: 0.13.8-dev
  • Flutter: 1.17.0

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test