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),
),
),
);
}
}
CodePudding user response:
add brackets to the function call
onTap: () {
ontapped(); // here
print('Button Pressed');
},
CodePudding user response:
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