【Dart/Flutter開発】ユーザが自由で便利に色選択できる機能を追加した話【個人開発】

イントロ.簡単な紹介
やったこと
- 三つの補足
実際のソース

こんにちは、たちつてとです。

今回は、出費管理アプリの明細一覧画面、

各明細のカテゴリ色をユーザが

変えられるようにしたい、がテーマです。

イントロ.簡単な紹介

突然出てきた「出費管理アプリ」ですが、

自作(←超重要)アプリでして

Dart/Flutterなんか何も知らなかった僕が

1ヶ月くらいで作った、汗と血と男汁が染み込んだ

いかにもいかついアプリです。

以下の記事に、

3秒くらいで理解できるよう一枚の画像に

まとめてました。

プログラミングをすることの利点、身につく思考を考えてみた話

むしろまともに機能を一望したのが

↑記事くらいでした。

しゃあない。

やったこと

今回やりたいのは、以下です。下画像のように

出費の明細、の「カテゴリ」があるんですが

(「個人的には必要だった」←これです)

カテゴリによって、固定の色を表示していました。

当然、この色設定センスないわ。という声が

上がるのを見越しています。

ほんならてめえでなんとかせんかい！と

言い返せるように設定画面を作る必要があります。

f:id:tachitutetoNosuke:20211015214726p:plain

ちなみに色というのは、

0〜255のどれかの値を取る数字を3つ、

で表現できるので(RGBとかってやつ)、

最悪自作することを想像してました。

でも、画像の最右端のスマホ表示のように

いい感じの外部パッケージがありました。

これを実装することで解決。

f:id:tachitutetoNosuke:20211015215659p:plain

↑無事変更できましたとさ。

三つの補足

隠しボタンとは

背景とボタンの文字などの

色を同じ設定にしたボタンです。

秘密基地みたいでおもしろくないですか？

色選択機能自体はオーバースペック

一番ハイカラな部分(と言ってどこを指すか

伝わると思いますが)が外部パッケージなんですが

正直僕も機能全てを知りません。

とりあえず、

自由で感覚的に色選択できるからまいっか。

って感じです。

「ねむちん」、「ねるねるね」とは何か。

これ作ったときに眠かっただけです。

その気分が、アプリに反映されています。

以上、全て個人でアプリ作って

個人で使っているから許され

(ってか怒る人がいない)ます。

素晴らしい！

実際のソース

まず、パッケージをインストール。

flutter pub add flutter_colorpicker

というコマンドを該当プロジェクトで実行。

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

で、↑を該当ファイルに書く。

僕の場合、一回Android Studio落として再起動して

ようやっと正しく読み込まれました。

はい、ソースです。まず本体。

List<Color> _selectColor = [];
List<Color> _currentColor = [];

void _showPicker(BuildContext context, int index) {// indexは人によって不要かも
  showDialog(//ダイアログ表示
    context: context,
      builder: (context){
        return AlertDialog(
          title: const Text('ねむちん'),
          content: SingleChildScrollView(
            child: ColorPicker(
              pickerColor: _selectColor[index],// 初期設定
              onColorChanged: (Color color){// 色変更イベント(決定ではない)
                _selectColor[index] = color;
              },
              showLabel: true,
              pickerAreaHeightPercent: 0.8,
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: const Text('ねるねるね'),
              onPressed: () {// 色決定ボタン押下後の動作
                setState(() => _currentColor[index] = _selectColor[index]);
                Navigator.of(context).pop();// 色決定→とじる
              },
            ),
          ],
        );

      }
  );
}

最低限動作に関するところだけ、

コメントしました。

なお、僕は一覧の項目の一つ一つに

色選択要素を仕込む必要があったので

List<Color>の変数を使ってます。

一つでいいよ〜って方はListではなく

ただのColor型で大丈夫です。

ほいで、上の本体をこんな感じで、

ボタンのPressイベントに置いとけばOK。

ElevatedButton(
    child: (Text(
       style: new TextStyle(
            color: Colors.white,
      ),
    )),
     style: ElevatedButton.styleFrom(
        shadowColor: Colors.transparent,
             onPrimary: _currentColor[index],
　　　　　　　　　　// 何の色を選んだかわかるように ↑setStateでsetした色
                 primary: _currentColor[index]
    ),
     onPressed: () {
         _showPicker(context, index);// ←ここです
     }
)