ThemeModeSelector Widget

I am currently working with the concept of Theme’s in Flutter and I wanted to build a widget that would allow me to switch between light and dark themes. Seeking a design for a simple toggle, I was lucky enough to stumble into some of Zhenya Karapetyan’s amazing work on Dribbble. Zhenya’s simple yet fun design of a toggle component would look very nice in Flutter, and it has some really cool animations which I wanted to learn.

https://dribbble.com/shots/7635203-Light-Dark-mode-toggle-switcher/attachments/396864?mode=media

thememode_selector

A widget to toggle between a light or dark ThemeMode

Features

Configurable colors for background and foreground colors for both light and dark modes
API similar to standard Material Slider widget

Supported Platforms

Flutter Android
Flutter iOS
Flutter Web
Flutter Desktop

Installation

Add thememode_selector: ^0.1.0 to your pubspec.yaml configuration.

import 'package:thememode_selector/thememode_selector.dart'

How to use

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: Center(
      child: ThemeModeSelector(
        height: 39,
        onChanged: (mode) {
          print('ThemeMode changed to $mode');
          ThemeModeManager.of(context)!.themeMode = mode;
        },
      ),
    ),
  );
}