PowerSwitchButton
PowerSwitchButton is a versatile and customizable switch widget for Flutter that allows you to easily add a stylish toggle switch to your applications. With adjustable parameters for size, stroke width, dash width, and dash space, this widget provides a modern, eye-catching switch with customizable on and off colors.
Features
- Customizable Size: Adjust the size of the switch to fit your design needs.
- Adjustable Stroke and Dash: Control the stroke width, dash width, and dash space to match your app's aesthetic.
- Color Options: Set different colors for the switch in its on and off states.
- Callback Function: Receive a callback with the switch state whenever it is toggled.
- Icon Customization: Change the color of the icon and set a custom icon.
- Gradient Support: Add gradients to the switch’s on and off states.
- Disabled State: Optionally disable the switch.
- Shape Options: Choose between different shapes for the switch button.
- Animation Customization: Adjust the animation duration and curve.
- Loading State: Show an intermediate loading state with animation while the switch is processing.
- Initial State Control: Set the initial state of the switch to match your device's actual state.
Demo
Simple button without loading state:
Power Switch Button with loading State:
Installation
Add the following to your pubspec.yaml file:
dependencies:
power_switch_button: ^0.0.6
Usage
Import the Package
import 'package:power_switch_button/power_switch_button.dart';
import 'package:power_switch_button/enum.dart';
Basic Example
Here is a basic example of how to use the PowerSwitchButton widget in your application:
import 'package:flutter/material.dart';
import 'package:power_switch_button/enum.dart';
import 'package:power_switch_button/power_switch_button.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // Hides the debug banner in the app
home: Scaffold(
backgroundColor:
Colors.white, // Sets the background color of the scaffold
body: Center(
child: PowerSwitchButton(
size: 250.0, // Required: Size of the switch button
strokeWidth: 9.0, // Required: Width of the dashed border
dashWidth: 1.0, // Required: Width of each dash in the dashed border
dashSpace:
2.0, // Required: Space between each dash in the dashed border
onColor: Colors.green, // Required: Color when the switch is on
offColor: Colors.red, // Required: Color when the switch is off
backgroundColor:
Colors.grey[200]!, // Required: Background color of the switch
iconColor:
Colors.white, // Required: Color of the icon in the switch
initialValue: true, // Optional: Initial state of the switch (default: false)
onToggle: (bool value) {
// Required: Callback function that is triggered when the switch is toggled
print(value); // Prints the switch state (on/off) to the console
},
shape: Shape
.SQUARE, // Optional: Shape of the switch button (circle or square)
borderRadius: 20, // Optional: Border radius for square shape
customIcon: Icons
.power_settings_new, // Optional: Custom icon for the switch
label: 'Power Switch', // Optional: Label text inside the switch
disabled: false, // Optional: Whether the switch is disabled or not
onGradient: const LinearGradient(
colors: [
Colors.green,
Colors.lightGreen
], // Optional: Gradient colors for the on state
),
offGradient: const LinearGradient(
colors: [
Colors.red,
Colors.orange
], // Optional: Gradient colors for the off state
),
animationDuration: const Duration(
milliseconds:
300), // Optional: Duration of the toggle animation
animationCurve:
Curves.bounceInOut, // Optional: Curve of the toggle animation
loadingCallback: () async {
// Optional: Callback function that handles the loading state
await Future.delayed(
const Duration(seconds: 5)); // Simulates a loading delay
return true; // Indicates successful loading
},
loadingText:
"Loading..", // Optional: Text displayed during the loading state
),
),
),
);
}
}
Parameters
- size: The size of the switch (e.g., 200).
- strokeWidth: The width of the dashed stroke (e.g., 4).
- dashWidth: The width of each dash in the dashed circle (e.g., 1).
- dashSpace: The space between each dash in the dashed circle (e.g., 2).
- onColor: The color of the switch when it is in the 'on' position (e.g., Colors.red).
- offColor: The color of the switch when it is in the 'off' position (e.g., Colors.grey).
- backgroundColor: The color of the switch background (e.g., Colors.black).
- iconColor: The color of the icon (e.g., Colors.black).
- customIcon: An optional custom icon to display in the switch (e.g., Icons.power_settings_new).
- label: An optional label text to display inside the switch (e.g., 'Power Switch').
- disabled: A boolean to disable the switch (default is false).
- onGradient: An optional gradient for the 'on' state (e.g., LinearGradient(colors:
Colors.green, Colors.lightGreen)). - offGradient: An optional gradient for the 'off' state (e.g., LinearGradient(colors:
Colors.red, Colors.orange)). - shape: The shape of the switch button (e.g., Shape.SQUARE).
- borderRadius: The border radius for the square shape (e.g., 10).
- animationDuration: The duration of the toggle animation (default is Duration(milliseconds: 300)).
- animationCurve: The curve of the toggle animation (default is Curves.bounceInOut).
- onToggle: A callback function that receives the switch's state (true for on, false for off).
- loadingCallback: A function to be called when the switch is loading, returning a Future
- loadingText: Text to display while the switch is in the loading state (optional).
- initialValue: The initial state of the switch (true for on, false for off). Defaults to false for backward compatibility.
License
This package is licensed under the MIT License. See the LICENSE file for more details.