how do i change the color of a single container when they are part of an array?

Question

I am trying to highlight the color of a GestureDetector when its tapped, I want only the tapped container color to be changed, but my GestureDetector is created from an array so when i am changing one, everything gets changed.

How do I reach to my goal ? the texts in the arrays are not fixed and will grow or shrink.

sample gif example with current code

import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyFloat(),
        );
      }
    }
    
    class MyFloat extends StatefulWidget {
      @override
      _MyFloatState createState() => _MyFloatState();
    }
    
    class _MyFloatState extends State<MyFloat> {
      List<BoxShadow> shadow = customShadow;
      Color color = Colors.green;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: primaryColor,
          body: SafeArea(
            child: Column(
              children: [
                Wrap(
                  children: [
                    ...(["hello", "hi", "hey"]
                        .map(
                          (val) => GestureDetector(
                            onTap: () {
                              setState(() {
                                this.color == Colors.green
                                    ? this.color = Colors.cyan
                                    : this.color = Colors.green;
                              });
                            },
                            child: AnimatedContainer(
                              duration: Duration(milliseconds: 250),
                              height: 100,
                              width: 100,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(20),
                                color: this.color == Colors.green
                                    ? Colors.cyan
                                    : Colors.green,
                              ),
                              child: Center(
                                child: Text(val),
                              ),
                            ),
                          ),
                        )
                        .toList())
                  ],
                )
              ],
            ),
          ),
        );
      }
    }

Answer 1

Here is the final result :

Map<String,Color> stringColorMap = {           /// Map which maps the text string to its corresponding color
  "hello" : Colors.green,
  "hi" : Colors.green,
  "hey" : Colors.green,
};


class MyFloat extends StatefulWidget {
  @override
  _MyFloatState createState() => _MyFloatState();
}

class _MyFloatState extends State<MyFloat> {

  Color color = Colors.green;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            Wrap(
              children: [
                ...(["hello", "hi", "hey"]
                    .map(
                      (val){print("Val : $val"); return GestureDetector(
                    onTap: () {
                      setState(() {
                       /* this.color == Colors.green
                            ? this.color = Colors.cyan
                            : this.color = Colors.green; */

                        if(stringColorMap[val] == Colors.green)
                          stringColorMap[val] = Colors.cyan;
                        else
                          stringColorMap[val] = Colors.green;

                      });
                    },
                    child: AnimatedContainer(
                      duration: Duration(milliseconds: 250),
                      height: 100,
                      width: 100,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        color: stringColorMap[val],
                      ),
                      child: Center(
                        child: Text(val),
                      ),
                    ),
                  );}
                )
                    .toList())
              ],
            )
          ],
        ),
      ),
    );
  }
}

Changes done:

1. What I did is I added a map which maps the text string with its corresponding color. (stringColorMap)

2. Then moving on the the onTap function of the widget, as you can see when the user taps the button, it will check the current color of the text and will change the color accordingly.

3. Then I used the color of the corresponding text as the the color of our widget.