open DropdownButton items list below the hint text

Question

How to open DropdownButton items list below the hint text not over the whole button

If you look at Flutter example with the link below you will see when you click at "One" item it will open all dropdown items over the dropdown.

I need that "One" item should still appear and items opens below "One" like image below? How to fix it without using another package

 Container(
      margin: EdgeInsets.only(left: 0, right: 11),
      height: 50,
      child: DropdownButton<dynamic>(
        hint:  Padding(
          padding: const EdgeInsets.only(left: 8),
          child: Text('Choose type',  textScaleFactor: 1.2,
            style: TextStyle(color:  Colors.grey ),),
        ),
        value: type,
        icon: Icon(Icons.arrow_drop_down),
        iconSize: 40,
        iconEnabledColor: Colors.blue,
        elevation: 16,
        itemHeight: 90,
        isExpanded: true,
        style: TextStyle(color: Colors.black),
        isDense: false,
        underline: Divider(height: 0, color: Colors.black, ),

        onChanged: (val) {

          if(val != null) {
            setState(() {
              type = val;
            });
          }
        },
        items: types_view.types_list.map<DropdownMenuItem>(( value) {
          return DropdownMenuItem(
            value: value,
            child: Padding(
              padding: const EdgeInsets.only(left: 8),
              child: Text(value.toString(), textScaleFactor: 1.2, style: TextStyle(color: Colors.black),),
            ),
          );
        }).toList(),
      ),
    ),

Best regards

Try to my answer here https://stackoverflow.com/a/68272167/13997210 hope it helps you , if it not solved your problem let me know — Ravindra S. Patil, Aug 02 '21 at 08:29
It not solved my problem, the dropdown items still shows over the dropdown, I put a design image for what I need — blue492, Aug 02 '21 at 09:18
Unfortunately It not helped, can you look at the image I added above, I want that items list shows below "One" as you see in the image — blue492, Aug 02 '21 at 09:38
There's no easy way to force it, the overlay will always try to find the best place to render the dropdown list. — Miguel Ruivo, Aug 02 '21 at 09:39
@blue492,ok Try to here may it helpful https://stackoverflow.com/a/59859741/13997210 or use dropdown below package here https://pub.dev/packages/dropdown_below — Ravindra S. Patil, Aug 02 '21 at 09:48
Thanks, can we redesign DropDownButton like putting it in another widget to open the items as we want in the place we need? — blue492, Aug 06 '21 at 06:39

score 0 · Answer 1 · answered Aug 02 '21 at 09:26

Try to below code hope it helpful for you:

Create dropdown item list and declare one variable :

 String getMonthwiseGraph;

 List monthsList = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ];

Create Widget like Container that declare dropdown button

 Container(
            width: 150,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(35.0),
              border: Border.all(
                color: Colors.grey,
                style: BorderStyle.solid,
              ),
            ),
            margin: EdgeInsets.only(
              top: 10,
              left: 90,
            ),
            padding: EdgeInsets.only(left: 10),
            child: DropdownButtonHideUnderline(
              child: DropdownButton(
                hint: Text(
                  'Select Month',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                  ),
                  textAlign: TextAlign.center,
                ),
                value: getMonthwiseGraph,
                onChanged: (String monthNewValue) {
                  setState(
                    () {
                      getMonthwiseGraph = monthNewValue;
                    },
                  );
                },
                items: monthsList.map<DropdownMenuItem<String>>(
                  (value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(
                        value,
                        style: TextStyle(
                          fontSize: 15,
                        ),
                      ),
                    );
                  },
                ).toList(),
              ),
            ),
          ),

Your output screen like ->

Thanks, can we redesign DropDownButton like putting it in another widget to open the items as we want in the place we need?+ — blue492, Aug 06 '21 at 11:03
Ok now you want dropdown selected value is set to other class/other widget? if your problem is solved so accept my answer and upvote it — Ravindra S. Patil, Aug 06 '21 at 11:06
No, the problem is not solved. With your solution the items still appear over the dropdownbutton. Do you have another solution? I mean another widget which prevent the items appear over dropdownbutton — blue492, Aug 06 '21 at 11:14

open DropdownButton items list below the hint text

1 Answers1