I want to be able to appear a class depending on which category is being selected, I tried to do it in setState() but it didn't work, I want the list of products to appear under the category, does anyone know how to do it? this is my code in home_page class

Container(
                height: 30,
                child: ListView.builder(
                  physics: const BouncingScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  itemCount: categorias.length,
                  itemBuilder: (context, index) => GestureDetector(
                    onTap: () {
                      setState(() {
                        selectedIndex = index;
                        if (categorias[selectedIndex] == "Trending now"){
                          TrendingNow();
                        }
                      });
                    },
                    child: Container(
                      alignment: Alignment.center,
                      margin: const EdgeInsets.only(left: 18),
                      padding: const EdgeInsets.symmetric(horizontal: 40),
                      decoration: BoxDecoration(
                        color: index == selectedIndex
                            ? Colors.deepOrangeAccent
                            : Colors.grey.shade400,
                        borderRadius: BorderRadius.circular(40),
                      ),
                      child: Text(
                        categorias[index], style: const TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
              ),

Can someone help me?

CodePudding user response：

First I would say that there is a bit more information missing in your question, like where in your code specifically do you want your TrendingNow() method to appear, but other than that I managed to do this, I hope it's what you're looking for, I had to improvise with the values of the variables but I hope you get the idea of it. at the end of the day I use a flag to analyze if the specific category was selected to display a content (widget) below the list of categories.

  List<String> categorias = ['1', '2', 'Trending now', '4', '5', '6', '7', '8'];
  int selectedIndex = 0;
  bool trendingSelected = false;

  @override
  Widget build(BuildContext context) {
  return ListView(
    children: [
      Container(
        height: 30,
        child: ListView.builder(
          physics: const BouncingScrollPhysics(),
          scrollDirection: Axis.horizontal,
          itemCount: categorias.length,
          itemBuilder: (context, index) => GestureDetector(
            onTap: () {
              setState(() {
                selectedIndex = index;
                if (categorias[selectedIndex] == "Trending now") {
                  trendingSelected = true;
                } else {
                  trendingSelected = false;
                }
              });
            },
            child: Container(
              alignment: Alignment.center,
              margin: const EdgeInsets.only(left: 18),
              padding: const EdgeInsets.symmetric(horizontal: 40),
              decoration: BoxDecoration(
                color: index == selectedIndex
                    ? Colors.deepOrangeAccent
                    : Colors.grey.shade400,
                borderRadius: BorderRadius.circular(40),
              ),
              child: Text(
                categorias[index],
                style: const TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
      trendingSelected
        ? Container( // this is where TrendingNow() should go
            height: 200,
            child: ListView(
              children: [Text('Trending now was selected!')],
            ),
          )
        : Container(),
      ],
    );
  }
}