Flutter Button Click and Button Color Control-CodePudding

I have six buttons on the screen and they all do the same function. But I want to control the colors of these buttons to be clicked. If the button is clicked, the button color should be green (I'm doing this buttonColorDisable.) Everything is normal so far, but in _buttonFunction() widget.callbackColor(); When I call it, I expect all button colors to change again, but only the last button is affected. Other buttons still remain green. how do i solve this.

class BuildNumButton extends StatefulWidget {
final int number;
final Color color;
final Color buttonColorDisable;
final Function callbackColor;
final Function callbackList;
final Function callbackScore;
final Function callbackTarget;

const BuildNumButton({
Key? key,
required this.number,
required this.callbackScore,
required this.callbackList,
required this.callbackTarget,
required this.callbackColor,
required this.color,
required this.buttonColorDisable,
}) : super(key: key);

@override
State<BuildNumButton> createState() => _BuildNumButtonState();
}

class _BuildNumButtonState extends State<BuildNumButton> {
bool isButtonVisible = false;

void _buttonFunction() {
isButtonVisible = true;
CalculateScore.sumNumbers(widget.number);
CalculateScore.calculateScore();
widget.callbackScore();
if (CalculateScore.answer == true) {
  if (!CalculateScore.endGame) {
    widget.callbackList();
    widget.callbackColor();
    isButtonVisible = false;
  }
  widget.callbackTarget();
 }
}

@override
Widget build(BuildContext context) {
 return SizedBox(
  width: 150,
  height: 120,
  child: TextButton(
    style: ButtonStyle(
      backgroundColor: isButtonVisible
          ? MaterialStateProperty.all(
              widget.buttonColorDisable) //button color green
          : MaterialStateProperty.all(widget.color),
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
          side: const BorderSide(color: Colors.white, width: 3),
        ),
      ),
    ),
    onPressed: isButtonVisible ? null : _buttonFunction,
    child: Text(
      widget.number.toString(),
      style: numButtonTextStyle,
     ),
   ),
  );
 }
}

CodePudding user response：

I will prefer creating List<int> to hold tapped index and use BuildNumButton extends StatelessWidget.

Run on dartPad.

class BuildNumButton extends StatelessWidget {
  final int number;
  final Color color;
  final Color buttonColorDisable;
  final VoidCallback callback;
  final bool isDisable;

  const BuildNumButton({
    Key? key,
    required this.number,
    required this.color,
    required this.buttonColorDisable,
    required this.callback,
    required this.isDisable,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 150,
      height: 120,
      child: TextButton(
        style: ButtonStyle(
          backgroundColor: isDisable
              ? MaterialStateProperty.all(
                  buttonColorDisable) //button color green
              : MaterialStateProperty.all(color),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
              side: const BorderSide(color: Colors.white, width: 3),
            ),
          ),
        ),
        onPressed: isDisable ? null : callback,
        child: Text(
          number.toString(),
        ),
      ),
    );
  }
}

and VoidCallback used to get tapEvent and based on condition update the state.

List<int> disableButtons = [];

.....

...List.generate(
  6,
  (index) => BuildNumButton(
    buttonColorDisable: Colors.green,
    isDisable: disableButtons.contains(index),
    callback: () {
      disableButtons.add(index);

      if (disableButtons.length == 6) disableButtons.clear();
      setState(() {});
    },
    color: Colors.cyanAccent,
    number: index,
  ),
)