I have the below widget that creates a CircularIconButton. I want to have a GestureDetector such that the whole space that this widget takes can be tapped and some action done. Here’s an image of what it looks like below:

But no matter what I do, it doesn’t seem to want to work and and I don’t even see the GestureDetector being shown in the widget tree.

Here’s the code that I have:

import 'package:flutter/material.dart';
import 'package:fti_team_member_app_v3/features/theme/theme_constants.dart';
import 'package:url_launcher/url_launcher.dart';

/// Creates a circular icon button with a text footer that links to a url.
class CircularIconButton extends StatelessWidget {
  /// The button title.
  final String title;

  /// The button icon.
  final IconData icon;

  /// The url to link to.
  final String url;

  /// The width of the button container.
  final double containerWidth;

  /// The height of the button container.
  static const double containerHeight = 160;

  /// The height of the button.
  static const double buttonHeight = 100;

  const CircularIconButton(
      {super.key,
      required this.title,
      required this.icon,
      required this.url,
      this.containerWidth = 125});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: containerWidth,
      height: containerHeight,
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () async {
          if (!await launchUrl(Uri.parse(url))) {
            throw Exception('Could not launch ${Uri.parse(url)}');
          }
        },
        child: Column(
          children: [
            SizedBox(
              height: buttonHeight,
              child: ElevatedButton(
                onPressed: null,
                style: primaryButtonStyle.copyWith(
                  shape: WidgetStateProperty.all<CircleBorder>(
                      const CircleBorder()),
                ),
                child: Icon(icon),
              ),
            ),
            // The title of the button.
            Align(
              child: Text(
                title,
                softWrap: true,
                overflow: TextOverflow.ellipsis,
                maxLines: 3,
                textAlign: TextAlign.center,
                style: meta.copyWith(color: ftiDarkGray),
              ),
            )
          ],
        ),
      ),
    );
  }
}

I’ve tried moving around where the GestureDetector is placed in hopes that it would fix it but nothing has worked thus far.