The below is my code which contains a text followed by drop down menu and followed by list view builder. When I add an extra items in drop down menu I am getting an overflow error. and also I am getting the drop down menu items in upside when I click on it. I want it to come in downwards direction.
class PaySlipView extends StatefulWidget {
const PaySlipView({Key? key}) : super(key: key);
@override
State<PaySlipView> createState() => _PaySlipViewState();
}
class _PaySlipViewState extends State<PaySlipView> {
String remotePDFpath = "";
ValueNotifier<String> _selectedDropDown = ValueNotifier<String>('2022');
List months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
var items = [
'2020',
'2021',
'2022',
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(left: 18.0, right: 18.0, top: 20.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ValueListenableBuilder(
valueListenable: _selectedDropDown,
builder: (BuildContext context, value, Widget? child) {
return Text(
'Pay slips for ' + _selectedDropDown.value,
style: TextStyle(
fontSize: 18.0,
color: AppColors.black,
fontWeight: FontWeight.bold),
);
}),
ValueListenableBuilder(
valueListenable: _selectedDropDown,
builder: (BuildContext context, value, Widget? child) {
return DropdownButton(
elevation: 10,
style: TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.bold),
value: _selectedDropDown.value,
icon: Icon(
Icons.keyboard_arrow_down_outlined,
color: AppColors.primary,
),
items: items.map((String items) {
return DropdownMenuItem(
value: items, child: Text(items));
}).toList(),
onChanged: (value) {
_selectedDropDown.value = value as String;
});
})
],
),
Expanded(
child: ValueListenableBuilder(
valueListenable: _selectedDropDown,
builder: (BuildContext context, value, Widget? child) {
return ListView.separated(
itemCount: 12,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(
months[index] +
' ' +
_selectedDropDown.value.substring(0, 4),
style: TextStyle(color: Colors.black),
),
trailing: IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PDFScreen(
title: months[index],
year: _selectedDropDown.value
.substring(0, 4),
),
),
);
},
icon: Icon(Icons.file_download_outlined),
),
);
},
separatorBuilder: (BuildContext context, int index) {
return Divider(
thickness: 1,
);
},
);
})),
],
),
),
);
}
}
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/Cjg9l.png