flutter_advanced_switch
An advanced switch widget, that can be fully customized with size, text, color, radius of corners.
| Switch Light | Switch Dark |
|---|---|
 |
 |
Getting Started
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
flutter_advanced_switch:
Import in your project:
import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
Examples
How to use
// ...
// 1. Create a controller in the state of the StatefulWidget
final _controller = AdvancedSwitchController();
// 2. In case, you want to call setState on switch changes.
// 2.1. Add event listener, for example in the initState() method.
// ...
bool _checked = false;
// ...
@override
void initState() {
super.initState();
_controller.addListener(() {
setState(() {
if (_controller00.value) {
_checked = true;
} else {
_checked = false;
}
});
});
}
// 3. Add AdvancedSwitch to the build method.
// ...
AdvancedSwitch(
controller: _controller,
),
// ...
Regular Switch
// ...
final _controller = AdvancedSwitchController();
// ...
AdvancedSwitch(
controller: _controller,
)
// ...
Customized Switch
// ...
final _controller = AdvancedSwitchController();
// ...
AdvancedSwitch(
controller: _controller,
activeColor: Colors.green,
inactiveColor: Colors.grey,
activeChild: Text('ON'),
inactiveChild: Text('OFF'),
activeImage: AssetImage('assets/images/on.png'),
inactiveImage: AssetImage('assets/images/off.png'),
borderRadius: BorderRadius.all(const Radius.circular(15)),
width: 50.0,
height: 30.0,
enabled: true,
disabledOpacity: 0.5,
),
// ...
Custom thumb
// ...
final _controller = AdvancedSwitchController();
// ...
AdvancedSwitch(
controller: _controller,
thumb: ValueListenableBuilder(
valueListenable: _controller,
builder: (_, value, __) {
return Icon(value
? Icons.lightbulb
: Icons.lightbulb_outline);
},
),
),
// ...
AdvancedSwitch Parameters
| Parameter | Description | Type | Default |
|---|---|---|---|
controller |
Determines if widget is enabled. | AdvancedSwitchController | |
activeColor |
Determines current state. | Color | Colors.green |
inactiveColor |
Determines background color for the active state. | Color | Colors.grey |
activeChild |
Determines background color for the inactive state. | Widget | |
inactiveChild |
Determines label for the active state. | Widget | |
activeImage |
Determines label for the inactive state. | ImageProvider | |
inactiveImage |
Determines background image for the active state. | ImageProvider | |
borderRadius |
Determines background image for the inactive state. | BorderRadius | Radius.circular(15) |
width |
Determines border radius. | Double | 50.0 |
height |
Determines width. | Double | 30.0 |
enabled |
Determines height. | bool | true |
disabledOpacity |
Determines opacity of disabled control. | double | 0.5 |
thumb |
Custom thumb widget | Widget |
Demo
35 Oct 4, 2022
20 Nov 23, 2022
8 Apr 15, 2022
69 Dec 12, 2022
2 Apr 18, 2022
0 Jan 16, 2022
19 Nov 4, 2022
6 Dec 30, 2022
106 Dec 12, 2022
174 Dec 19, 2022
0 Oct 18, 2021
10 Dec 29, 2022
18 Dec 16, 2022
8 Oct 16, 2022
5 Nov 11, 2022
44 Jul 5, 2022
82 Jan 6, 2023
219 Dec 29, 2022