selected dropdown height overflow - flutter

Question

so i have this dropdown and the DropdownMenuItem i have ListTile, below is the option result
after i select it the result become like this
Here is my script
Visibility(
visible: _signalEmiten != null,
child: Container(
height: 150.w,
child: FutureBuilder<List<Mt5Model>>(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasError) {
return Text("ERROR PLEASE RE OPEN SCREEN");
}
return snapshot.hasData
? Container(
child: DropdownButtonFormField(
itemHeight: 150.w,
decoration: InputDecoration(
labelText: 'Choose Account',
),
items: snapshot.data
.map<DropdownMenuItem>((Mt5Model item) {
return DropdownMenuItem(
value: item.mt5Id,
child: Container(
padding:
EdgeInsets.symmetric(vertical: 5.w),
width: MediaQuery.of(context).size.width *
.80,
child: ListTile(
dense: true,
//leading: Text(item.mt5Id.toString()),
title: Text("123456"),
subtitle: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text("Account Type : " + "Type 1"),
Text("Equity : \$ " + "XXXX"),
],
),
),
),
);
}).toList(),
onChanged: (value) {
setState(() {
dropDownValue = value;
populateAccount();
});
},
),
)
: Container(
child: Center(
child: Text('Loading...'),
),
);
},
),
),
),
i already trying to increate the height of my container and DropdownButtonFormField height, but still no help. So, how can i fix it ?

Answer 1

Here I tried to solve the issue, you need to wrap the ListTile subtitle with SingleChildScrollView and enable isThreeLine.you can check with the example below.
void main() => runApp( const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: DropDownExample(),
);
}
}
class DropDownExample extends StatefulWidget {
const DropDownExample({Key? key}) : super(key: key);
#override
_DropDownExampleState createState() => _DropDownExampleState();
}
class _DropDownExampleState extends State<DropDownExample> {
String dropDownValue = "rohit";
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: DropdownButtonFormField(
itemHeight: 100,
decoration: const InputDecoration(
labelText: 'Choose Account',
contentPadding: EdgeInsets.symmetric(vertical: 30)),//Fit the content on dropdown selected value
menuMaxHeight: 300,
value: dropDownValue,
isExpanded: true,
isDense: true,
iconSize: 30,
items: ["rohit", "manish"].map<DropdownMenuItem>((item) {
return DropdownMenuItem(
value: item,
child: Container(
width: MediaQuery.of(context).size.width * .80,
child: ListTile(
dense: false,
//leading: Text(item.mt5Id.toString()),
isThreeLine: true, //getting extra height for ListTile
title: Text("123456"),
subtitle: Container(
color: Colors.yellow,
child: SingleChildScrollView( //to solve over flow issues
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Equity : \$ " + item),
Text("Account Type : " + "Type 1"),
],
),
),
),
),
),
);
}).toList(),
onChanged: _te,
)),
);
}
void _te(value) {
setState(() {
dropDownValue = value.toString();
// populateAccount();
});
}
}

Answer 2

I think you need to remove first container
height: 150.w,