How to change the color of one button among several buttons in Flutter?

Question

I am new to Dart and the Flutter framework. Currently, I have a GridView populated with 25 buttons. Each button, by default, has an orange background color. However, I want to give an option to the user to long press on any button and a PopUpMenu shows up, giving them the option to pick between choosing a different color for the button. Here are the two things I have tried:

1. Set a global variable that changes the color. However, when I change its state, it changes the color of ALL the buttons (I only want the color of the button selected to get changed).
2. Pass a local variable through the instantiation of the button, and pass that variable along to the PopUpMenu. However, this does not change anything about the buttons.

How do I go about solving this problem? I am including snippets of code below to help you out. Note that this code refers to how #2 was implemented.

The 25-Button Instantiation:

    // 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));

    }

The createCard Method:

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

The createButton Method:

  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; 
  }

The cardOptionsMenu Method:

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;
          }
      }
    });
  }

Solution

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;
    });
  }

Comments

[codeabiswas]

Thank you so much for the help! Exactly what I needed!