flutter_advanced_switch

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

Switch LightSwitch Dark
Flutter Advanced Switch Off StateFlutter 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

ParameterDescriptionTypeDefault
controllerDetermines if widget is enabled.ValueNotifier
activeColorDetermines current state.ColorColors.green
inactiveColorDetermines background color for the active state.ColorColors.grey
activeChildDetermines background color for the inactive state.Widget
inactiveChildDetermines label for the active state.Widget
activeImageDetermines label for the inactive state.ImageProvider
inactiveImageDetermines background image for the active state.ImageProvider
borderRadiusDetermines background image for the inactive state.BorderRadiusRadius.circular(15)
widthDetermines border radius.Double50.0
heightDetermines width.Double30.0
enabledDetermines height.booltrue
disabledOpacityDetermines opacity of disabled control.double0.5
thumbCustom thumb widgetWidget

Demo

Flutter Advanced Switch Preview

Libraries

flutter_advanced_switch