flutter_advanced_switch

flutter_advanced_switch

A highly customizable switch widget for Flutter with support for custom colors, text, icons, images, and more.

Switch Light	Switch Dark

Features

• ✅ Fully customizable colors, sizes, and shapes
• ✅ Support for text labels and icons
• ✅ Background images for active/inactive states
• ✅ Custom thumb widget support
• ✅ Smooth animations
• ✅ Enabled/disabled states
• ✅ Controller-based or callback-based state management
• ✅ Customizable thumb padding
• ✅ Null-safe

Getting Started

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

dependencies:
  flutter_advanced_switch: ^3.2.0

Import in your project:

import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';

Usage

Basic Switch

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final _controller = ValueNotifier<bool>(false);

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AdvancedSwitch(
      controller: _controller,
    );
  }
}

Using Callback Instead of Controller

AdvancedSwitch(
  initialValue: false,
  onChanged: (value) {
    print('Switch value: $value');
  },
)

Customized Switch

final _controller = ValueNotifier<bool>(false);

AdvancedSwitch(
  controller: _controller,
  activeColor: Colors.green,
  inactiveColor: Colors.red,
  activeChild: const Text('ON'),
  inactiveChild: const Text('OFF'),
  width: 70.0,
  height: 35.0,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
  ),
)

With Custom Thumb

final _controller = ValueNotifier<bool>(false);

AdvancedSwitch(
  controller: _controller,
  thumb: ValueListenableBuilder<bool>(
    valueListenable: _controller,
    builder: (_, value, __) {
      return Icon(
        value ? Icons.check : Icons.close,
        size: 16,
      );
    },
  ),
)

With Background Images

final _controller = ValueNotifier<bool>(false);

AdvancedSwitch(
  controller: _controller,
  activeImage: const AssetImage('assets/images/day.png'),
  inactiveImage: const AssetImage('assets/images/night.png'),
  activeChild: const Text('DAY'),
  inactiveChild: const Text('NIGHT'),
  width: 80,
)

With Icons

final _controller = ValueNotifier<bool>(false);

AdvancedSwitch(
  controller: _controller,
  activeChild: const Icon(Icons.wb_sunny, size: 16),
  inactiveChild: const Icon(Icons.nightlight_round, size: 16),
  activeColor: Colors.orange,
  inactiveColor: Colors.indigo,
  width: 60,
)

Listening to State Changes

class _MyWidgetState extends State<MyWidget> {
  final _controller = ValueNotifier<bool>(false);

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      setState(() {
        // React to state changes
        print('Switch is now: ${_controller.value}');
      });
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AdvancedSwitch(controller: _controller),
        Text('Switch is ${_controller.value ? "ON" : "OFF"}'),
      ],
    );
  }
}

Parameters

Demo