Panache - 🎨 Flutter Material Theme editor

Overview

🎨 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

Comments
  • Instance of 'minified:e' gives an error when I implement the Theme.dart into a project.

    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?

    opened by pelinyigit 4
  • [Feature Request] This would be a great app to try hummingbird with

    [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.

    opened by zurie 2
  • An example of how to configure Google Cloud would be helpful

    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.

    opened by JesperWe 2
  • Local compiling for web failed with latest Flutter version

    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!
    
    opened by torbenkeller 1
  • Error: The getter 'JSON' isn't defined for the class '#lib1::ThemeService

    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);

    opened by ryanhz 1
  • inputDecorationTheme

    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,
     ),
    );
    
    opened by januwA 0
  • Adding support for Material You 🎨

    Adding support for Material You 🎨

    With Flutter 3.0, Google has announced support for Material You! Few atomic foundations like color systems, typography, shadows, etc are already available on Material You. Would it be possible to add the support for it?

    Thanks!

    opened by mohitSharma74 0
  • Uncaught TypeError: Cannot read property 'dv' of null

    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)
    
    opened by miguelflores1993 4
  • "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')));

    opened by zzqo 0
  • Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments.

    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.
    
    
    opened by jianboy 2
Releases(v1.0-alpha.1)
Owner
Erick Ghaumez
UIngineer
Erick Ghaumez
🎨 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

Erick Ghaumez 1.6k Sep 30, 2022
Flutter-Theme-Changer - Change theme of your app from light to dark theme and vice versa

Flutter Theme Changer - Hard Coded This is a flutter theme changer without using

Shametha K G 3 Aug 23, 2022
Json editor - A json editor on flutter

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

Chan Young 10 Sep 20, 2022
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

Azraf Al Monzim 11 Aug 12, 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

Fastriver 3 Apr 11, 2022
Deepak Sharma 145 Sep 26, 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

Bryan Cancel 30 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

BetterX.io 3 Jan 28, 2022
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

Festus Olusegun 111 Sep 21, 2022
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

Herry 13 Apr 7, 2022
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

Tanay Neotia 179 Sep 29, 2022
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

Sovit 107 Sep 28, 2022
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

X Code 1.5k Sep 22, 2022
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

Dart 1.3k Sep 21, 2022
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

Mehdi Zarepour 64 Sep 26, 2022
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

Luis Felipe Murguia Ramos 186 Sep 30, 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

Jochum van der Ploeg 154 Sep 25, 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

Visual Space 147 Sep 19, 2022
MathCanvas - Graphical Math Equation Editor made by Flutter

Graphical Math Equation Editor made by Flutter. My goal is to provide a keyboard typing experience like a calculator. Test Web Page: https:

GongBJ 3 Jun 3, 2022