Zenn
🎨

【Flutter】リアルタイムでWidgetの色調整ができるPackageを作りました

2024/10/06に公開
Flutter
Dart
UI
tech

Package を作成した動機

直感的にWidgetの色調整がしたい!

Flutter には元々の機能としてHotReload という機能があり、変更後直ぐに実装機能を反映してくれるという素晴らしい機能があります。
しかし、色の微調整となると反映はされますが、もう少しアプリにあった色の選択(可能性は無限)はできないのか...等,デザイナーが定義を行うUIKit 等無い個人開発ではデザインの調整は難しいと感じていました。
Color Picker を使用して直感的且つ,リアルタイムでデザイン調整ができるツールを探しWidgetBook等の導入も検討しましたが、それらしい機能が見つからなかった為(もしかしたらあるかも)作成しました。

Color Preview 🎨

早速ですが、作成したPackage を紹介させて頂きます。
color_preview

gif

(.gifの為 Color Picker の部分が荒くなっていますがご了承ください。)

基本機能

  • Color Propery設定へドラッグで色を調整後,リアルタイムで確認できます。
  • デザイン調整に邪魔にならないように,各要素(ColorPicker,ColorText)をドラックアンドドロップで画面の好きな位置に移動できます。
  • 調整した色のColor Valueを ColorText 長押しでクリップボードへCopyを行えます。

その他の機能

  • オリエンテーション対応

    • 画面の向きを変更しても,各要素の大きさは画面サイズから計算して作成している為使用可能です。
      orientaion

  • Dark Mode対応

... 追加予定

使用方法

  • 色の調整を行いたいWidget をWrapするだけです。
import 'package:color_preview/color_preview.dart';
...
// 特定のWidget をWrapしてください。
ColorPreview(
  // 初期値の色を設定してください(デフォルトはColors.white)
  initialColor: Colors.red,
  onTargetWidget: (preview) {
    // preview にColorPicker で選択した色が返ってきます。
     return Container(
      height: 100,
      width: 100,
      decoration: BoxDecoration(
        // 変更したいプロパティに渡してください。
        color: preview,
      ),
    );
  },
),
  • Wrap後,Widget上の右上(buttonOffsetで位置の変更は可能です)にボタンが現れます。

button

  • タップすると ColorPicker とColorTextが表示されます。
  • ColorPicker で色の調整を行なってください。
  • 調整後,ColorText 長押しでクリップボードにColor がCopyされます。
    copy

※変更の可能性がありますので、最新情報はREADMEを参考して下さい。

UI系Package を作成した感想

  • ありそうで無かった機能を作成するのは面白かったです。
  • 構想~公開まで,3日程度で完成したのは如何にDartが書きやすい言語だと再認識しました。
    • ColorPicker の基本機能はflutter_colorpickerを使用しています。素晴らしいPackageです。
  • UI系のパッケージを作成するのは,レスポンシブデザイン/オリエンテーション/DarkMode/...etc を考慮の必要があった為、勉強になりました。

是非,使ってみて下さい！

  • 不具合などあった場合,issue/PR大歓迎です。

Discussion