Dark/Light Mode Toggle Switch Widget

 [image.png][image.png]
Dependency: flutter_switch: ^0.3.2
import 'package:flutter_switch/flutter_switch.dart';

class DarkModeSwitch extends StatefulWidget {
  const DarkModeSwitch({
    Key key,
    this.width,
    this.height,
  }) : super(key: key);

  final double width;
  final double height;

  @override
  _DarkModeSwitchState createState() => _DarkModeSwitchState();
}

class _DarkModeSwitchState extends State {
  @override

  Widget build(BuildContext context) {
    return FlutterSwitch(
      width: 100.0,
      height: 55.0,
      toggleSize: 45.0,
      value: Theme.of(context).brightness == Brightness.dark ? true : false,
      borderRadius: 30.0,
      padding: 2.0,
      activeToggleColor: const Color(0xFF6E40C9),
      inactiveToggleColor: const Color(0xFF2F363D),
      activeSwitchBorder: Border.all(
        color: const Color(0xFF3C1E70),
        width: 6.0,
      ),
      inactiveSwitchBorder: Border.all(
        color: const Color(0xFFD1D5DA),
        width: 6.0,
      ),
      activeColor: const Color(0xFF271052),
      inactiveColor: Colors.white,
      activeIcon: const Icon(
        Icons.nightlight_round,
        color: Color(0xFFF8E3A1),
      ),
      inactiveIcon: const Icon(
        Icons.wb_sunny,
        color: Color(0xFFFFDF5D),
      ),
      onToggle: (val) {
        val = Theme.of(context).brightness == Brightness.dark ? true: false;
        setState(() {
          if (val) {
            setDarkModeSetting(context, ThemeMode.light);
          } else {
          setDarkModeSetting(context, ThemeMode.dark);}
        });
      },
    );
  }
}  
1
4 replies