Image.networkのボタンで押下時にグレーのもの

Image.networkのボタンで押下時にグレーのもの

import 'package:flutter/material.dart';

class GrayScaleButton extends StatefulWidget {
  const GrayScaleButton({
    Key? key,
    required this.imageUrl,
    required this.onPressed,
  }) : super(key: key);
  final String imageUrl;
  final VoidCallback onPressed;

  @override
  GrayScaleButtonState createState() => GrayScaleButtonState();
}

class GrayScaleButtonState extends State<GrayScaleButton> {
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _isPressed = true),
      onTapCancel: () => setState(() => _isPressed = false),
      onTapUp: (_) {
        setState(() => _isPressed = false);
        widget.onPressed?.call();
      },
      child: _isPressed
          ? ColorFiltered(
              // iPhoneのタップした画像みたいな色
              colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.5),
                BlendMode.srcATop,
              ),
              child: Image.network(widget.imageUrl),
            )
          : Image.network(widget.imageUrl),
    );
  }
}

みたいなのを作って、

GrayScaleButton(
  imageUrl: [画像のURL],
  onPressed: () {
    print('押下された');
  },
),