In the MALE icon, I'm trying to enable the functionality of changing the color of the icon once it is pressed, but the GestureDetector is not working as expected. How do I fix this?

Here is the main.dart file:

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

int counter = 1;
Color inactiveCardColor = Color.fromARGB(30, 255, 255, 255);
Color activeCardColor = Colors.orange;

void main() => runApp(
      InputPage(),
    );

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  Color maleCardColor = inactiveCardColor;
  Color femaleCardColor = inactiveCardColor;

  void updateColor(int i) {
    if (int == 1) {
      if (maleCardColor == inactiveCardColor) {
        maleCardColor == activeCardColor;
      }
    } else {
      maleCardColor == inactiveCardColor;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.black,
        ),
        scaffoldBackgroundColor: Colors.black,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('BMI Calculator'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: GestureDetector( //Problem Here.
                      onTap: () {
                        setState(() {
                          updateColor(1);
                        });
                      },
                      child: Contain(
                        c: maleCardColor,
                        w: IconWidget(
                          i: FontAwesomeIcons.mars,
                          s: 'MALE',
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Contain(
                      c: femaleCardColor,
                      w: IconWidget(
                        i: FontAwesomeIcons.venus,
                        s: 'FEMALE',
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Contain(
                c: inactiveCardColor,
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Contain(
                      c: inactiveCardColor,
                    ),
                  ),
                  Expanded(
                    child: Contain(
                      c: inactiveCardColor,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              width: double.infinity,
              height: 60,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is the icon_content.dart file:

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

class IconWidget extends StatelessWidget {
  final IconData? i;
  final String? s;
  IconWidget({this.i, this.s});
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FaIcon(
          i,
          size: 70,
        ),
        SizedBox(
          height: 10,
        ),
        Text(
          s!,
          style: TextStyle(fontSize: 20),
        )
      ],
    );
  }
}

This is the reusable_card.dart file:

import 'package:flutter/material.dart';

class Contain extends StatelessWidget {
  final Color c;
  final Widget? w;
  Contain({this.w, required this.c});
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15),
      decoration: BoxDecoration(
        color: c,
        borderRadius: BorderRadius.circular(10),
      ),
      child: w,
    );
  }
}

Image of the interface created.

CodePudding user response：

Change your updateColor() to this.

 void updateColor(int i) {
    if (i == 1) {
      if (maleCardColor == inactiveCardColor) {
        maleCardColor = activeCardColor;
      }
    } else {
      maleCardColor = inactiveCardColor;
    }
  }

and if you want single selected colour. male or female, then do it like this and add GestureDetector in female Icon Widget and pass updatColor(), any value except 1.

  void updateColor(int i) {
    if (i == 1) {
      if (maleCardColor == inactiveCardColor) {
        maleCardColor = activeCardColor;
        femaleCardColor = inactiveCardColor;
      }
    } else {
      femaleCardColor = activeCardColor;
      maleCardColor = inactiveCardColor;
    }
  }

CodePudding user response：

     if (maleCardColor == inactiveCardColor) {
         maleCardColor == activeCardColor;
      }

You had to change from == to = .. I mean you are not comparing but assigning.