custom_action_slider.dart

Go to the documentation of this file.

import 'package:action_slider/action_slider.dart';
 
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hugeicons/hugeicons.dart';
 
class CustomActionSlider extends StatefulWidget {
  final Function(ActionSliderController) action;
  final String label;
 
  const CustomActionSlider({
    super.key,
    required this.action,
    required this.label,
  });
 
  @override
  State<CustomActionSlider> createState() => _CustomActionSliderState();
}
 
class _CustomActionSliderState extends State<CustomActionSlider> {
  ActionSliderController actionSliderController = ActionSliderController();
  @override
  void dispose() {
    actionSliderController.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    final bool isRTL = Directionality.of(context) == TextDirection.rtl;
    
    return ActionSlider.custom(
      boxShadow: const [
        BoxShadow(
          spreadRadius: 0,
          blurRadius: 0,
        ),
      ],
      width: MediaQuery.of(context).size.width,
      controller: actionSliderController,
      toggleWidth: 90.0.sp,
      sliderBehavior: SliderBehavior.move,
      height: 60.0.sp,
      backgroundColor: Theme.of(context).colorScheme.primary.withOpacity(0.11),
      foregroundChild: Container(
        width: 100.sp,
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.primary,
          borderRadius: const BorderRadius.all(Radius.circular(28)),
          boxShadow: [
            BoxShadow(
              color: Theme.of(context).primaryColor.withOpacity(0.3),
              spreadRadius: 2,
              blurRadius: 7,
              offset: const Offset(0, 3),
            ),
          ],
        ),
        child: Center(
          child: Container(
            width: 6.sp,
            height: 20.sp,
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.primary,
              borderRadius: const BorderRadius.all(Radius.circular(28)),
            ),
          ),
        ),
      ),
      foregroundBuilder: (context, state, child) => child!,
      backgroundChild: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            children: List.generate(
              3,
              (index) => Icon(
                isRTL ? Icons.arrow_back_ios_outlined : Icons.arrow_forward_ios_outlined,
                size: 11.sp,
                color: Theme.of(context).hintColor,
              ),
            ),
          ),
          SizedBox(width: 10.sp),
          Text(
            widget.label.toUpperCase(),
            style: Theme.of(context)
                .textTheme
                .displaySmall
                ?.copyWith(color: Colors.grey, fontSize: 14.sp),
          ),
        ],
      ),
      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(100.0),
      action: widget.action,
      direction: isRTL ? TextDirection.rtl : TextDirection.ltr,
    );
  }
}
 
class CustomSliderV2 extends StatelessWidget {
  final String text;
  final dynamic Function(ActionSliderController)? action;
  final Color? color;
 
  const CustomSliderV2({
    super.key,
    required this.text,
    required this.action,
    this.color,
  });
 
  @override
  Widget build(BuildContext context) {
    final bool isRTL = Directionality.of(context) == TextDirection.rtl;
    
    return ActionSlider.standard(
      foregroundBorderRadius: BorderRadius.circular(10),
      backgroundBorderRadius: BorderRadius.circular(10),
      boxShadow: [
        BoxShadow(
          color: Theme.of(context).colorScheme.surface,
          blurRadius: 0,
          offset: const Offset(0, 0),
        ),
      ],
      icon: Icon(
        isRTL ? HugeIcons.strokeRoundedSwipeLeft03 : HugeIcons.strokeRoundedSwipeRight03,
        color: color ?? Theme.of(context).colorScheme.primary,
        size: 24.sp,
      ),
      toggleColor: Theme.of(context).colorScheme.surface,
      sliderBehavior: SliderBehavior.stretch,
      backgroundColor: color ?? Theme.of(context).primaryColor,
      action: action,
      direction: isRTL ? TextDirection.rtl : TextDirection.ltr,
      child: Text(
        text,
        style: Theme.of(context).textTheme.bodySmall?.copyWith(
              fontSize: 12.5.sp,
              color: Theme.of(context).colorScheme.surface,
              fontWeight: FontWeight.bold,
            ),
      ),
    );
  }
}