сделать так, чтобы все остальные кнопки виджетов меняли свой цвет при нажатии на флаттер

Question

У меня есть несколько кнопок, которые мне нужно нажимать только на одну, а остальные должны изменить свой цвет,

, чтобы сделать код меньше, я извлек виджет, чтобы сделать его многоразовым, но когда явыберите кнопку, она получит измененный цвет, но не обновит состояние других кнопок.

Если я не извлекаю метод кнопки и не использую дубликат кода внутри строки, он работает.

Чего мне не хватает?

int numOfTime = 60;

class NumOfTime extends StatefulWidget {
  const NumOfTime({
    Key key,
  }) : super(key: key);

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

class _NumOfTimeState extends State<NumOfTime> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
            margin: EdgeInsets.only(left: 15, top: 5),
            child: Text(
              'Δευτερόλεπτα',
              style: TextStyle(color: Colors.white),
            )),
        Container(
          margin: EdgeInsets.only(top: 2, left: 10, right: 10, bottom: 10),
          decoration: myBoxDecoration(),
          child: Row(
            children: <Widget>[
              Container(
                  padding: EdgeInsets.only(left: 10, right: 5),
                  child: Icon(Icons.timer)),
              CustomButton(
                number: 30,
              ),
              CustomButton(
                number: 45,
              ),
              CustomButton(
                number: 60,
              ),
              CustomButton(
                number: 75,
              ),
              CustomButton(
                number: 90,
              ),
              Container(
                padding: EdgeInsets.only(right: 10),
              )
            ],
          ),
        ),
      ],
    );
  }
}

class CustomButton extends StatefulWidget {
  final int number;
  const CustomButton({
    Key key,
    final int number,
  }) : this.number = number;

  @override
  _CustomButtonState createState() => _CustomButtonState(number);
}

class _CustomButtonState extends State<CustomButton> {
  final int number;
  _CustomButtonState(this.number);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: FlatButton(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(6.0)),
          disabledColor: number == numOfTime ? Colors.black : Colors.white,
          highlightColor: number == numOfTime ? Colors.black : Colors.white,
          color: number == numOfTime ? Colors.black : Colors.white,
          child: Text(
            '$number',
            style: TextStyle(
                color: number == numOfTime ? Colors.white : Colors.black,
                fontSize: 13),
          ),
          onPressed: () {
            numOfTime = number;
            setState(() {});
          }),
    );
  }
}

Я ожидаю увидетьвсе остальные кнопки меняют свой цвет на белый, если выбрана одна.

Я также пытался передать null onPressed, чтобы отключить его, но я не вижу никаких изменений.

Answer 1

Это распространенная ошибка, у вас есть много вариантов, чтобы решить эту проблему, я покажу вам легкий путь с минимальными изменениями.

Вам необходимо обновить родительский виджет (виджет, который содержит кнопки), потому что вам нужно обновить все ваши кнопки снова.

Итак, ваш код исправлен:

    class _NumOfTimeState extends State<NumOfTime> {
      _onPressed() {
        setState(() {});
      }

      @override
      Widget build(BuildContext context) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
                margin: EdgeInsets.only(left: 15, top: 5),
                child: Text(
                  'Δευτερόλεπτα',
                  style: TextStyle(color: Colors.white),
                )),
            Container(
              margin: EdgeInsets.only(top: 2, left: 10, right: 10, bottom: 10),
              //decoration: myBoxDecoration(),
              child: Row(
                children: <Widget>[
                  Container(
                      padding: EdgeInsets.only(left: 10, right: 5),
                      child: Icon(Icons.timer)),
                  CustomButton(
                    number: 30,
                    onButtonPressed: _onPressed,
                  ),
                  CustomButton(
                    number: 45,
                    onButtonPressed: _onPressed,
                  ),
                  CustomButton(
                    number: 60,
                    onButtonPressed: _onPressed,
                  ),
                  CustomButton(
                    number: 75,
                    onButtonPressed: _onPressed,
                  ),
                  CustomButton(
                    number: 90,
                    onButtonPressed: _onPressed,
                  ),
                  Container(
                    padding: EdgeInsets.only(right: 10),
                  )
                ],
              ),
            ),
          ],
        );
      }
    }

    class CustomButton extends StatefulWidget {
      final int number;
      final VoidCallback onButtonPressed;
      const CustomButton({
        Key key,
        final int number,
        this.onButtonPressed,
      }) : this.number = number;

      @override
      _CustomButtonState createState() => _CustomButtonState(number);
    }

    class _CustomButtonState extends State<CustomButton> {
      final int number;
      _CustomButtonState(this.number);

      @override
      void initState() {
        super.initState();
      }

      @override
      Widget build(BuildContext context) {
        return Expanded(
          flex: 1,
          child: FlatButton(
              shape:
                  RoundedRectangleBorder(borderRadius: BorderRadius.circular(6.0)),
              disabledColor: number == numOfTime ? Colors.black : Colors.white,
              highlightColor: number == numOfTime ? Colors.black : Colors.white,
              color: number == numOfTime ? Colors.black : Colors.white,
              child: Text(
                '$number',
                style: TextStyle(
                    color: number == numOfTime ? Colors.white : Colors.black,
                    fontSize: 13),
              ),
              onPressed: () {
                numOfTime = number;
                widget.onButtonPressed();
              }),
        );
      }
    }

Answer 2

Вы можете использовать потоки, на которые вы подписаны, в вашей кнопке.Я написал статью для этой точной проблемы здесь .

Обычно при нажатии одной кнопки вы передаете ее идентификатор в потоке.В то же время все ваши кнопки (ваш CustomWidget) слушает поток.Когда в поток приходит новый идентификатор, вы проверяете, нажата ли текущая кнопка, а если нет, то отключаете ее.Если это так, оставьте его включенным.

Слишком много кода для вставки сюда, но статья (всего 2 минуты) описывает все.