NakedSwitch

import 'package:flutter/material.dart';
import 'package:naked_ui/naked_ui.dart';

class SettingsSwitch extends StatefulWidget {
  const SettingsSwitch({super.key});

  @override
  State<SettingsSwitch> createState() => _SettingsSwitchState();
}

class _SettingsSwitchState extends State<SettingsSwitch> {
  bool _notificationsEnabled = true;

  @override
  Widget build(BuildContext context) {
    return NakedToggle(
      value: _notificationsEnabled,
      asSwitch: true,
      semanticLabel: 'Email notifications',
      onChanged: (next) => setState(() => _notificationsEnabled = next),
      builder: (context, state, _) {
        final bool isToggled = state.isToggled;
        final bool isDisabled = state.isDisabled;

        final backgroundColor = state.when(
          disabled: Colors.grey.shade300,
          toggled: Colors.green.shade500,
          orElse: Colors.grey.shade400,
        );

        return AnimatedContainer(
          duration: const Duration(milliseconds: 180),
          width: 48,
          height: 28,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(14),
            color: backgroundColor,
          ),
          child: AnimatedAlign(
            duration: const Duration(milliseconds: 180),
            alignment: isToggled ? Alignment.centerRight : Alignment.centerLeft,
            child: Container(
              margin: const EdgeInsets.all(2),
              width: 24,
              height: 24,
              decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 3,
                    offset: const Offset(0, 1),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}