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())
                  ],
                )
              ],
            ),
          ),
        );
      }
    }

score 0 · Answer 1 · answered Jan 19 '21 at 20:27

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:

What I did is I added a map which maps the text string with its corresponding color. (stringColorMap)
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.
Then I used the color of the corresponding text as the the color of our widget.

yes thats a good approach, apologies for not making my issue more clear, the texts in the arrays are not fixed and will grow or shrink. in that case any suggestion ? — akrsha, Jan 19 '21 at 21:50
You can change the values in you map accordingly. Then instead of using the hardcoded list of string (["hello","hi","hey"]) in the children parameter of Wrap, you can use the values present in the map itself. Then The list in you UI will change according to the changes done in the map. Create a function where you will update the stringColorMap and call a setState. — Sarvesh Dalvi, Jan 20 '21 at 10:43

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

1 Answers1