Panache - 🎨 Flutter Material Theme editor

Last update: May 19, 2022

🎨 Panache

A Flutter Material Theme editor.

Panache helps you to create beautiful Material themes for your Flutter applications.

Customize widgets colors and shapes, and download your theme.dart file.

🌎 Try Panache in your browser

home

Getting Started

To apply a theme to whole application

  • add the generated theme file to your project/lib
  • set the theme property to the generated theme (myTheme) in your main file
// ...

MaterialApp( theme: myTheme , home: Home() );

// ...

Support this project

Buy Me A Coffee

🍿 Videos

Screenshots

screenshot

screenshot2

screenshot3

screenshot4

GitHub

https://github.com/rxlabz/panache
Comments
  • 1. Instance of 'minified:e' gives an error when I implement the Theme.dart into a project.

    I was trying to understand the implementation of Panache. Since it is a pretty new tool, I am not quite sure if I am doing the implementation right, but I created a new theme on Panache Web and I changed the Primary swatch just to test if it would work with my project but when I download the Theme.dart class and implement it to my Flutter project's lib folder, I get an error for a specific part of the code.

    This is the code piece from Theme.dart:

    code

    It gives an error for every Instance of 'minified:e'

    This is the error I get:

    error

    Did I do something wrong while I was implementing the code in my project? or is it something else?

    Reviewed by pelinyigit at 2019-09-05 10:48
  • 2. [Feature Request] This would be a great app to try hummingbird with

    This app looks like its a great app to actually use to build themes in Flutter, super helpful. I don't have an android so I am going to download / compile / and get it setup for iOS, but it sure would be a great project to test the Mac / PC app capabilities of flutter so you could have a companion app for when you are working on the mac / pc.

    Reviewed by zurie at 2019-03-13 14:14
  • 3. An example of how to configure Google Cloud would be helpful

    Thanks for creating this very very useful tool!

    I'm trying to find how to save the resulting ThemeData, but I keep getting

    flutter: Signin error : PlatformException(missing-config, GoogleService-Info.plist file not found, null)

    even though I have added the file to the project. An example of how to configure this would be helpful.

    Reviewed by JesperWe at 2019-02-19 10:10
  • 4. Local compiling for web failed with latest Flutter version

    Because the linked website is unusable because of errors i wanted to run the project locally and got this compiler error when I tried:

    flutter run -d chrome
    Launching lib\main.dart on Chrome in debug mode...
    Syncing files to device Chrome...
    
    Compiler message:
    ../panache_ui/lib/src/screens/editor/controls/color_picker/color_slider.dart:1101:9: Error: The superclass,
    'Diagnosticable', has no unnamed constructor that takes no arguments.
      const GradientSliderThemeData({
            ^^^^^^^^^^^^^^^^^^^^^^^
    Unhandled exception:
    NoSuchMethodError: The getter 'name' was called on null.
    Receiver: null
    Tried calling: name
    #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
    #1      ProgramCompiler._emitSuperConstructorCallIfNeeded (package:dev_compiler/src/kernel/compiler.dart:1465:14)
    #2      ProgramCompiler._emitConstructorBody (package:dev_compiler/src/kernel/compiler.dart:1419:19)
    #3      ProgramCompiler._emitConstructor.<anonymous closure>.<anonymous closure>
    (package:dev_compiler/src/kernel/compiler.dart:1375:19)
    #4      ProgramCompiler._superDisallowed (package:dev_compiler/src/kernel/compiler.dart:3125:24)
    #5      ProgramCompiler._emitConstructor.<anonymous closure> (package:dev_compiler/src/kernel/compiler.dart:1374:15)
    #6      ProgramCompiler._withLetScope (package:dev_compiler/src/kernel/compiler.dart:2116:25)
    #7      ProgramCompiler._withCurrentFunction (package:dev_compiler/src/kernel/compiler.dart:3115:18)
    #8      ProgramCompiler._emitConstructor (package:dev_compiler/src/kernel/compiler.dart:1372:16)
    #9      ProgramCompiler._defineConstructors (package:dev_compiler/src/kernel/compiler.dart:972:38)
    #10     ProgramCompiler._emitClassDeclaration (package:dev_compiler/src/kernel/compiler.dart:567:19)
    #11     ProgramCompiler._emitClass (package:dev_compiler/src/kernel/compiler.dart:510:21)
    #12     List.forEach (dart:core-patch/growable_array.dart:282:8)
    #13     ProgramCompiler._emitLibrary (package:dev_compiler/src/kernel/compiler.dart:459:23)
    #14     List.forEach (dart:core-patch/growable_array.dart:282:8)
    #15     ProgramCompiler.emitModule (package:dev_compiler/src/kernel/compiler.dart:345:15)
    #16     JavaScriptBundler.compile (package:frontend_server/src/javascript_bundle.dart:131:33)
    <asynchronous suspension>
    #17     FrontendCompiler.writeJavascriptBundle (package:frontend_server/frontend_server.dart:616:20)
    <asynchronous suspension>
    #18     FrontendCompiler.compile (package:frontend_server/frontend_server.dart:523:15)
    <asynchronous suspension>
    #19     _FlutterFrontendCompiler.compile (package:flutter_frontend_server/server.dart:40:22)
    #20     listenAndCompile.<anonymous closure> (package:frontend_server/frontend_server.dart:1154:26)
    #21     _RootZone.runUnaryGuarded (dart:async/zone.dart:1374:10)
    #22     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
    #23     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:266:7)
    #24     _SinkTransformerStreamSubscription._add (dart:async/stream_transformers.dart:70:11)
    #25     _EventSinkWrapper.add (dart:async/stream_transformers.dart:17:11)
    #26     _StringAdapterSink.add (dart:convert/string_conversion.dart:238:11)
    #27     _LineSplitterSink._addLines (dart:convert/line_splitter.dart:152:13)
    #28     _LineSplitterSink.addSlice (dart:convert/line_splitter.dart:127:5)
    #29     StringConversionSinkMixin.add (dart:convert/string_conversion.dart:165:5)
    #30     _SinkTransformerStreamSubscription._handleData (dart:async/stream_transformers.dart:122:24)
    #31     _RootZone.runUnaryGuarded (dart:async/zone.dart:1374:10)
    #32     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
    #33     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:266:7)
    #34     _SinkTransformerStreamSubscription._add (dart:async/stream_transformers.dart:70:11)
    #35     _EventSinkWrapper.add (dart:async/stream_transformers.dart:17:11)
    #36     _StringAdapterSink.add (dart:convert/string_conversion.dart:238:11)
    #37     _StringAdapterSink.addSlice (dart:convert/string_conversion.dart:243:7)
    #38     _Utf8ConversionSink.addSlice (dart:convert/string_conversion.dart:314:20)
    #39     _Utf8ConversionSink.add (dart:convert/string_conversion.dart:307:5)
    #40     _ConverterStreamEventSink.add (dart:convert/chunked_conversion.dart:74:18)
    #41     _SinkTransformerStreamSubscription._handleData (dart:async/stream_transformers.dart:122:24)
    #42     _RootZone.runUnaryGuarded (dart:async/zone.dart:1374:10)
    #43     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
    #44     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:266:7)
    #45     _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:779:19)
    #46     _StreamController._add (dart:async/stream_controller.dart:655:7)
    #47     _StreamController.add (dart:async/stream_controller.dart:597:5)
    #48     _Socket._onData (dart:io-patch/socket_patch.dart:1982:41)
    #49     _RootZone.runUnaryGuarded (dart:async/zone.dart:1374:10)
    #50     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
    #51     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:266:7)
    #52     _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:779:19)
    #53     _StreamController._add (dart:async/stream_controller.dart:655:7)
    #54     _StreamController.add (dart:async/stream_controller.dart:597:5)
    #55     new _RawSocket.<anonymous closure> (dart:io-patch/socket_patch.dart:1527:33)
    #56     _NativeSocket.issueReadEvent.issue (dart:io-patch/socket_patch.dart:1019:14)
    #57     _microtaskLoop (dart:async/schedule_microtask.dart:43:21)
    #58     _startMicrotaskLoop (dart:async/schedule_microtask.dart:52:5)
    #59     _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:118:13)
    #60     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:169:5)
    the Dart compiler exited unexpectedly.
    Syncing files to device Chrome...                               13.161ms (!)
    Failed to compile application.
    

    Flutter Doctor:

    [√] Flutter (Channel beta, v1.17.0, on Microsoft Windows [Version 10.0.17763.1098], locale de-DE)
        • Flutter version 1.17.0 at C:\src\flutter
        • Framework revision d3ed9ec945 (12 hours ago), 2020-04-06 14:07:34 -0700
        • Engine revision c9506cb8e9
        • Dart version 2.8.0 (build 2.8.0-dev.18.0 eea9717938)
    
    [√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
        • Android SDK at C:\Users\Torben\AppData\Local\Android\sdk
        • Platform android-28, build-tools 28.0.3
        • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
        • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
        • All Android licenses accepted.
    
    [√] Chrome - develop for the web
        • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
    
    [√] Android Studio (version 3.6)
        • Android Studio at C:\Program Files\Android\Android Studio
        • Flutter plugin version 45.0.1
        • Dart plugin version 192.7761
        • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
    
    [√] Connected device (3 available)
        • AOSP on IA Emulator • emulator-5554 • android-x86    • Android 9 (API 28) (emulator)
        • Chrome              • chrome        • web-javascript • Google Chrome 80.0.3987.163
        • Web Server          • web-server    • web-javascript • Flutter Tools
    
    • No issues found!
    
    Reviewed by torbenkeller at 2020-04-07 09:12
  • 5. Error: The getter 'JSON' isn't defined for the class '#lib1::ThemeService

    compiler message: file:///Users/Ryan/Applications/flutter/.pub-cache/git/flutterial_components-987e83ceb2328f5400991a50b7a476d48e5e3e5d/lib/src/theme_service.dart:34:22: Error: Getter not found: 'JSON'. compiler message: final themeMap = JSON.decode(jsonTheme); compiler message: ^^^^ compiler message: file:///Users/Ryan/Applications/flutter/.pub-cache/git/flutterial_components-987e83ceb2328f5400991a50b7a476d48e5e3e5d/lib/src/theme_service.dart:34:22: Error: The getter 'JSON' isn't defined for the class '#lib1::ThemeService'. compiler message: Try correcting the name to the name of an existing getter, or defining a getter or field named 'JSON'. compiler message: final themeMap = JSON.decode(jsonTheme);

    Reviewed by ryanhz at 2018-08-27 05:49
  • 6. inputDecorationTheme

    In the generated theme data, input errorStyle overrides ThemeData.errorColor

    final ThemeData myTheme = ThemeData(
    errorColor: Color(0xffd32f2f), 
    
    inputDecorationTheme: InputDecorationTheme(
        errorStyle: TextStyle(
          color: Color(0xdd000000), // overrides
          fontSize: 16.0,
          fontWeight: FontWeight.w400,
          fontStyle: FontStyle.normal,
     ),
    );
    
    Reviewed by januwA at 2019-07-15 13:43
  • 7. Uncaught TypeError: Cannot read property 'dv' of null

    does not work online, sales error when choosing colors

    204 main.dart.js:2645 Uncaught TypeError: Cannot read property 'dv' of null
        at Object.cj (main.dart.js:2645)
        at G1.ri (main.dart.js:19133)
        at Dx.$1 (main.dart.js:18040)
        at ai0 (main.dart.js:1961)
        at HTMLElement.<anonymous> (main.dart.js:1969)
    
    Reviewed by miguelflores1993 at 2021-05-12 02:39
  • 8. "Dart function requires `allowInterop` to be passed to JavaScript."

    "Dart function requires allowInterop to be passed to JavaScript." at panache_web at exportTheme (main.dart:59) at jsSaveTheme(code, filename, (success) => print('export $success'));

    solve jsSaveTheme(code, filename, allowInterop((success) => print('export $success')));

    Reviewed by zzqo at 2021-01-17 16:33
  • 9. Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments.

    Target dart2js failed: Exception: ../panache_ui/lib/src/screens/editor/controls/color_picker/color_slider.dart:1101:9:
    Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments.
      const GradientSliderThemeData({
            ^^^^^^^^^^^^^^^^^^^^^^^
    Error: Compilation failed.
    
    
    Reviewed by jianboy at 2020-11-28 11:46
  • 10. web app constantly freezes

    The web app constantly freezes on a number of different situations, namely actions that require frequent updates such as changing color values based on a slider.

    You can reproduce an example of this by attempting to make successive updates to the primary swatch color on the home page https://rxlabz.github.io/panache/#/ using the color slider. It will typically freeze the whole page after 3-4 changes to one of the slider values.

    Reviewed by ndcorc at 2020-11-19 17:22

Related

A Flutter material theme editor
A Flutter material theme editor

Flutter Theme ⚠️ WARNING: This app is still under development so please expect bugs and missing features in the app. ⚠️ Inspired by Panache, a Flutter

Jan 2, 2022
🎨 Flutter Material Theme editor
🎨 Flutter Material Theme editor

?? Panache A Flutter Material Theme editor. Panache helps you to create beautiful Material themes for your Flutter applications. Customize widgets col

May 19, 2022
Json editor - A json editor on flutter
Json editor - A json editor on flutter

Features Support add comment; Support show errors for invalid json text; Pretty

May 24, 2022
Flutter App Change Theme With Getx and Save Theme Stage with Hive
Flutter App Change Theme With Getx and Save Theme Stage with Hive

Flutter Change app Theme With GetX Flutter App Change Theme With Getx. Theme Stage saved using Hive. instead of hive you can use get-storage or shared

Feb 11, 2022
Easy Material White Theme

flutter_fast_ui_white Easy Material White Theme Getting Started in pubspec.yaml dependencies: flutter_fast_ui_white: git: url: https://git

Apr 11, 2022
Apr 25, 2022
A Very Flexible Widget that can Implement Material Sheets on all Directions, both modal and persistent, and consequently a Material Navigation Drawer

Flutter_MaterialSheetAndNavigationDrawer If this project helped you reduce developement time or you just want to help me continue making useful tools

Dec 4, 2021
Material io ext - A collection of extensions for creating widgets following material.io guidelines

material_io_ext It is a collection of extensions for creating widgets following

Jan 28, 2022
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)

✨ rich_editor WYSIWYG editor for Flutter with a rich set of supported formatting options. Based on https://github.com/dankito/RichTextEditor, but for

Mar 9, 2022
A lightweight HTML-Richtext editor for Flutter
A lightweight HTML-Richtext editor for Flutter

Flutter HTML Editor Flutter HTML Editor is a simple HTML-based Richtext editor, which is able to edit and parse a selected set of HTML tags into a Flu

Apr 7, 2022
A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.
A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.

Flutter Html Editor - Enhanced Flutter HTML Editor Enhanced is a text editor for Android, iOS, and Web to help write WYSIWYG HTML code with the Summer

May 21, 2022
A Flutter based code editor
A Flutter based code editor

rich_code_editor A simple package that supports creating code editors in Flutter. Flutter version supported: Flutter 1.22.5 Getting Started There are

May 11, 2022
Rich text editor for Flutter
Rich text editor for Flutter

A rich text editor for Flutter FlutterQuill is a rich text editor and a Quill component for Flutter. This library is a WYSIWYG editor built for the mo

May 23, 2022
An online Dart editor with support for console, web, and Flutter apps
An online Dart editor with support for console, web, and Flutter apps

DartPad DartPad is a free, open-source online editor to help developers learn about Dart and Flutter. You can access it at dartpad.dev. What is it? Wh

May 20, 2022
An Instagram like text editor Flutter widget that helps you to change your text style.
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Apr 30, 2022
FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design
FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design

video_editor My other APIs Scroll Navigation Video Viewer Helpers Features Super flexible UI Design. Support actions: Crop Trim Scale Rotate Cover sel

May 16, 2022
Umbra - visual editor for shaders in Flutter

Umbra Generated by the Very Good CLI ?? Umbra, visual editor for shaders in Flutter. Getting Started ?? This project contains 3 flavors: development s

May 26, 2022
Rich text editor for Flutter based on Delta format (Quill fork)

Visual Editor Visual Editor is a Rich Text editor for Flutter originally forked from Flutter Quill. The editor is built around the powerful Delta docu

May 24, 2022
Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, tutorials, etc...
Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, tutorials, etc...

MegaLinks Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, t

Dec 20, 2021