Cardウィジェットをタップしたい
私の場合、ListViewやGridViewで要素にCardウィジェットを配置して、Card自体をタップしたいことがよくあります。そんな場合は、どうすればいいのか…
GestureDetectorを使えば、それは可能なんですが、
(中略)
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
// ここにタップの処理
},
child: Card(
child: Container(
(中略)
ネストが深くなりがちなんですよね…(個人の感想
なので、作ってしまいましょう。タップ出来るCardウィジェットをw
import 'package:flutter/material.dart';
class TappableCard extends StatelessWidget {
final Color? color;
final Color? shadowColor;
final Color? surfaceTintColor;
final double? elevation;
final ShapeBorder? shape;
final bool borderOnForeground;
final EdgeInsetsGeometry? margin;
final Clip? clipBehavior;
final Widget? child;
final bool semanticContainer;
final void Function()? onTap;
const TappableCard({
Key? key,
this.color,
this.shadowColor,
this.surfaceTintColor,
this.elevation,
this.shape,
this.borderOnForeground = true,
this.margin,
this.clipBehavior,
this.child,
this.semanticContainer = true,
this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Card(
color: color,
shadowColor: shadowColor,
surfaceTintColor: surfaceTintColor,
elevation: elevation,
shape: shape,
borderOnForeground: borderOnForeground,
margin: margin,
clipBehavior: clipBehavior,
semanticContainer: semanticContainer,
child: child,
),
);
}
}
これでCardウイジェット互換でonTapが追加されたTappableCardウィジェットの完成ですw
なので、最初の部分はこんな感じになるのかな?
(中略)
@override
Widget build(BuildContext context) {
return TappableCard(
onTap: () {
// ここにタップの処理
},
child: Container(
(中略)
微妙なアレですけど、ネストが深くなりがちなんですよね…(個人の感想