How Can I change color of the container when it is active or inactive in a ListView

Question

I try to change container active and inactive color when the user currently chosee it, If I have to give more detail, I have listView which shows 10 images horizontaly, I take tohese image by for loop, I just want it when the user choose one image, Image parent container color should be different to make it easy the user understand current choice, but when user pressed other picture, only this picture active color should be appear, How can I do that, Thanks for your help..

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'constants.dart';
import 'dart:math';

enum Sticker{
sticker1,sticker2,sticker3,sticker4,sticker5,sticker6,sticker7,sticker8,sticker9,
}
class AddMenuScreen extends StatefulWidget {
  @override
  _AddMenuScreenState createState() => _AddMenuScreenState();
}

class _AddMenuScreenState extends State<AddMenuScreen> {
  Color _animatedContainerForStickersInactiveColor=Colors.white;
  Color _animatedContainerForStickersActiveColor=kColorTheme2;
  String chosenImagePath;
  List<Widget> stickerList=[];
  String menuName;
  int addScreenImageNum;

  void initState(){
    super.initState();
    createAddScreenImageNum();
    makeStickersWithFlatButton();
  }

  void createAddScreenImageNum(){
    Random random =Random();
    addScreenImageNum = random.nextInt(3)+1;
  }
  void makeStickersWithFlatButton(){
    for(int i=1;i<10;i++){
      stickerList.add(Container(
        color: chosenImagePath=="images/sticker$i.png"?
        _animatedContainerForStickersActiveColor:_animatedContainerForStickersInactiveColor,
        child: FlatButton(
          child: Image(image: AssetImage("images/sticker$i.png")),
          onPressed:(){
            setState(() {
              chosenImagePath="images/sticker$i.png";
            });
            },
          ),
      ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: kColorTheme9,
      child: Container(
        height: 400,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(topRight: Radius.circular(40),topLeft: Radius.circular(40)),
        ),
        child:Padding(
          padding:EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(
                  color: kColorTheme2,
                  borderRadius: BorderRadius.circular(90)
                ),
                child: TextField(
                  style: TextStyle(
                    color: Colors.black,
                    fontFamily:"Graduate",
                    fontSize: 20,
                  ),
                  textAlign: TextAlign.center,
                  onChanged: (value){
                    menuName=value;
                  },
                  decoration: InputDecoration(
                    border:OutlineInputBorder(
                      borderRadius: BorderRadius.circular(90),
                      borderSide: BorderSide(
                      color: Colors.teal,
                      ),
                    ),
                    hintText: "Menü ismi belirleyin",
                    hintStyle: TextStyle(
                      color: Colors.black.withOpacity(0.2),
                      fontFamily: "Graduate",
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20,),
              Text("menünüz icin yana kadırarak bir resim secin",textAlign: TextAlign.center,
                style: TextStyle(fontFamily: "Graduate", fontSize: 12),),
              SizedBox(height: 20,),
              Expanded(
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: stickerList,
                ),
              ),
              SizedBox(height: 20,),
              Container(
                decoration: BoxDecoration(
                  border: Border.all(style: BorderStyle.solid),
                  color: kColorTheme7,
                  borderRadius: BorderRadius.circular(90),
                ),
                child: FlatButton(
                  onPressed: (){
                  },
                  child: Text("Menu ekle", style: TextStyle(fontSize: 20, color:  Colors.white,
                      fontFamily: "Graduate", fontWeight: FontWeight.bold),),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

You didn't let the list to be rebuilt again to make new changes. So in makeStickersWithFlatButton all list widgets created once in initState. So any call to setState didn't make a affect

  var selectedIndex = -1;

  ...
  Expanded(
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: =====> YOUR LIST COUNT <=====,
          itemBuilder: itemBuilder: (context, index) {
              return Container(
                   color: index == selectedIndex ? activeColor : passiveColor
                   child: FlatButton(
                      onPressed:(){
                          setState(() {
                            selectedIndex = index;
                          });
                     },)
              );
          },
      ),
  ),

Answer 2

Try wrapping your Container in an InkWell, where you can specify the onTap fcuntion. From there you can update your Container colour like so:

//set a variable for the color inside you stateful widget
Color containerColor = Colors.white;

//then in your onTap function
onTap: (){
  setState(() {
    color = Colors.red;
  });
}

You can also try to make your own class and then building it with ListView.builder(), which will give you the index of your items. Then you can specify an onTap, as I have mentioned before in your own class and handle the color accordingly. Once having clicked again, you simply change all other colors back to normal