Home > OS >  My male and female toggle button is not working in bmi calculator
My male and female toggle button is not working in bmi calculator

Time:02-13

Since i had moved my Gesturedetector widgit into reusable_child.dart file my app became non functional. Please someone help me to fix the issue of male female toggle

Previously when then entire code was in one file(i.e BODY.dart) it was working properly this issue came after i created sepearte dart files for each

BODY.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'reusable_card.dart';
import 'reusable_child.dart';
import 'AppDrawer.dart';

const double bottomContainerHeight = 80.0;
const Color containerColours = Color(0xFF1D1E33);
const Color inactiveContainerColor = Color(0xFF111328);

enum GenderType {
  MALE,
  FEMALE,
}

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

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

class _BODYState extends State<BODY> {
  GenderType selectedGender = GenderType.MALE;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: AppDrawer(),
      appBar: AppBar(
          title: Padding(
          padding: const EdgeInsets.all(50.0),
          child: Text('BMI Calculator'),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: ReusableCard(
                    colour: selectedGender == GenderType.MALE
                        ? containerColours
                        : inactiveContainerColor,
                    cardChild: ReusableChild(
                      containerIcon: FontAwesomeIcons.mars,
                      txt: 'MALE',
                    ),
                    onPress: () {
                      setState(() {
                        selectedGender = GenderType.MALE;
                      });
                    },
                  ),
                ),
                Expanded(
                  child: ReusableCard(
                    cardChild: ReusableChild(
                      containerIcon: FontAwesomeIcons.venus,
                      txt: 'FEMALE',
                    ),
                    colour: selectedGender == GenderType.FEMALE
                        ? containerColours
                        : inactiveContainerColor,
                    onPress: () {
                      selectedGender = GenderType.FEMALE;
                    },
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: ReusableCard(
              onPress: () {},
              colour: containerColours,
            ),
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: ReusableCard(
                    onPress: () {},
                    colour: containerColours,
                  ),
                ),
                Expanded(
                  child: ReusableCard(
                    onPress: () {},
                    colour: containerColours,
                  ),
                ),
              ],
            ),
          ),
          Container(
            color: Colors.pink.shade400,
            width: double.infinity,
            height: bottomContainerHeight,
            margin: EdgeInsets.only(top: 10.0),
            child: Padding(
              padding: const EdgeInsets.all(17.0),
              child: Text(
                'Calculate',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

resuable_card.dart

import 'package:flutter/material.dart';

class ReusableCard extends StatelessWidget {
  ReusableCard({
    required this.colour,
    this.cardChild,
    this.onPress,
  });
  final Color colour;
  final Widget? cardChild;
  final VoidCallback? onPress;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        child: cardChild,
        margin: EdgeInsets.all(15.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          color: colour,
        ),
      ),
    );
  }
}

resuable_child.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class ReusableChild extends StatelessWidget {
  final containerIcon;
  final String txt;
  ReusableChild({this.containerIcon = FontAwesomeIcons.amazon, this.txt = ''});
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          containerIcon,
          color: Color(0xFFffffff),
          size: 80.0,
        ),
        SizedBox(
          height: 10,
        ),
        Text(
          txt,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 18.0,
            color: Colors.grey.shade500,
          ),
        )
      ],
    );
  }
}

CodePudding user response:

the issue is in your FEMALE ReusableCard's onPress

onPress: () {
  selectedGender = GenderType.FEMALE;
},

you forgot to add setState here as well

onPress: () {
  setState(() {
    selectedGender = GenderType.FEMALE;
  });
},
  • Related