【Flutter】ColorPicker選べる色全てに引数を付与してList化したい

Question

前提

Flutterでタスク管理アプリを作成しています。
タスクリストの項目別にテーマカラーを選択し、
Listのアイコン部分でその色を表示させたいです。

実現したいこと

・ColorPickerの色ひとつひとつに変数を持たせてリスト化したい。
・ColorPickerでユーザーが選択した色を、項目別にリストのアイコンとして表示したい。

発生している問題・エラーメッセージ

エラーメッセージ

エラーメッセージは特にありませんが、リロードしてもエミュレーターが動きませんでした。

該当のソースコード

Card(
            child: ListTile(
                leading: Text(
                  "${DateTime.now().month}/${DateTime.now().day}",
                  style: TextStyle(color: Colors.blue),//←この部分でColorPickerで選択された色を指定したい。
                ),
                title: Text('Study'),
                trailing: Builder(builder: (context){
                  return IconButton(
                    onPressed: (){
                      showModalBottomSheet(
                          backgroundColor: Colors.transparent,
                          isScrollControlled: true,
                          context: context,
                          builder: (BuildContext context){
                            return new Container(
                              height: 500,
                              margin: EdgeInsets.only(top: 64),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(20),
                                    topRight: Radius.circular(20)
                                ),
                              ),
                              child: new Column(
                                children:<Widget>[
                                  new Text('TOEIC 英単語暗記'),
                                  new Text('日商簿記 模試1回分'),
                                ],
                              ),
                              alignment: Alignment.center,
                            );
                          });
                    },
                    icon: Icon(Icons.access_time_filled_rounded),
                  );
                },)
            ),
          ),

試したこと

上記のプログラムのように、IconではなくTextStyleで色の指定を試みました。
(Iconだとカラーの指定が出来ず、エラーとなってしまいました。)

本来、leadingの部分にはColorPickerで指定した色のIconを表示したかったのですが、
ColorPickerの色それぞれに変数を持たせる方法がわからず、悩んでいます。

ColorPickerで選べる全ての色に変数を持たせてリスト化し、leadingのIconに反映させる方法はありますでしょうか。

拙い文章で申し訳ありません。
何か解決策がありましたら、ご回答をよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Android Studio Dolphin | 2021.3.1

Comments

[moriman]

「変数を持たせて」というのがいまいちよくわからないのですが、そちらで使用されているウィジェットの仕組みに関係することでしょうか。

Flutter公式が提供しているウィジェットでColorPickerという名前のウィジェットは無いようなのですが(見つけられない)、パッケージですか?
カラーピッカーのパッケージは色々あるようなのでパッケージなら使っているパッケージ名を教えてください。

Answer 1

とりあえず助けになる箇所があれば参考にされてください。
一応Iconにcolorフィールドがあるので色の指定はできますね。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

const List<Color> selectableColors = [
  Colors.blue,
  Colors.red,
  Colors.green,
];

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Color> myColors = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [

          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: selectableColors.map((color) {
              return OutlinedButton(
                child: CircleAvatar(
                  backgroundColor: color,
                ),
                onPressed: () {
                  setState(() {
                    myColors.add(color);
                  });
                },
              );
            }).toList(),
          ),
          Expanded(
            child: ListView(
              children: myColors.map((color) {
                return ListTile(
                  leading:

                      // Icon(Icons.access_alarms_sharp,
                      //   color:color
                      // ),

                      CircleAvatar(
                    backgroundColor: color,
                    child: Icon(
                      Icons.access_alarms_sharp,
                      color: Colors.white,
                    ),
                  ),
                  title: Text('${color.toString()}'),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}