質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

受付中

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

-Fujii-
-Fujii-

総合スコア1

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

1回答

0グッド

1クリップ

254閲覧

投稿2022/11/29 13:41

前提

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

実現したいこと

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

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

エラーメッセージ

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

該当のソースコード

Dart

1Card( 2 child: ListTile( 3 leading: Text( 4 "${DateTime.now().month}/${DateTime.now().day}", 5 style: TextStyle(color: Colors.blue),//←この部分でColorPickerで選択された色を指定したい。 6 ), 7 title: Text('Study'), 8 trailing: Builder(builder: (context){ 9 return IconButton( 10 onPressed: (){ 11 showModalBottomSheet( 12 backgroundColor: Colors.transparent, 13 isScrollControlled: true, 14 context: context, 15 builder: (BuildContext context){ 16 return new Container( 17 height: 500, 18 margin: EdgeInsets.only(top: 64), 19 decoration: BoxDecoration( 20 color: Colors.white, 21 borderRadius: BorderRadius.only( 22 topLeft: Radius.circular(20), 23 topRight: Radius.circular(20) 24 ), 25 ), 26 child: new Column( 27 children:<Widget>[ 28 new Text('TOEIC 英単語暗記'), 29 new Text('日商簿記 模試1回分'), 30 ], 31 ), 32 alignment: Alignment.center, 33 ); 34 }); 35 }, 36 icon: Icon(Icons.access_time_filled_rounded), 37 ); 38 },) 39 ), 40 ),

試したこと

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

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

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

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

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

Android Studio Dolphin | 2021.3.1

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

moriman

2022/11/29 23:40

「変数を持たせて」というのがいまいちよくわからないのですが、そちらで使用されているウィジェットの仕組みに関係することでしょうか。 Flutter公式が提供しているウィジェットでColorPickerという名前のウィジェットは無いようなのですが(見つけられない)、パッケージですか? カラーピッカーのパッケージは色々あるようなのでパッケージなら使っているパッケージ名を教えてください。

回答1

0

とりあえず助けになる箇所があれば参考にされてください。
一応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(), ), ), ], ), ); } }

投稿2022/11/29 23:48

moriman

総合スコア527

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。