Как изменить цвет одной кнопки среди нескольких кнопок в Flutter?

Question

Я новичок в Дарт и флаттер фреймворк. В настоящее время у меня есть GridView, заполненный 25 кнопками. Каждая кнопка по умолчанию имеет оранжевый цвет фона. Тем не менее, я хочу дать пользователю возможность долго нажимать на любую кнопку, и появляется PopUpMenu, давая им возможность выбирать между выбором другого цвета для кнопки. Вот две вещи, которые я попробовал:

1. Установить глобальную переменную, которая меняет цвет. Однако, когда я изменяю его состояние, он меняет цвет ВСЕХ кнопок (я только хочу, чтобы цвет выбранной кнопки менялся).
2. Передайте локальную переменную через экземпляр кнопки и передайте эта переменная вместе с PopUpMenu. Однако это ничего не меняет в кнопках.

Как мне go решить эту проблему? Я включаю фрагменты кода ниже, чтобы помочь вам. Обратите внимание, что этот код относится к тому, как был реализован # 2.

Реализация с 25 кнопками :

    // Random number generator
    var _randGen = new Random();

    //List of maze cards
    List<Widget> mazeCards = new List();

    // Generate cards until it has 25 cards within the list
    while(mazeCards.length != 25)
    {

      // Get the index
      var _currIndex = _randGen.nextInt(words.length);
      // Add the card to the list
      var _cardColor = Colors.orange;
      mazeCards.add(createCard(words[_currIndex], _cardColor));

    }

Метод createCard:

  Widget createCard(String someString, Color _cardColor)
  {
    return GestureDetector(
          onTapDown: _storePosition,
          child: Container(
            padding: EdgeInsets.all(8.0),
            child:
              _createButton(someString, _cardColor)
          ),
    );
  }

Метод createButton:

  Widget _createButton(String someString, Color _cardColor)
  {

    Widget newButton = MaterialButton(
                padding: EdgeInsets.all(50.0),
                color: _cardColor,
                onPressed: () => _printButtonText(someString),
                onLongPress: () {
                  cardOptionsMenu(_cardColor);
                },
                textTheme: ButtonTextTheme.primary,
                 //_someColor(),
                child: Text(someString)
    );

    return newButton; 
  }

Метод cardOptionsMenu:

void cardOptionsMenu(Color _cardColor)
  {

    final RenderBox overlay = Overlay.of(context).context.findRenderObject(); 
    showMenu(
      context: context,
      ...
    )
    .then<void>((CardOptionEnum cardOption) {
      if (cardOption == null) return;
      else{
        switch (cardOption)
          {
            case CardOptionEnum.makeBlackCard:
              setState(() {
                _cardColor = Colors.black;
              });
              break;
            case CardOptionEnum.makeBlueCard:
              setState(() {
                _cardColor = Colors.blue;
              });
              break;
            case CardOptionEnum.makeRedCard:
              setState(() {
                _cardColor = Colors.red;
              });
              break;
            case CardOptionEnum.makeYellowCard:
              setState(() {
                _cardColor = Colors.yellow;

              });
              break;
            case CardOptionEnum.changeWord:

              break;
          }
      }
    });
  }

Answer 1

List<int> items = [];
  List<Color> colors = [];

  @override
  void initState() {
    super.initState();
    items = List.generate(25, (ind) => ind).toList();
    colors = List.generate(25, (ind) => Colors.orange).toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: items.length,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (con, ind) {
          return InkWell(
              child: Card(child: Text('${items[ind]}',
                                     style:TextStyle(color:Colors.white),
                                     textAlign:TextAlign.center), color: colors[ind]),
              onTap: () {
                changeColor(ind);
              });
        });
  }

  void changeColor(index) {
    showDialog(
        context: context,
        builder: (con) {
          return AlertDialog(
            title: Text('Choose a color !'),
            content: Column(mainAxisSize: MainAxisSize.min, children: [
              ListTile(
                  title: Text('Blue'),
                  onTap: () {
                    Navigator.of(con).pop();
                    changeState(index, Colors.blue);
                  }),
              ListTile(
                  title: Text('Red'),
                  onTap: () {
                    Navigator.of(con).pop();
                    changeState(index, Colors.red);
                  }),
              ListTile(
                  title: Text('Green'),
                  onTap: () {
                    Navigator.of(con).pop();
                    changeState(index, Colors.green);
                  })
            ]),
          );
        });
  }

  void changeState(index, color) {
    setState(() {
      colors[index] = color;
    });
  }