happy_slider 0.0.3

A customizable slide-to-confirm widget for Flutter that provides a smooth sliding interaction. Users can slide a button from left to right to confirm an action, with extensive customization options fo [...]

HappySlider

A customizable slide-to-confirm widget for Flutter that provides a smooth sliding interaction. Users can slide a button from left to right to confirm an action, with extensive customization options for colors, text, icons, and button content.

## Features

• Smooth sliding animation with drag gestures
• Customizable width, height, and slider button size
• Configurable colors for border, button, and background
• Support for custom text, text styles, and button content
• Optional default arrow icon or custom icon
• Callback function for slide completion
• Rounded corners and shadow effects
• Responsive and adaptable to various screen sizes

Installation

Add the following to your pubspec.yaml file:

dependencies:
  happy_slider: ^0.1.0

Then run:

flutter pub get

Usage

Import the package in your Dart file:

import 'package:happy_slider/happy_slider.dart';

Add the HappySlider widget to your widget tree:

HappySlider(
  width: 300,
  height: 60,
  text: 'Slide to confirm',
  onSlideComplete: () => print('Slide completed!'),
)

Example

Here's a complete example of using HappySlider with various customizations:

import 'package:flutter/material.dart';
import 'package:happy_slider/happy_slider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('HappySlider Example')),
        body: Center(
          child: HappySlider(
            width: 300,
            height: 60,
            sliderWidth: 100,
            text: 'Slide to Unlock',
            borderColor: Colors.blue,
            buttonColor: Colors.blueAccent,
            backgroundColor: Colors.blue.shade50,
            borderWidth: 2.0,
            borderRadius: 30.0,
            textStyle: const TextStyle(
              color: Colors.blueGrey,
              fontSize: 16,
              fontWeight: FontWeight.w600,
            ),
            buttonText: 'Unlock',
            buttonTextStyle: const TextStyle(
              color: Colors.white,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
            buttonIcon: const Icon(Icons.lock_open, color: Colors.white),
            buttonIconSpacing: 8.0,
            showDefaultIcon: false,
            buttonContentAlignment: MainAxisAlignment.center,
            onSlideComplete: () {
              print('Slide completed!');
            },
          ),
        ),
      ),
    );
  }
}

Properties

Property	Type	Description	Default Value
width	double	Total width of the slider widget	Required
height	double	Height of the slider widget	Required
sliderWidth	double	Width of the draggable slider button	160
onSlideComplete	VoidCallback	Callback when slide reaches threshold	Required
borderColor	Color	Color of the widget border	Colors.grey
buttonColor	Color	Background color of the slider button	Colors.orange
backgroundColor	Color	Background color of the slider container	Colors.transparent
borderWidth	double	Width of the border stroke	2.0
text	String	Text displayed in the background	'Slide to confirm'
textStyle	TextStyle?	Style for the background text	null
buttonTextStyle	TextStyle?	Style for the button text	null
borderRadius	double	Border radius for rounded corners	25.0
sliderButton	Widget?	Custom widget for slider button content	null
buttonText	String?	Text to display on the slider button	null
buttonIcon	Widget?	Custom icon for the slider button	null
buttonIconSpacing	double?	Spacing between button text and icon	14.0
showDefaultIcon	bool	Show default arrow icon if no custom icon	true
defaultIconColor	Color?	Color of the default arrow icon	Colors.black
defaultIconSize	double?	Size of the default arrow icon	24.0
buttonContentAlignment	MainAxisAlignment	Horizontal alignment of button content	MainAxisAlignment.center
buttonCrossAxisAlignment	CrossAxisAlignment	Vertical alignment of button content	CrossAxisAlignment.center

Notes

• The slider requires the user to drag at least 80% of the available distance to trigger the onSlideComplete callback.
• If the slide is not completed, the button animates back to its original position.
• The widget is fully customizable to match your app's theme and design requirements.
• Ensure the width is sufficiently larger than sliderWidth to allow for smooth dragging.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue on the GitHub repository.

License

This package is licensed under the MIT License. See the LICENSE file for details.