La couleur du scintillement ne change pas lors du changement d'index

Question

Je veux changer la couleur sur le robinet du récipient. Donc, je viens de faire une boucle pour afficher le conteneur et changer de couleur lorsque l'index est le même. Mais le problème est que l'index change, mais la couleur ne l'est pas. J'ai vérifié que la valeur d'impression de currentIndex change mais je ne sais pas pourquoi la couleur ne change pas J'utilise un widget avec état

Code

List categories = [
  {'CatID': 0, 'CatName': 'All'},
  {'CatID': 1, 'CatName': 'Computer Hardware'},
  {'CatID': 2, 'CatName': 'Computer Software'},
  {'CatID': 3, 'CatName': 'Internet'},
  {'CatID': 4, 'CatName': 'Windows Installation'},
];

List<Widget> CatWidget = List<Widget>(); // Here we defined a list of widget!


class ShopScreen extends StatefulWidget {
  @override
  _ShopScreenState createState() => _ShopScreenState();
}

class _ShopScreenState extends State<ShopScreen> {
  int currentindex = 0;

  @override
  Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double Height = MediaQuery.of(context).size.height;
    double Width = MediaQuery.of(context).size.width;

    for (int i = 0; i < categories.length; i++) {
      CatWidget.add(
        GestureDetector(
          onTap: () {
            setState(() {
              // set current index!
              currentindex = i;
              print(currentindex);
            });
          },
          child: Container(
            child: Padding(
              padding: const EdgeInsets.only(left: 10),
              child: Container(
                height: Height * 0.04,
                decoration: BoxDecoration(
                    color: currentindex == i
                        ? Color(0xff04385f)
                        : Colors.white, // Here we checked!,
                    border: Border.all(color: Colors.grey[300]),
                    borderRadius: BorderRadius.all(Radius.circular(10))),
                child: Center(
                    child: Text(
                  categories[i]['CatName'],
                  style: TextStyle(
                      fontSize: 10,
                      color: currentindex == i ? Colors.white : Colors.grey,
                      fontFamily: 'UbuntuRegular'),
                )),
              ),
            ),
          ),
        ),
      );
    }

Answer 1

Changez votre widget de liste comme ceci

 final CatWidget = <Widget>[]; 

J'ai vérifié que le code fonctionnait bien, définissez simplement le widget comme ceci et je définis juste au-dessus de la boucle for dans Widget Build.

Le code final ressemble à ceci

class ShopScreen extends StatefulWidget {
  @override
  _ShopScreenState createState() => _ShopScreenState();
}

class _ShopScreenState extends State<ShopScreen> {
  int currentindex = 0;

  @override
  Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double Height = MediaQuery.of(context).size.height;
    double Width = MediaQuery.of(context).size.width;

     final CatWidget = <Widget>[]; // Here we defined a list of widget!

    for (int i = 0; i < categories.length; i++) {
      CatWidget.add(
        GestureDetector(
          onTap: () {
            setState(() {
              // set current index!
              currentindex = i;
              print(currentindex);
            });
          },
          child: Container(
            child: Padding(
              padding: const EdgeInsets.only(left: 10),
              child: Container(
                height: Height * 0.04,
                decoration: BoxDecoration(
                    color: currentindex == i
                        ? Color(0xff04385f)
                        : Colors.white, // Here we checked!,
                    border: Border.all(color: Colors.grey[300]),
                    borderRadius: BorderRadius.all(Radius.circular(10))),
                child: Center(
                    child: Text(
                  categories[i]['CatName'],
                  style: TextStyle(
                      fontSize: 10,
                      color: currentindex == i ? Colors.white : Colors.grey,
                      fontFamily: 'UbuntuRegular'),
                )),
              ),
            ),
          ),
        ),
      );
    }