How To Make Each Grid With Different Color

I'm trying to make each grid with different color the value is coming from the controller (from api)

I cant reach every grid because using the map doesn't provide an index for each grid.

is there another way to view these grids or another way to color each one with different color?

here is the code :

                        GridView.count(
                            padding: EdgeInsets.only(top: 0),
                            physics: BouncingScrollPhysics(),
                            childAspectRatio: getProportionateScreenWidth(159) /
                                getProportionateScreenWidth(115),
                            crossAxisCount: 2,
                            crossAxisSpacing: getProportionateScreenWidth(28.5),
                            mainAxisSpacing: getProportionateScreenWidth(14.3),
                            children: controller.letters.map(
                              (e) {
                                counter++;
                                return Material(
                                  elevation: 3,
                                  borderRadius: BorderRadius.circular(
                                      getProportionateScreenWidth(33)),
                                  child: Container(
                                    height: getProportionateScreenWidth(115),
                                    width: getProportionateScreenWidth(159),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(
                                          getProportionateScreenWidth(33)),
                                    ),
                                    child: Center(
                                        child: Text(
                                      e,
                                      style: TextStyle(
                                          fontSize:
                                              getProportionateScreenWidth(54),
                                          fontWeight: FontWeight.bold,
                                          color: counter % 2 == 0
                                              ? Color(0xff6FC989):
                                             Color(0xff00A49A)
                                      )
                                    )),
                                  ),
                                );
                              },
                            ).toList(),
                          ),

What I want to view is like this

Generate the List of Color before and then modify your code a little (convert your controller.letters to Map:

children: controller.letters.asMap().entries.map((entry) {
  return Material(
    child: Contaner(
      child: Center(
        child: Text(entry.value), // value contains you `letter`.
        style: TextStyle(
          color: _generatedColors[entry.key], // key containes index starting from 0.
        ),    
      ),
    ),
  );  
}).toList();