Changing a container color when container is tapped using gesturedetector in flutter

Question

Hello i have been stock here trying to figure out what am doing wrong, the male and female reuseable cards are surpose to change color when tapped but after placing the GestureDetector inside my card Class it stopped working. The color refuse to change when tapped, take a look at the code below.

import 'package:bmi_calculator/card_icon.dart';
import 'package:bmi_calculator/cards.dart';
import 'package:flutter/material.dart';

Color activeCardColor = const Color(0XFF1D1E33);
Color inactiveCardColor = const Color(0XFF111328);
Color buttomContainerColor = const Color(0xffeb1555);
const double buttomContainerHeight = 70.0;

enum Gender {
  male,
  female,
}

class InputPage extends StatefulWidget {
  const InputPage({Key? key}) : super(key: key);

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

class _InputPageState extends State<InputPage> {
  Gender? selectedGender;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('BMI CALCULATOR'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReuseableCard(
                      ontapped: () {
                        setState(() {
                          selectedGender = Gender.male;
                        });
                      },
                      colour: selectedGender == Gender.male
                          ? activeCardColor
                          : inactiveCardColor,
                      cardChild: const CardIcon(Icons.male, 'Male'),
                    ),
                  ),
                  Expanded(
                    child: ReuseableCard(
                      ontapped: () {
                        setState(() {
                          selectedGender = Gender.female;
                        });
                      },
                      colour: selectedGender == Gender.female
                          ? activeCardColor
                          : inactiveCardColor,
                      cardChild: const CardIcon(Icons.male, 'Female'),
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              child: ReuseableCard(
                colour: activeCardColor,
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReuseableCard(
                      colour: activeCardColor,
                    ),
                  ),
                  Expanded(
                    child: ReuseableCard(
                      colour: activeCardColor,
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 10.0),
              color: buttomContainerColor,
              height: buttomContainerHeight,
              width: double.infinity,
            )
          ],
        ));
  }
}

And here is my Card Class

import 'package:flutter/material.dart';

class ReuseableCard extends StatelessWidget {
  final Color? colour;
  final Widget? cardChild;
  final void Function()? ontapped;

  const ReuseableCard({this.colour, this.cardChild, this.ontapped});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        ontapped;
        print('Button Pressed');
      },
      child: Container(
        child: cardChild,
        margin: const EdgeInsets.all(10),
        width: double.infinity,
        decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

Answer 1

The problem is in passing the ontapped function. When you simply place ontapped without Parenthesis () the function will not be called so you need to change that in following ways. When using Lambda function you have options to pass function

For multiple functions

onTap: () {
    ontapped(); // here
  },

For single function

onTap: ontapped, // here

Answer 2

add brackets to the function call

onTap: () {
    ontapped(); // here
    print('Button Pressed');
  },