実現したいこと
選択範囲を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全体が変わっており期待通り。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。