rxlabz/panache

🎨 Flutter Material Theme editor

panache's Issues

Is it getting support for Flutter 2?

Support for Elevated button, Text Button and all....

Import/Export to JSON

This is a great tool! What would really help is if we could export the design created to JSON and then create the ThemeData class dynamically from that JSON. The idea is similar to what was requested "Manage multiple themes". I want to be able to change themes dynamically and store the definitions of those themes locally or on a server.

The Dart code is great, but it assumes I am inserting the theme at compile time. I want to be able to insert new themes at runtime AND retrieve those themes from a server.

Is this project still maintained ?

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.

rgb slider is inaccurate

I'm trying to adjust the slider to reflect the following RGB values:

R: 92
G: 184
B: 92

Although the marker shows the correct value the values themselves do not seem to update correctly.

It also seems there is a step size of 2.

Dear rxlabz, how about Flutter have a GUI sketch file? Many thanks!!

Allow to type the color code instead

In most design tools we can obtain the code of the color. so it would be much easier just type it instead of using the graphical sliders.

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

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!

Import ThemeData object to update it

Add the ability to import ThemeData object in order update it

Doesnt work on dark theme

hi. it works pretty good in light theme but if i select dark , it generates the same black primary color.

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.

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.

Downloading themedata fails (local web)

Uncaught (in promise) Error: Assertion failed: org-dartlang-sdk:///dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/types.dart:94:10
_isJsObject(f) || !JS('bool', '# instanceof #.Function', f, global_)
"Dart function requires `allowInterop` to be passed to JavaScript."
    at Object.throw_ [as throw] (errors.dart:196)
    at Object.assertFailed (errors.dart:26)
    at Object.assertInterop (types.dart:94)
    at exportTheme (main.dart:59)
    at exportTheme.next (<anonymous>)
    at runBody (async_patch.dart:86)
    at Object._async [as async] (async_patch.dart:125)
    at web_theme_service.WebThemeService.new.exportTheme (main.dart:57)
    at web_theme_service.WebThemeService.new.exportTheme (web_theme_service.dart:55)
    at theme_model.ThemeModel.new.exportTheme (theme_model.dart:103)
    at editor_topbar_web.WebPanacheEditorTopbar.new.saveTheme (editor_topbar_web.dart:71)
    at _InkResponseState.new.[_handleTap] (ink_well.dart:705)
    at ink_well.dart:788
    at tap.TapGestureRecognizer.new.invokeCallback (recognizer.dart:182)
    at tap.TapGestureRecognizer.new.handleTapUp (tap.dart:486)
    at tap.TapGestureRecognizer.new.[_checkUp] (tap.dart:264)
    at tap.TapGestureRecognizer.new.handlePrimaryPointer (tap.dart:199)
    at tap.TapGestureRecognizer.new.handleEvent (recognizer.dart:470)
    at pointer_router.PointerRouter.new.[_dispatch] (pointer_router.dart:76)
    at pointer_router.dart:117
    at LinkedMap.new.forEach (linked_hash_map.dart:23)
    at pointer_router.PointerRouter.new.[_dispatchEventToRoutes] (pointer_router.dart:115)
    at pointer_router.PointerRouter.new.route (pointer_router.dart:101)
    at binding$5.WidgetsFlutterBinding.new.handleEvent (binding.dart:218)
    at binding$5.WidgetsFlutterBinding.new.dispatchEvent (binding.dart:198)
    at binding$5.WidgetsFlutterBinding.new.[_handlePointerEvent] (binding.dart:156)
    at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (binding.dart:102)
    at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (binding.dart:86)
    at _engine.PointerBinding.__.[_onPointerData] (pointer_binding.dart:129)
    at pointer_binding.dart:465
    at pointer_binding.dart:430
    at HTMLElement.<anonymous> (pointer_binding.dart:195)

Keeps crashing with Cannot read property 'dv' of null

I get this in my browser console after many different interactions

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. (main.dart.js:1969)

Tutorial on how to use this ?

I can't seem to know how to run this, i skipped the firebase stuff for now and im trying to run them on Flutter but i'm getting an error:
Error running Gradle:
ProcessException: Process "C:\Users\Hilal\Desktop\Tding Software\Theming\panache-master\android\gradlew.bat" exited abnormally:
Starting a Gradle Daemon (subsequent builds will be faster)

FAILURE: Build failed with an exception.

• Where:
  Build file 'C:\Users\Hilal\Desktop\Tding Software\Theming\panache-master\android\app\build.gradle' line: 53

• What went wrong:
  A problem occurred evaluating project ':app'.

path may not be null or empty string. path='null'

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 13s
Command: C:\Users\Hilal\Desktop\Tding Software\Theming\panache-master\android\gradlew.bat app:properties

THANK YOU!

Dude, this is an awesome gift to the Flutter community.

BTW, I up voted your announcement of the web version in Stack Overflow--the down vote was uncalled for!

Add support for flutter 3

Any updates on support for flutter 3?

Site becomes unresponsive after attempting to make selection of primary swatch

site is unusable in its current state

Wrong argument name for UnderlineInputBorder

The generated theme code has an argument side to UnderlineInputBorder.

The correct argument name is borderSide.

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!

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

Add LICENSE?

The license is currently not defined in the LICENSE file

its lagging

web app is lagging and not responding to any click !

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:

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

This is the error I get:

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

Setting font size/family for text theme

Missing the ability to set the font size and the family.

Did I look something over or are these actually a missing features? In which case this issue is a feature request :)

how to get this to work :) ?

Hi,

can someone tell me how to get this to work? The side freezes every time. I tried it on the newest version of Chrome for macOS and also for windows.
Do I have to run it locally?

Thank you in advance

cheers,
Kevin

update to current flutter/dart

any chance this could be updated to current flutter packages. along with flutterial_components.

Thanks!!

The web editor dosn't react any more

there is a lot of exceptions in the browser console

[enhancement] a folder people can showcase thier themes

I think a folder with different where we could contribute to new and exciting themes would be cool,both for new users and returning users.
[]guidelines on adding new themes naming and adding screenshots

text theme will change

Flutter announced to change the TextTheme to the 2018th version of the material design. docs
So it would be nice if the generated code will match the updated version of TextTheme

Adjusting the first in-app slider crashes the app

Adjusting the first slider crashes the app, the other sliders do not seem to show this behavior.

---

Some values show up as null() instead of null

Needed to edit a couple values in the theme.dart file because they were saved as null() instead of null.

null is not an object (evaluating 'J.dh(a).dv') after clicking on theme controls 7 or 8 times

Freezes in both Safari and Chrome on Mac after clicking on theme controls 7 or 8 times.

[Error] Failed to load resource: the server responded with a status of 404 () (main.dart.js.map, line 0)
[Error] TypeError: null is not an object (evaluating 'J.dh(a).dv')
cj (main.dart.js:2645)
ri (main.dart.js:19133)
$1 (main.dart.js:18040)
ai0 (main.dart.js:1961)
(anonymous function) (main.dart.js:1969)

[feature] manage multiple themes

Hi,

Thank you for your project, it is very great!
Is it possible to imagine a way to manage theme ?

Like uploading a json config file, editing it, exporting it ...

Because I've created a great theme with your tool, but, I want now to change some things, and see in direct changes on your webSite, it is impossible, I have to set all preferences one more time, and re-export it.

Cannot read property 'dv' of null

When I try to select a color, I get this error on chrome console:

Steps to reproduce this issue:

1. Open https://rxlabz.github.io/panache/#/ on chrome 78.0.3904.108, Windows 10
2. Click on color square (initially blue)
3. Drag and click around the RGB palette to select a color
4. The app freezes and an error starts to appear repeatly times on chrome console.

The error https://prnt.sc/q7d9wm

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)

upload a existing Theme

Hi,
I really like your Editor! Its so time saving if you create multiple projects!
Would be create if there would be a possibility to upload an already existing theme to change something.
Best Regards

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

Panache Desktop

When will panache be available in a desktop application

This repo is obsolete

Can someone please update this repo? The generated theme is obsolete, not compatible with IOS 14 etc. The app cant even start. Also the demo version is broken. After 1 click on any control everything freezes and i have to reopen the whole tab again

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)

Signin error : PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null)

Keeps producing this error for me. I've tried with several accounts.

I guess this function writes a file with the detail of the Theme to the authenticated's Google Drive, is that right?.

Is there a way to override this? Maybe write a file directly in the device?

Keeps breaking in web with below error

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. (main.dart.js:1969)
DevTools failed to load SourceMap: Could not load content for https://rxlabz.github.io/panache/main.dart.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Fails if primary color is white because it's not an Material color

Fails if primary color is white because the generated color Colors.white is not an Material color.

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

[Feature] edit color value

Hi, I'm currently encountering the use case where I have copied a hex color code and want to use it as the primary theme color.

It would be nice if both the hex color and the RGB numeric values in the color picker would be editable.

What I did now is to convert the hex code to RGB manually and then try to adjust the slider to match the color.