bg_swipe_button 0.0.1
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
gradientColorslist 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!