Description:

swipeable button

Swipeable button #
A swipeable button widget.
Features #


Customizable size: you can manually specify the height of the button. It
takes the width from its parent element.


Make it either triggerable one time only or infinite times.


The label shown on the button can be any widget


It can match the style of your application: you can customize the color
of the button and fully customize the thumb!


Live Preview #
You can check the example page here!
Getting started #
This package has been built for Flutter.
Add swipeable_button: ^0.2.0 to your pubspec.yaml dependencies.
You need to import the library in every file that uses this package by using
import 'package:swipeable_button/swipeable_button.dart';
copied to clipboard
Usage #
The SwipeableButton class provides named constructors so it's easier to start
using it.
Basic usage #
You can use the simplified constructor SwipeableButton.simple to create a
SwipeableButton widget.
SwipeableButton.simple(
label: const Center(
child: Text(
"Delete",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
height: 40.0,
minThumbWidth: 40.0,
oneTime: true,
color: Colors.red,
thumbColor: Colors.orange,
thumbIconColor: Colors.black,
borderRadius: BorderRadius.circular(5.0),
onSwipe: () {
// Perform delete action.
},
)
copied to clipboard
There is also a simplified constructor SwipaebleButton.simpleSlidable that
creates a SwipeableButton widget with a slidable thumb.
SwipeableButton.simpleSlidable(
label: const Center(
child: Text(
"Delete",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
height: 40.0,
minThumbWidth: 40.0,
oneTime: true,
color: Colors.red,
thumbColor: Colors.orange,
thumbIconColor: Colors.black,
borderRadius: BorderRadius.circular(5.0),
onSwipe: () {
// Perform delete action.
},
)
copied to clipboard
Default usage #
You can customize the SwipeableButton by using the default constructor.
SwipeableButton(
height: 40.0,
minThumbWidth: 40.0,
oneTime: true,
label: const Text("Delete"),
color: Colors.red,
borderRadius: BorderRadius.circular(5.0),
thumbBuilder: (BuildContext context,
double swipedFraction, bool isComplete) =>
Padding(
padding: const EdgeInsets.all(2.0),
child: DecoratedBox(
decoration: BoxDecoration(
color: swipedFraction < 0.5
? Color.lerp(Colors.red, Colors.yellow, 2.0 * swipedFraction)
: Color.lerp(Colors.yellow, Colors.green, 2.0 * swipedFraction - 1.0),
borderRadius: BorderRadius.circular(16.0)),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(
width: 36.0,
child: isComplete
? const Icon(Icons.sentiment_very_satisfied,
color: Colors.white)
: const Icon(Icons.sentiment_very_dissatisfied,
color: Colors.white),
),
],
),
),
),
onSwipe: () {
// Perform delete action.
},
)
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter