A Flutter plugin for persisting and dynamically changing the theme.

Overview

Flutter Community: persist_theme

Buy Me A Coffee Donate github pages

persist_theme

A Flutter plugin for persisting and dynamically changing the theme.

Online Demo: https://fluttercommunity.github.io/persist_theme/

import 'package:flutter/material.dart';

import 'package:persist_theme/persist_theme.dart';
import 'package:provider/provider.dart';
import 'package:scoped_model/scoped_model.dart';

import 'dart:io' show Platform;
import 'package:flutter/foundation.dart';

/// main is entry point of Flutter application
void main() {
  // Desktop platforms aren't a valid platform.
  _setTargetPlatformForDesktop();

  return runApp(MyApp());
}

/// If the current platform is desktop, override the default platform to
/// a supported platform (iOS for macOS, Android for Linux and Windows).
/// Otherwise, do nothing.
void _setTargetPlatformForDesktop() {
  TargetPlatform targetPlatform;
  if (Platform.isMacOS) {
    targetPlatform = TargetPlatform.iOS;
  } else if (Platform.isLinux || Platform.isWindows) {
    targetPlatform = TargetPlatform.android;
  }
  if (targetPlatform != null) {
    debugDefaultTargetPlatformOverride = targetPlatform;
  }
}

final _model = ThemeModel();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListenableProvider<ThemeModel>(
      create: (_) => _model..init(),
      child: Consumer<ThemeModel>(
        builder: (context, model, child) {
          return MaterialApp(
            theme: model.theme,
            home: HomeScreen(),
          );
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _theme = Provider.of<ThemeModel>(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Persist Theme'),
      ),
      body: ListView(
        children: MediaQuery.of(context).size.width >= 480
            ? <Widget>[
                Flex(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Flexible(child: DarkModeSwitch()),
                    Flexible(child: TrueBlackSwitch()),
                  ],
                ),
                CustomThemeSwitch(),
                Flex(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Flexible(child: PrimaryColorPicker()),
                    Flexible(child: AccentColorPicker()),
                  ],
                ),
                DarkAccentColorPicker(),
              ]
            : <Widget>[
                DarkModeSwitch(),
                TrueBlackSwitch(),
                CustomThemeSwitch(),
                PrimaryColorPicker(),
                AccentColorPicker(),
                DarkAccentColorPicker(),
              ],
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: _theme.accentColor,
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

Customization

  • There are widgets provided but can be fully customized.
  • By default hide elements based on the theme.
  • The only requirement is that the material app is wrapped in a scoped model like shown above.

Screenshots

Comments
  • Dart 2.8 does not persist work with pop

    Dart 2.8 does not persist work with pop

    In the newest update of Flutter 1.17 / Dart 2.8 it looks there's an issue with persist_theme. When the user changes to dark mode or off dark mode, the theme is not persisted when pop() is called.

    For example:

    MainScreen() => push to Settings() (change theme)

    When you pop back to MainScreen it will show the original theme. Any ideas? It was working fine before the Flutter 1.17 update.

    I've attached a quick gif.

    video

    bug 
    opened by jacksonw765 10
  • Update README.md

    Update README.md

    New version of flutter requies different formating of ListenableProvider:

    Citation from listenable_provider.dart:

    The default constructor of ListenableProvider/ChangeNotifierProvider must create a new, unused Listenable.

    If you want to reuse an existing Listenable, use the second constructor:

    • DO use ChangeNotifierProvider.value to provider an existing ChangeNotifier:

    MyChangeNotifier variable; ChangeNotifierProvider.value( value: variable, child: ... )

    • DON'T reuse an existing ChangeNotifier using the default constructor.

    MyChangeNotifier variable; ChangeNotifierProvider( create: (_) => variable, child: ... )

    opened by magicsk 1
  • [example] fix FAB background color

    [example] fix FAB background color

    As far as I can thell, ThemeModel.accentColor should only be used in the ThemeModel.theme getter for the custom theme. Using it directly leads to bugs. ThemeModel.accentColor should probably be private.

    opened by miDeb 1
  • All prefs are cleared on reset

    All prefs are cleared on reset

    Please remove _prefs.clear in reset method to avoid clearing all data for Shared Preferences if used in App elsewhere. Better clear only used values. A prefix for the names would also be nice to avoid name clashes

    opened by renierr 0
  • Refactor example & update readme

    Refactor example & update readme

    Changes I made: Example:

    • removed _setTargetPlatformForDesktop, as it is no longer required.
    • use Theme.of(context) instead of Provider.of<ThemeModel>(context), because that returns the actual ThemeData object, is probably already familiar to users, and does not require knowledge (and an import) of provider.

    Readme:

    • Updated the example in the readme with the actual example, because that's where users will probably copy-paste from.
    • Removed a reference to scoped_model, and added a short info about provider.
    • Fixed the screenshots.

    Sorry for not splitting this into smaller pieces :)

    opened by miDeb 0
  • Use the ChangeNotifierProvider.value constructor

    Use the ChangeNotifierProvider.value constructor

    According to the provider documentation:

    If you already have an object instance and want to expose it, you should use the .value constructor of a provider.

    Failing to do so may call the dispose method of your object when it is still in use.

    DO use ChangeNotifierProvider.value to provide an existing ChangeNotifier.

    MyChangeNotifier variable;
    
    ChangeNotifierProvider.value(
      value: variable,
      child: ...
    )
    

    DON'T reuse an existing ChangeNotifier using the default constructor

    MyChangeNotifier variable;
    
    ChangeNotifierProvider(
      create: (_) => variable,
      child: ...
    )
    
    opened by miDeb 0
  • use `shrinkWrap: true` for `MaterialColorPicker`

    use `shrinkWrap: true` for `MaterialColorPicker`

    This is actually a regression from the flutter_material_color_picker package v1.0.4 (https://github.com/Pyozer/flutter_material_color_picker/commit/e6e638b7cef89d6c2fe62adaa49028cc5d898a14). To be able to display the color picker in a dialog inside a SingleChildScrollView, shrinkWrap must be true.

    opened by miDeb 1
  • Use SwitchListTiles instead of ListTiles with a trailing Switch

    Use SwitchListTiles instead of ListTiles with a trailing Switch

    With the use of SwitchListTile the entire ListTile is interactive, and tapping anywhere on the Tile will trigger the switch. Note that I've renamed the leading parameter to secondary to be consistent with SwitchListTile, making this a breaking change. Maybe we should just keep leading? secondary is always placed in the ListTile.leading spot anyways, so it would probably not confuse users.

    opened by miDeb 1
Owner
Flutter Community
A central place for all community made Flutter packages. To get started, see the README of the 'community' repository.
Flutter Community
A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter

flutter_floatwing A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter. Android only Features Pure Flu

Zoe 116 Dec 21, 2022
A flutter plugin which provides Crop Widget for cropping images.

A flutter plugin which provides Crop Widget for cropping images.

Chooyan 97 Jan 5, 2023
A Flutter plugin to use Chrome Custom Tabs.

Flutter Custom Tabs Plugin With the Flutter Custom Tabs Plugin, you can use Custom Tabs as easily as url_launcher. This plugin is built as federated p

Shinya Kumagai 118 Nov 18, 2022
A Flutter plugin that provides a WebView widget

WebView for Flutter A Flutter plugin that provides a WebView widget. On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget

Fitem 2 Jul 29, 2022
Flutter picker plugin

flutter_picker Flutter plugin picker. Include NumberPicker, DateTimePicker, ArrayPicker, and default linkage Picker. Provide flexible parameters to me

null 614 Dec 23, 2022
Flutter reaction button plugin it is fully customizable widget such as Facebook reaction button

Flutter Reaction Button Flutter button reaction it is fully customizable widget such as Facebook reaction button. Preview Demo Usage Include 'flutter_

Abdelouahed Medjoudja 174 Dec 19, 2022
A Flutter plugin which makes it straightforward to show the native equivalent of a CupertinoAlertDialog or CupertinoActionSheet dialog

A Flutter plugin which makes it straightforward to show the native equivalent of a CupertinoAlertDialog or CupertinoActionSheet dialog

Christoph Krassnigg 9 Dec 9, 2022
Plugin to the JSON Dynamic Widget to provide named support for Ionicons

json_dynamic_widget_plugin_ionicons Table of Contents Live Example Introduction Using the Plugin Live Example Web Introduction Plugin to the JSON Dyna

null 0 May 14, 2022
Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier.

custom_radio_grouped_button Custom Radio Buttons and Grouped Check Box Button Custom Flutter widgets that makes Checkbox and Radio Buttons much cleane

Ketan Choyal 144 Sep 23, 2022
Custom widgets and utils using Flutter framework widgets and Dart language

reuse_widgets_and_utils The custom widgets and utils using Flutter framework widgets and Dart programming language. Getting Started This project is a

null 1 Oct 29, 2021
The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid.

Spannable Grid The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid. Feature

Evgeny Cherkasov 17 Nov 7, 2022
Pure Dart and Flutter package for Android,IOS and Web

Fancy Flutter Alert Dialog Pure Dart and Flutter package for Android,IOS and Web A flutter Package to show custom alert Dialog,you can choose between

Dokkar Rachid Reda 119 Sep 23, 2022
PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web. Of course, it works well on Android and IOS.

PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web.

Manki Kim 453 Jan 4, 2023
Customizable Material and Cupertino buttons with progress indicators and more

future_button Customizable Material and Cupertino buttons with progress indicators and more.

Erzhan 33 Oct 13, 2022
A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

Sliding Sheet A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents. Click here to view the full example. Ins

null 396 Mar 10, 2022
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Remi Rousselet 2.6k Dec 29, 2022
Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Stanislav Ilin 43 Dec 7, 2022
A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier.

Draggable Home A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier! Based on the Scaffold and Sliver. Us

Devs On Flutter 106 Dec 12, 2022
Flutter widgets and themes implementing the current macOS design language.

macos_ui Flutter widgets and themes implementing the current macOS design language. NOTE: This package depends on the excellent native_context_menu pl

Reuben Turner 1.1k Jan 7, 2023