splashbyte/action_slider

A Flutter slider to confirm actions and provide feedback on the success of these after subsequent loading.

action_slider's Issues

Button width is not shrinking during loading,error,sucess states when used inside ListView

When the package is used inside Column,it is performing as expected.But once used in Listview,the modes change,the loading icons are shown ,but the button is not resizing according to various state changes

Standard slider will crash when setting height to less than 60

return ActionSlider.standard(
sliderBehavior: SliderBehavior.stretch,
height: 59.w,
width: 330.w,
backgroundColor: Colors.white,
toggleColor: Colors.blueAccent,
action: (controller) async {
controller.loading(); //starts loading animation
await Future.delayed(const Duration(seconds: 2));
controller.success(); //starts success animation
await Future.delayed(const Duration(seconds: 2));
controller.reset(); //resets the slider
},
child: const Text('Slide to confirm'),
);

this is a pretty basic slider, and the following error will be thrown when the slide is complete.
======== Exception caught by widgets library =======================================================
The following ArgumentError was thrown building AnimatedBuilder(listenable: AnimationController#b8034(◀ 1.000)➩Cubic(0.42, 0.00, 0.58, 1.00), state: _AnimatedState#e42b6):
Invalid argument(s): 0.0

However, everything will work perfectly if the height it set to be greater than 60.

How to keep the slider expanded on success

Is it possible to keep the slider expanded on completion and not compact it to the "FAB" type result?

Slide direction

Would it be possible to add a direction to the slider?
I would love to be able to have 2 sliders, one that slides left to right and one reversed :)

controller.success()/failure() not working

Hi, thank you for the beautiful plugin.

I'm trying to use it in the app now, and observing strange behaviour – controller.success() and controller.failure() do not trigger rebuild when controller is in loading mode.

I.e. if in onSlide() I have controller.loading() and then try to do .success() or .failure(), nothing happens. Refreshing (hot refresh) updates the widget to the correct state. controller.reset() works as intended.

Is it something wrong with my code or I'm hitting a bug?

Code example (bascially, a copy-paste from examples):

class SubmitSlider extends StatelessWidget {
  const SubmitSlider({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ActionSlider.standard(
      onSlide: (controller) async {
        controller.loading(); 
        await Future.delayed(const Duration(seconds: 1));
        print('success');
        controller.success(); 
      },
      child: const Text('Submit'),
    );
  }
}

(screencast is cut, as it just spins endlessly)

Some details:

OS: MacOS 12.4
Build: Flutter MacOS

Flutter 3.0.2 • channel stable
Framework • revision cd41fdd495 (4 weeks ago) • 2022-06-08 09:52:13 -0700
Engine • revision f15f824b57
Tools • Dart 2.17.3 • DevTools 2.12.2

action_slider's version: 0.5.0

BackgroundColor

Hello, good day everyone. I've faced an issue on Flutter 3.10.6 that the backgroundColor is not changing.
To fix this issue I've sent this pull request: #5
By replacing DecoratedBox to Container

child widget collides with toggle icon

The 'child' widget, which is the widget displayed on the background, with a large width collides with toggle icon (visually). And is centered based on the whole action slider rather than the empty part of the slider. I have created a pr #7

Declarative SliderMode

Currently, you can only set the SliderMode via the controller. However, it would be better if this could also be done directly via the constructor so that the slider always shows the current state.

This error occurs when my slider finishes executing

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following ArgumentError was thrown building AnimatedBuilder(listenable:
AnimationController#e6f76(▶ 1.000)➩Cubic(0.42, 0.00, 0.58, 1.00), dirty, state:
_AnimatedState#b5ad8):
Invalid argument(s): 0.0

The relevant error-causing widget was:
  AnimatedBuilder
  AnimatedBuilder:file:///Users/lee/.pub-cache/hosted/pub.flutter-io.cn/action_slider-0.7.0/lib/src/action_sli
  der_widget.dart:899:16

When the exception was thrown, this was the stack:
#0      double.clamp (dart:core-patch/double.dart:234:7)
#1      _ActionSliderState.build.<anonymous closure>.<anonymous closure>.statePosToLocalPos
(package:action_slider/src/action_slider_widget.dart:906:46)
#2      _ActionSliderState.build.<anonymous closure>.<anonymous closure>
(package:action_slider/src/action_slider_widget.dart:907:30)
#3      ListenableBuilder.build (package:flutter/src/widgets/transitions.dart:1123:48)
#4      _AnimatedState.build (package:flutter/src/widgets/transitions.dart:135:48)
#5      StatefulElement.build (package:flutter/src/widgets/framework.dart:5583:27)
#6      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5471:15)
#7      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5634:11)
#8      Element.rebuild (package:flutter/src/widgets/framework.dart:5187:7)
#9      BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2895:19)
#10     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:984:21)
#11     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:457:5)
#12     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1325:15)
#13     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1255:9)
#14     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1113:5)
#15     _invoke (dart:ui/hooks.dart:312:13)
#16     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:383:5)
#17     _drawFrame (dart:ui/hooks.dart:283:31)

════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: Invalid argument(s): 0.0
Another exception was thrown: Invalid argument(s): 0.0
Another exception was thrown: Invalid argument(s): 0.0
Another exception was thrown: Invalid argument(s): 0.0

Miss the onSlide when using the lib

Sorry wrong manip

How can we add border around the slider button?

I'm making this design. Almost everything is done. I just need to add purple border around the button. How can i do this?
Here is my code :

Center(
                            child: ActionSlider.custom(
                              toggleMargin: EdgeInsets.all(5),
                              // width: 300.0,
                              controller: _controller,
                              toggleWidth: 50.0,
                              height: isSmallScreen?55.0:60.0,
                              backgroundColor: Colors.white,

                              foregroundChild: Container(
                                  decoration: const BoxDecoration(
                                    color: AppColors.themeColor,
                                    borderRadius: BorderRadius.all(Radius.circular(18.0)),
                                  ),
                                  child: const Icon(Icons.arrow_forward, color: Colors.white)),
                              foregroundBuilder: (context, state, child) => child!,
                              backgroundChild: Center(
                                child: Text('Swipe To Check In',
                                    style: TextStyle(
                                      color: AppColors.themeColor,
                                      fontWeight:
                                      FontWeight.w600,
                                      fontFamily: 'Manrope',
                                      fontSize: isSmallScreen?14.0:16,
                                    )),
                              ),
                              backgroundBuilder: (context, state, child) => ClipRect(
                                  child: OverflowBox(
                                      maxWidth: state.standardSize.width,
                                      maxHeight: state.toggleSize.height,
                                      minWidth: state.standardSize.width,
                                      minHeight: state.toggleSize.height,
                                      child: child!)),
                              backgroundBorderRadius: BorderRadius.circular(18.0),

                              action: (controller) async {
                                controller.loading(); //starts loading animation
                                await Future.delayed(const Duration(seconds: 3));
                                controller.success(); //starts success animation
                                await Future.delayed(const Duration(seconds: 1));
                                controller.reset(); //resets the slider
                              },
                            ),
                          ),

Add a needReverse field to determine if you want to rewind the animation at the end of the slide.

Add a needReverse field to determine if you want to rewind the animation at the end of the slide.
This effect is used in the slider of the captcha, as shown in the image below, when the slide ends, the slider does not return to the origin, but stays in place.

at action_slider_widget.dart 1048 line

_slideAnimationController.reverse(from: 1.0);

rewrite

if (widget.needReverse) { _slideAnimationController.reverse(from: 1.0); }