見出し画像

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(

(中略)

微妙なアレですけど、ネストが深くなりがちなんですよね…(個人の感想

この記事が気に入ったらサポートをしてみませんか?