[Flutter] How to Expand Dropdown Width to Full Screen and Open It Below the Button in Flutter?

Question:


I'm trying to create a DropdownButton in Flutter that expands to take up the full width of the screen when clicked, but currently, it only expands based on the width of the button. Additionally, I want the dropdown menu to open below the button, not over or beside it.

Here's the relevant part of my code:

_buildFullWidthDropdown(
context: context,
label: 'جنسیت',
selectedValue: controller.selectedGender.value.isEmpty ? null : controller.selectedGender.value,
items: controller.genders
.map((gender) => DropdownMenuItem<String>(
value: gender,
alignment: AlignmentDirectional.bottomCenter,
child: SizedBox(
width: 700, // I want this width to be full screen
child: Row(
children: [
Icon(Icons.person), // Example widget
SizedBox(width: 10),
Text(gender),
],
),
), // Use any widget here
))
.toList(),
onChanged: (value) {
setState(() {
controller.selectedGender.value = value!;
});
},
);


And here's how I build the dropdown container:

Widget _buildFullWidthDropdown({
required BuildContext context,
required String label,
required String? selectedValue,
required List<DropdownMenuItem<String>> items,
required Function(String?) onChanged,
}) {
return Container(
width: MediaQuery.of(context).size.width * 0.4, // Currently adjusts to button width
padding: EdgeInsets.symmetric(horizontal: 16), // Add padding
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(10),
),
child: SizedBox(
width: MediaQuery.of(context).size.width, // I want full width here
child: Theme(
data: Theme.of(context).copyWith(
buttonTheme: ButtonTheme.of(context).copyWith(
minWidth: MediaQuery.of(context).size.width,
)),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: Padding(
padding: const EdgeInsets.all(0.0),
child: Text(label),
),
isExpanded: true,
value: selectedValue,
items: items,
onChanged: onChanged,
),
),
),
),
);
}


Current Issues:

1. The dropdown only expands based on the button's width and not to the full screen width.
2. I want the dropdown to open below the button, but I'm not sure how to achieve this positioning.

Any suggestions on how to get the dropdown to expand to the full width and open below the button would be greatly appreciated!

I want something like this image

Continue reading...