swipeable_button 0.2.0 copy "swipeable_button: ^0.2.0" to clipboard
swipeable_button: ^0.2.0 copied to clipboard

A customizable button widget that can be triggered by swiping.

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';

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.
  },
)

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.
  },
)

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.
  },
)
1
likes
140
pub points
74%
popularity

Publisher

verified publisheromnicron.it

A customizable button widget that can be triggered by swiping.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on swipeable_button