Ripple Button

Pub Version

A fully customizable button with material ripple effect. Easy to use having some pre-defined button types.

Screenshot:

Bouncing Animation:

RippleButton

isEnabled

This will change the button design and behaviour to show if it is disabled or enabled.

If false, this will change background color to disabled (see RippleButtonColor), reduce opacity. The button will also not be clickable.

On activation or deativation it will do a bouncing animation to gain users attention.

propType: bool

onPressed

Expects a function that will be executed on button press. If null, button will not be clickable. To apply disable design use isEnabled

propType: Function()?

padding

Adds a padding to the button.

propType: EdgeInsets

style

This will change the style form the Ripple Button Send values to customize the Ripple Button Widget

propType: RippleButtonStyle

type

This are pre-config designs for the ripple button This is optional, if not set the widget will use your design for the button

propType: RippleButtonType

color

Expects a RippleButtonColor This will change the color style to the ripple button

propType: RippleButtonColor

border

Expects a RippleButtonBorder This will change the border style to the ripple button

propType: RippleButtonBorder

RippleButtonStyle

elevation

This will change the elevation to the ripple button

propType: double

height

This will change the height to the ripple button

propType: double

width

This will change the width to the ripple button

propType: double

text

This will change the text style of the text inside the ripple button

propType: TextStyle

RippleButtonColor

background

This will change the background color from the button

propType: Color

foreground

This will change the foreground color from the button

disabled

This will change the disabled color from the button

propType: Color

overlay

This will change the color on mouse over

propType: Color

shadow

This will change the shadow color from the button

propType: Color

RippleButtonBorder

side

Expects a BorderSide to change border size, color and style Default is none.

propType: BorderSide

radius

Expects a BorderRadius to set border format (round corners for example) Default is zero.

propType: BorderRadius

RippleButtonType

YELLOW:

Captura de Tela 2021-05-02 às 19 46 39

AMBER:

Captura de Tela 2021-05-02 às 19 47 09

WHITE_TRANSLUCENT:

Captura de Tela 2021-05-02 às 19 47 09

BLUE_TRANSLUCENT:

Captura de Tela 2021-05-02 às 19 46 53

License

See LICENSE.md

Libraries

animated_bouncing
custom_ripple_button
ripple_button