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

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

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

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

Dart

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

Q&A

解決済

1回答

177閲覧

選択範囲をContainerウィジェットに合わせたい

KentarouHayashi

総合スコア23

Flutter

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

Dart

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

0グッド

0クリップ

投稿2024/03/09 01:37

実現したいこと

選択範囲をContainerウィジェットに合わせたい

発生している問題・分からないこと

Containerウィジェットにアイコン(または画像)とテキストウィジェットを配置するようなクラスがあります。このContainerをクリックした時に色を変えたいのですが、Containerではなくアイコン(または画像)とテキストウィジェットの部分のみが選択範囲となってしまうのでこれをContainerにしたいです。

該当のソースコード

Dart

1呼び出し元 2const Row( 3 children: [ 4 Expanded( 5 child: IconWithText( 6 icon: Icons.thumb_up_off_alt_outlined, 7 text: 'いいね!', 8 ), 9 ), 10 Expanded( 11 child: IconWithText( 12 text: 'コメント!', 13 img: true, 14 imgPath: 'images/comment.png', 15 ), 16 ), 17 Expanded( 18 child: IconWithText( 19 icon: Icons.share, 20 text: 'シェア', 21 ), 22 ), 23 ], 24 ),

Dart

1呼び出し先 2class IconWithText extends StatefulWidget { 3 final IconData? icon; 4 final String text; 5 final String imgPath; 6 final bool img; 7 8 const IconWithText({ 9 super.key, 10 this.icon, 11 required this.text, 12 this.img = false, 13 this.imgPath = '', 14 }); 15 16 17IconWithTextState createState() => IconWithTextState(); 18} 19 20class IconWithTextState extends State<IconWithText> { 21 bool isSelected = false; 22 23 24 Widget build(BuildContext context) { 25 return GestureDetector( 26 onTapDown: (details) { 27 setState(() { 28 isSelected = true; 29 }); 30 }, 31 onTapUp: (details) { 32 setState(() { 33 isSelected = false; 34 }); 35 }, 36 onTapCancel: () { 37 setState(() { 38 isSelected = false; 39 }); 40 }, 41 child: Container( 42 height: 40, 43 color: isSelected ? Colors.grey : null, 44 child: Row( 45 mainAxisAlignment: MainAxisAlignment.center, 46 children: [ 47 if (widget.icon == null) 48 Center( 49 child: Image.asset(widget.imgPath, width: 25, height: 25,) 50 ) 51 else 52 Center( 53 child: Icon(widget.icon, size: 20), 54 ), 55 const SizedBox(width: 5), 56 Center( 57 child: Text(widget.text, style: const TextStyle(fontSize: 12)), 58 ), 59 ], 60 ), 61 ), 62 ); 63 } 64}

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

Tableなどを使用して試したみたがダメでした。

補足

以下のようにContainerのエリアを選択範囲にしたい
イメージ説明

現状アイコンとテキストのみが選択範囲になっている。

色はContainer全体が変わっており期待通り。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

GestureDetectorではなくInkWellウィジェットを使用することでやりたいことができた!!!

投稿2024/03/09 22:20

KentarouHayashi

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問