how to show list of dropdown from botton in flutter

Question

I want to start the list of dropdown from its bottom, here my dropdown code

Container(
                              height: 55.0,
                              width: MediaQuery.of(context).size.width *
                                  0.43,
                              child: DropdownButtonFormField<String>(
                                decoration: InputDecoration(
                                  errorText: _validatedrop
                                      ? 'This is the required field'
                                      : null,
                                      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Color(int.parse(textfieldBorderColor)))),
                                  border: OutlineInputBorder(
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(10.0))),
                                  errorBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                          color: Colors.red, width: 5)),
                                ),
                                items: genderlist
                                    .map<DropdownMenuItem<String>>(
                                        (String value) {
                                  return DropdownMenuItem<String>(
                                 
                                      value: value, child: Text(value));
                                }).toList(),
                                hint: Text(
                                  "Male",
                                  style: GoogleFonts.montserrat(
                                      color: Color(
                                          int.parse(hinttextColor))),
                                ),
                                onChanged: (value) async {
                                  setState(() {
                                    this.selectedGender = value!;

                                    if (this.selectedGender == "") {
                                      _validatedrop = true;
                                      
                                    } else {
                                      _validatedrop = false;
                                    }
                                  });
                                },
                              )),

its output look like this

and i want its output like this, it should start from below

Please help if anyone know how to do this.

Solution

Try below code hope its helpful to you . you must used dropdown_below from here

Create your list

List genderList = [
    {'no': 1, 'gender': 'Male'},
    {'no': 2, 'gender': 'Female'},
    {'no': 3, 'gender': 'Other'}
  ];

One varibale and list our value

List<DropdownMenuItem<Object?>> _dropdownTestItems = [];
  var selectedGender;

Create initState() and dispose() method:

  @override
  void initState() {
    _dropdownTestItems = buildDropdownTestItems(genderList);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

Add your selected gender value in dropdown

  List<DropdownMenuItem<Object?>> buildDropdownTestItems(List genderList) {
    List<DropdownMenuItem<Object?>> items = [];
    for (var i in genderList) {
      items.add(
        DropdownMenuItem(
          value: i,
          child: Text(
            i['gender'],
            style: TextStyle(color: Colors.black),
          ),
        ),
      );
    }
    return items;
  }

Your Widget:

 Padding(
                padding: const EdgeInsets.all(8.0),
                child: DropdownBelow(
                  itemWidth: 100,
                  itemTextstyle: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                      color: Colors.black),
                  boxTextstyle: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                      color: Colors.white54),
                  boxPadding: EdgeInsets.fromLTRB(13, 12, 13, 12),
                  boxWidth: 100,
                  boxHeight: 45,
                  boxDecoration: BoxDecoration(
                    color: Colors.transparent,
                    border: Border.all(width: 1, color: Colors.black,),
                  ),
                  icon: Icon(
                    Icons.arrow_downward,
                    color: Colors.black,
                  ),
                  hint: Text(
                    'Gender',
                    style: TextStyle(
                      color: Colors.black,
                    ),
                  ),
                  value: selectedGender,
                  items: _dropdownTestItems,
                  onChanged: (selectedTest) {
                    setState(() {
                      selectedGender = selectedTest;
                    });
                  },
                ),
              ),

Your result screen->

Comments

[Wali Khan]

You mean that dialog should flow upwards ?

[TimeToCode]

no, downwards! i post the required output image, please check

[TimeToCode]

hey bro, i am getting this error 'package:dropdown_below/dropdown_below.dart': Failed assertion: line 421 pos 16: 'value == null || items .where((DropdownMenuItem<T> item) => item.value == value) .length == 1': is not true.

[Ravindra S. Patil]

can you add your code in your question?

[TimeToCode]

i resolved it, thankyou!!

[Ravindra S. Patil]

Glad to help you.