https://github.com/ankit-slnk/flutter-dark-theme-demo

Flutter Dark Theme Demo
https://github.com/ankit-slnk/flutter-dark-theme-demo

android dark-theme dart demo flutter ios java swift web

Last synced: 3 months ago
JSON representation

Flutter Dark Theme Demo

• Host: GitHub
• URL: https://github.com/ankit-slnk/flutter-dark-theme-demo
• Owner: Ankit-Slnk
• Created: 2020-09-04T00:44:02.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-02-23T17:21:33.000Z (over 4 years ago)
• Last Synced: 2025-04-01T21:50:40.365Z (about 1 year ago)
• Topics: android, dark-theme, dart, demo, flutter, ios, java, swift, web
• Language: JavaScript
• Homepage: https://ankitsolanki.dev
• Size: 2.4 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Flutter Dark Theme Demo

![Flutter Dark Theme Demo](flutter-dark-theme.png)

This demo will show us how to implement dark theme in flutter projects.

![Flutter Dark Theme Demo](flutter_dark_theme.gif)

## Setup

Use latest versions of below mentioned plugins in `pubspec.yaml`.

| Plugin | Pub | Explanation |

|--------|-----|-------------|

| [shared_preferences](https://github.com/flutter/plugins) | [![pub package](https://img.shields.io/pub/v/shared_preferences.svg)](https://pub.dev/packages/shared_preferences) | Used to store data locally in key-value pairs.

| [provider](https://github.com/PonnamKarthik/provider) | [![pub package](https://img.shields.io/pub/v/provider.svg)](https://pub.dev/packages/provider) | A wrapper around InheritedWidget to make them easier to use and more reusable.

And then

    flutter pub get

    

### DarkThemePreference

This will save current selected theme locally.

    class DarkThemePreference {

        static const THEME_STATUS = "THEMESTATUS";

        setDarkTheme(bool value) async {

            SharedPreferences prefs = await SharedPreferences.getInstance();

            prefs.setBool(THEME_STATUS, value);

        }

        Future getTheme() async {

            SharedPreferences prefs = await SharedPreferences.getInstance();

            return prefs.getBool(THEME_STATUS) ?? false;

        }

    }

### DarkThemeProvider

This changenotifier will help us to check whether current theme is dark or not.

    class DarkThemeProvider with ChangeNotifier {

        DarkThemePreference darkThemePreference = DarkThemePreference();

        bool _darkTheme = false;

        bool get darkTheme => _darkTheme;

        set darkTheme(bool value) {

            _darkTheme = value;

            darkThemePreference.setDarkTheme(value);

            notifyListeners();

        }

    }

### DarkThemeStyle

We need to define what colors to use when having dark and light theme.

### Check Dark Theme

    Provider.of(context).darkTheme

Finally

    flutter run

Checkout [this demo](https://flutter-web-dark-theme.netlify.app/#/) in [Flutter Web](https://flutter.dev/docs/get-started/web).