DropdownButton doesnt work in ListViewbuilder

Question

I'll be so grateful.IF you can help me with this problem. got stuck for a day. code doesn't show the dropdowbutton menues when I click on them. It's a list of dropdownbuttons with their own items.I can see the list of dropdowns but when I click on them the menu doesn't showup . There are 2 lists on for the item list of dropdowns and the second list for the content of dropdowns

class PerfomersList extends StatefulWidget {
  @override
  _PerfomersListState createState() => _PerfomersListState();
}

class _PerfomersListState extends State<PerfomersList> {
  final String valuechoose;
  final europeanCountries = [
    'Category',
    'Availiblity',
    'From',
    'Instant Booking',
    'Pricing',
    'Rating',
  ];
  final dropdownlist = [
    'StandupComedian',
    'Funtalk',
    'Influencers',
    'Ventrgualizer',
    'Nature',
    'Dancers',
  ]; 

   
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Container(
          child: Column(
            children: [
              Container(
                alignment: Alignment.center,
                height: 100,
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border.symmetric(
                    horizontal: BorderSide(
                      color: Colors.white,
                      width: .5,
                    ),
                  ),
                ),
                child: LIstOfItem(
                  europeanCountries: europeanCountries,
                  dropdownlist: dropdownlist,
                  valuechoose: valuechoose,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class LIstOfItem extends StatefulWidget {
  final List<String> europeanCountries;
  final List<String> dropdownlist;
  final String valuechoose;

  const LIstOfItem({
    Key key,
    this.europeanCountries,
    this.dropdownlist,
    this.valuechoose,
  }) : super(key: key);

  @override
  _LIstOfItemState createState() => _LIstOfItemState();
}

class _LIstOfItemState extends State<LIstOfItem> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: widget.europeanCountries.length,
      itemBuilder: (context, index) {
        return Container(
          width: 210,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.white,
              width: .5,
            ),
            borderRadius: BorderRadius.all(Radius.circular(15)),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 9.0),
          margin: const EdgeInsets.symmetric(horizontal: 9.0, vertical: 20),
          child: DropdownButton(
            dropdownColor: Colors.green,
            hint: Text(widget.europeanCountries[index],
                style: TextStyle(color: Colors.white)),
            items: widget.europeanCountries.map((valitem) {
              return DropdownMenuItem(
                child: Text(
                  valitem,
                  style: TextStyle(color: Colors.white),
                ),
                value: valitem,
              );
            }).toList(),
          ),
          alignment: Alignment.center,
        );
      },
    );
  }
}

Answer 1

You need to add onChanged() as Nishanth said here is your code with little tweak. Your ListOfItem() widget

 class LIstOfItem extends StatefulWidget {
    final List<String> europeanCountries;
    final List<String> dropdownlist;
    String valuechoose; // Change your valuechoose from final to non final
  // Make your constructor non constant
    LIstOfItem({
      Key key,
      this.europeanCountries,
      this.dropdownlist,
      this.valuechoose,
    }) : super(key: key);
  
    @override
    _LIstOfItemState createState() => _LIstOfItemState();
  }
  
  class _LIstOfItemState extends State<LIstOfItem> {
    @override
    Widget build(BuildContext context) {
      return ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: widget.europeanCountries.length,
        itemBuilder: (context, index) {
         // it will hover to value which selected when dropdown poped up
         widget.valuechoose = widget.europeanCountries[index];
          return Container(
            width: 210,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.white,
                width: .5,
              ),
              borderRadius: BorderRadius.all(Radius.circular(15)),
            ),
            padding: const EdgeInsets.symmetric(horizontal: 9.0),
            margin: const EdgeInsets.symmetric(horizontal: 9.0, vertical: 20),
            child: DropdownButton(
              value: widget.valuechoose, // add your valuechoose here
              dropdownColor: Colors.green,
              hint: Text(widget.europeanCountries[index],
                  style: TextStyle(color: Colors.white)),
              items: widget.europeanCountries.map((valitem) {
                return DropdownMenuItem(
                  child: Text(
                    valitem,
                    style: TextStyle(color: Colors.white),
                  ),
                  value: valitem,
                );
              }).toList(),
              onChanged: (val) {
                // changing your valuechoose when user clicks item
                widget.valuechoose = val;
              },
            ),
            alignment: Alignment.center,
          );
        },
      );
    }
  }

Answer 2

From the documentation of the DropDownButton,

If [items] or [onChanged] is null, the button will be disabled, the down arrow will be greyed out.

Since, you haven't provided an onChanged parameter to your widget, it got automatically disabled which means you won't be able to click on it. This is why you are unable to see the options.

Add this,

child: DropdownButton(
  // Add this onChanged parameter
  onChanged: (String answer) {
    // the answer is the value of the option that has been chosen
    // you can use it to set a value in the state
  },