Flutterでは基本的なUIコンポーネントをあらかじめ提供しています。それらを組み合わせるだけでUIが作れるのは便利ですが、色がFlutterっぽさを感じさせるものなのが辛いところです。独自のカラーリングにしようと思うと、一つ一つ調整が必要になります。 そこで使ってみたいのがPanacheです。Web上でFlutterのカラーリングを設定できます。

Panacheの使い方

まずベースになる色を決めます。

カラーリングはパレットを使って決められます。

デザイン画面です。プレビューを見ながら色を設定できます。

コンポーネントごとに細かく決められます。

最終的にコードでダウンロードできます。

Panacheはライト、ダーク双方のカラーリングを設定できます。後は状態に応じてカラーテーマを設定するだけでできあがります。プレビューもあるので、詳細までこだわりながら色設定ができるでしょう。

PanacheはDart製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

panache_web rxlabz/panache: ? Flutter Material Theme editor