A cor oscilante não muda na mudança de índice

Dec 01 2020

Quero mudar a cor na torneira do recipiente. Então, eu apenas usei o loop para mostrar o container e mudar a cor quando o índice for o mesmo. Mas o problema é que o índice está mudando, mas a cor não. Verifiquei se o valor de impressão de currentIndex está mudando, mas não sei por que a cor não está mudando Estou usando um widget com estado

Código

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

Respostas

3 UmaizKhan Dec 01 2020 at 09:13

Altere seu widget de lista como este

 final CatWidget = <Widget>[]; 

Eu verifiquei se o código está funcionando bem, apenas defina o widget como este e eu defino logo acima do loop for no widget Build.

O código final se parece com este

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