bg_swipe_button 0.0.1 copy "bg_swipe_button: ^0.0.1" to clipboard
bg_swipe_button: ^0.0.1 copied to clipboard

A customizable swipe-to-complete button widget for Flutter that supports dynamic text, icon, gradient backgrounds, and customizable swipe actions.

Sure! Below is a README.md file for your Flutter package BGSwipeButton.

# BGSwipeButton

A customizable swipe button widget for Flutter that provides a sliding action to trigger an event when completed. The button can have a gradient background, customizable icons, text, and colors for both before and after the swipe action.

## Features

- **Swipe action**: Slide the button horizontally to trigger the `onCompleted` callback.
- **Customizable**: 
  - Background gradient colors.
  - Before and after swipe text and text colors.
  - Customizable icons for both before and after the swipe.
  - Customizable button radius.
- **Flexible design**: You can control the button's text, icons, colors, and animations.

## Installation

To use `BGSwipeButton` in your Flutter project, add it to your `pubspec.yaml` file:

```yaml
dependencies:
  bg_swipe_button: latest_version

Run the following command to fetch the package:

flutter pub get

Usage #

Here is how you can use the BGSwipeButton widget in your Flutter app.

import 'package:flutter/material.dart';
import 'package:bg_swipe_button/bg_swipe_button.dart'; // Import the package

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('BGSwipeButton Example')),
        body: Center(
          child: BGSwipeButton(
            onCompleted: () {
              print("Swipe completed!");
            },
            text: 'Swipe to complete',  // Text before swipe
            completedText: 'Completed!', // Text after completing the swipe
            beforeSwipeTextColor: Colors.white, // Text color before swipe
            afterSwipeTextColor: Colors.black, // Text color after swipe
            beforeSwipeIcon: Icon(Icons.arrow_forward_ios, color: Colors.white), // Icon before swipe
            afterSwipeIcon: Icon(Icons.check, color: Colors.white), // Icon after swipe
            backgroundColor: Colors.blue, // Background color (used when gradient isn't applied)
            completeColor: Colors.green, // Color of the button after swipe is complete
            buttonRadius: 30.0, // Radius of the button
            gradientColors: [Colors.purple, Colors.pink], // Gradient colors for the background
          ),
        ),
      ),
    );
  }
}

Parameters #

Parameter Type Description
onCompleted VoidCallback Callback function to execute when the swipe action is completed.
text String The text displayed before the swipe action is completed.
completedText String The text displayed after the swipe action is completed.
backgroundColor Color Background color of the button (if no gradient is applied). Default is Colors.grey.
completeColor Color Color of the button after the swipe is completed. Default is Colors.green.
buttonRadius double The radius of the button. Default is 30.0.
beforeSwipeTextColor Color Text color before the swipe action is completed. Default is Colors.white.
afterSwipeTextColor Color Text color after the swipe action is completed. Default is Colors.white.
beforeSwipeIcon Icon The icon displayed before the swipe action is completed.
afterSwipeIcon Icon The icon displayed after the swipe action is completed.
gradientColors List<Color> List of colors to be used for the gradient background. Default is [Colors.blue, Colors.blueAccent].

Customization #

  • You can change the direction of the swipe by modifying the gesture detection logic.
  • The button's gradientColors list accepts multiple colors to form a linear gradient background.
  • The button's text and icon can be customized both before and after the swipe action is completed.

Example #

Here is a complete example of how the BGSwipeButton looks in your app:

BGSwipeButton(
  onCompleted: () {
    print("Swipe completed!");
  },
  text: 'Swipe to complete',
  completedText: 'Completed!',
  beforeSwipeTextColor: Colors.white,
  afterSwipeTextColor: Colors.black,
  beforeSwipeIcon: Icon(Icons.arrow_forward_ios, color: Colors.white),
  afterSwipeIcon: Icon(Icons.check, color: Colors.white),
  backgroundColor: Colors.blue,
  completeColor: Colors.green,
  buttonRadius: 30,
  gradientColors: [Colors.purple, Colors.pink],
)

License #

This project is licensed under the MIT License - see the LICENSE file for details.


Feel free to fork, contribute, or provide feedback. Happy coding! 🎉


### Instructions for using the README:
1. **Basic Description**: The `README.md` file starts with a brief description of the widget and its main features.
2. **Installation Instructions**: It provides instructions on how to add the package to your `pubspec.yaml`.
3. **Usage Example**: The usage section demonstrates how to integrate `BGSwipeButton` in a Flutter app, including a minimal example with customizable parameters.
4. **Customization**: This part highlights the main customizable parameters such as text, icons, colors, etc.
5. **License**: This section contains a placeholder for licensing information. You can adjust it according to the license you want to use for this package.

This should help others get started with using `BGSwipeButton` in their own Flutter projects!
1
likes
0
points
44
downloads

Publisher

unverified uploader

Weekly Downloads

A customizable swipe-to-complete button widget for Flutter that supports dynamic text, icon, gradient backgrounds, and customizable swipe actions.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on bg_swipe_button