Skip to content

alex-melnyk/flutter_advanced_switch

Repository files navigation

flutter_advanced_switch

An advanced switch widget, that can be fully customized with size, text, color, radius of corners.

APP_ICON

Switch Light Switch Dark
Flutter Advanced Switch Off State Flutter Advanced Switch On State

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
    ...
    flutter_advanced_switch: <latest_version>

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 = ValueNotifier<bool>(false);

// 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 = ValueNotifier<bool>(false);
// ...
AdvancedSwitch(
    controller: _controller,
)
// ...

Customized Switch

// ...
final _controller = ValueNotifier<bool>(false);
// ...
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 = ValueNotifier<bool>(false);
// ...
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 current state. ValueNotifier
activeColor Determines background color for the active state. Color Colors.green
inactiveColor Determines background color for the inactive state. Color Colors.grey
activeChild Determines label for the active state. Widget
inactiveChild Determines label for the inactive state. Widget
activeImage Determines background image for the active state. ImageProvider
inactiveImage Determines background image for the inactive state. ImageProvider
borderRadius Determines border radius. BorderRadius Radius.circular(15)
width Determines width. Double 50.0
height Determines height. Double 30.0
enabled Determines if widget is enabled. bool true
disabledOpacity Determines opacity of disabled control. double 0.5
thumb Custom thumb widget Widget
initialValue Initial value bool false
onChanged Changed callback ValueChanged

Demo

Flutter Advanced Switch Preview