If you like this package, please leave a like there on pub.dev and star on GitHub.

A fully customizable slider to confirm actions and provide feedback on the success. It supports different states like loading, success and failure.

LTR and RTL are both supported.
For a switch with a similar look, you can check out animated_toggle_switch.

Examples

ActionSlider.standard() with SliderBehavior.stretch

ActionSlider.dual()

ActionSlider.standard() with TextDirection.rtl

ActionSlider.standard() with SliderIconAnimation.roll

ActionSlider.standard() with SliderBehavior.stretch and SliderIconAnimation.roll

You can build your own sliders with ActionSlider.custom()

Easy Usage

Easy to use and highly customizable.

ActionSlider.standard(
    child: const Text('Slide to confirm'),
    action: (controller) async {
        controller.loading(); //starts loading animation
        await Future.delayed(const Duration(seconds: 3));
        controller.success(); //starts success animation
    },
    ... //many more parameters
)

Two directions with ActionSlider.dual

ActionSlider.dual(
    child: const Text('Slide to confirm'),
    startAction: (controller) async {
        controller.success(expanded: true, side: SliderSide.start); //starts success animation with an expanded slider
    },
    endAction: (controller) async {
        controller.success(); //starts success animation
    },
    ... //many more parameters
)

Maximum customizability with ActionSlider.custom.

ActionSlider.custom(
    foregroundBuilder: (context, state, child) => ...,
    backgroundBuilder: (context, state, child) => ...,
    outerBackgroundBuilder: (context, state, child) => ...,
    action: (controller) => ...,
    ... //many more parameters
)