So im making my first Dropdown but when i have a lot of Strings it expands upwards, is there a way to compact the list and make it scrollable or am i using the wrong Widget?

class _DropdownBehaivorButton extends StatefulWidget {
  const _DropdownBehaivorButton({super.key});

  @override
  State<_DropdownBehaivorButton> createState() => _DropdownBehaivorButtonState();
}

class _DropdownBehaivorButtonState extends State<_DropdownBehaivorButton> {
  
 String dropdownvalue = 'Agresivo';  
 
  var tipos = [   
    'Agresivo',
    'Tranquilo',
    'Travieso',
    'Docil',
    'Travieso',
    'Travieso',
    'Travieso'
  ];


  @override
  Widget build(BuildContext context) {
    return 
            DropdownButtonHideUnderline(
              child: DropdownButton(
                borderRadius: BorderRadius.circular(25),
                isExpanded: true,
                iconEnabledColor: Color(0xff525252),
                dropdownColor: Colors.white,
                style: _textStyle(),
                value: dropdownvalue,
                icon: const Icon(Icons.keyboard_arrow_down),   
                items: tipos.map((String items) {
                  return DropdownMenuItem(
                    value: items,
                    child: Center(child: Text(items)),
                  );
                }).toList(),
              
                onChanged: (String? newValue) {
                  setState(() {
                    dropdownvalue = newValue!;
                  });
                },
              ),
            ); 
}
  TextStyle _textStyle() => TextStyle(
   fontSize: 18,color: Color.fromARGB(123, 82, 82, 82),fontWeight: FontWeight.w400) ;}

I was expecting a compact dropdown list like this

CodePudding user response：

 DropdownButton(
                                            menuMaxHeight: 100, // this line
                                            hint: const Text(
                                                "Please select Child / Patient"),
                                            underline: const SizedBox(),
                                            isExpanded: true,
                                            iconEnabledColor: Colors.blue[800],
                                            dropdownColor: Colors.grey[100],
                                            style: TextStyle(
                                                letterSpacing: 2,
                                                fontWeight: FontWeight.bold,
                                                fontSize: 12,
                                                color: Colors.grey[800]),
                                            value: patientName,
                                            items: patients.map((patient) {
                                              return DropdownMenuItem(
                                                value: patient,
                                                child: Text(patient.childName),
                                              );
                                            }).toList(),
                                            onChanged: (value) {
                                              setState(() {
                                                patientName = value;
                                                debugPrint(patientName!
                                                    .toJson()
                                                    .toString());
                                              });
                                            }),

try changing the menu max height

CodePudding user response：

Try to add dropdownMaxHeight: 200

Here you will find what you need https://pub.dev/packages/dropdown_button2