Positioning dropdown items below the button Flutter

Question

I am desperately trying to find a way to position the items below the button.

As you see if the first item was previously selected, the top of the list is at the same level as the button.

However, if i previously selected the last item, the dropdown list is located so that the list ends at the level of the button.

Which is not the behaviour I want. I want it always be positioned as in the first screen shot, even when a not first element was selected before.

class DropDownButton extends StatefulWidget {
  final List<String> options;

  const DropDownButton({Key? key, required this.options}) : super(key: key);

  @override
  State<DropDownButton> createState() => _DropDownButtonState();
}

class _DropDownButtonState extends State<DropDownButton> {
  String dropdownValue = '';


  @override
  Widget build(BuildContext context) {
    dropdownValue = dropdownValue.isEmpty ? widget.options[0] : dropdownValue;

    return SizedBox(
      height: 70,
      child: Container(
        margin: const EdgeInsets.fromLTRB(2, 5, 2, 5),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(3),
          border: Border.all(color: Colors.white, width: 2),
        ),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<String>(
              isExpanded: true,
              value: dropdownValue,
              items: widget.options
                  .map((e) =>
                  DropdownMenuItem(
                      value: e,
                      child: Text(e)))
                  .toList(),
              onChanged: (value) {
                setState(() {
                  dropdownValue = value!;
                });
              }),
        ),
      ),
    );
  }
}

And since I am on the topic. Is there a way to do it so that the list is actually below the button, and you can actually see a button with the hint text?

Like

-Button-

-item1-

-item2-

-item3-

Answer 1

I found a solution for this using the dropdownmenu widget, using the argument menuStyle I can control the size and alignment. You can control the alignment to show below by providing the Alignment.bottomLeft. and you can control the size of the dropdown menu that pops using the maximumSize property. My code is as the following:

//  note that Sizes file has the following property 
//  that I also used static const p124 = 124.0

  return DropdownMenu<CountryEntity>(
        controller: countryController,
        label: const Text('Country'),
        width: 300,
        dropdownMenuEntries: countryEntities,
        enableFilter: true,
        menuStyle: const MenuStyle(
            alignment: Alignment.bottomLeft,
            maximumSize:
                MaterialStatePropertyAll(Size.fromHeight(Sizes.p124)),),
        requestFocusOnTap: true,
        onSelected: (country) {
          setState(() {
            selectedCountryId = country;
          });
        },
      );

This is how it looks before adding the menu style property:

This is how it looks after adding the menu style property