【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);// ←ここです
}
)

 

はい完成です。

いやあ...便利な世の中だ...

 

いろいろトラブルはあったものの、

登録処理(今回は割愛)とかも含め

なんだかんだ2,3時間で実装できたと思います。

 

また素晴らしいものを作ってしまった...

満足満足。

 

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

Flutter モバイルアプリ開発バイブル [ 南里勇気 ]
価格:3509円(税込、送料無料) (2021/9/20時点)

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

Javaのオブジェクト指向がゼッタイにわかる本[第2版] [ 立山秀利 ]
価格:2530円(税込、送料無料) (2021/9/26時点)

エンジニア発オンラインスクール【RUNTEQ】