Dropdownbutton restrict shown items - flutter

Ive got the following Problem:
I want the user to choose a day of month with a dropdownbutton. So my items are the numbers 1 to 31. Now the list got pretty long and the Dropdownbutton is really large. Is there a Solution to show e.g. only 5 Elements at the same time?
Widget buildDropdownMonthlyTurnus() {
return DropdownButton<int>(
value: _selectedDay,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.blue),
underline: Container(
height: 2,
color: Colors.blue,
),
onChanged: (int newValue) {
setState(() {
_selectedDay = newValue;
});
},
items: Constants.daysOfMonth.map((int value) {
return new DropdownMenuItem<int>(
value: value,
child: new Text(
value.toString(),
style: new TextStyle(color: Colors.black),
),
);
}).toList());
}
In the link you see my problem with the large list.
enter image description here

For this problem you can use listview, inside a container and show manage its size according to the list items shown, you don't need to use dropdown items at all.

Use the menuMaxHeight property of the DropdownButton class. It's a recent addition to control the height of the menu.
Widget buildDropdownMonthlyTurnus() {
return DropdownButton<int>(
menuMaxHeight: 200.0,
value: _selectedDay,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.blue),
underline: Container(
height: 2,
color: Colors.blue,
),
onChanged: (int newValue) {
setState(() {
_selectedDay = newValue;
});
},
items: Constants.daysOfMonth.map((int value) {
return new DropdownMenuItem<int>(
value: value,
child: new Text(
value.toString(),
style: new TextStyle(color: Colors.black),
),
);
}).toList());

Related

Flutter Dropdown list expanding instead of scrolling

So im making my first Dropdown but when i have a lot of Strings it expands upwards, is there a way to compact the list and make it scrollable or am i using the wrong Widget?
class _DropdownBehaivorButton extends StatefulWidget {
const _DropdownBehaivorButton({super.key});
#override
State<_DropdownBehaivorButton> createState() => _DropdownBehaivorButtonState();
}
class _DropdownBehaivorButtonState extends State<_DropdownBehaivorButton> {
String dropdownvalue = 'Agresivo';
var tipos = [
'Agresivo',
'Tranquilo',
'Travieso',
'Docil',
'Travieso',
'Travieso',
'Travieso'
];
#override
Widget build(BuildContext context) {
return
DropdownButtonHideUnderline(
child: DropdownButton(
borderRadius: BorderRadius.circular(25),
isExpanded: true,
iconEnabledColor: Color(0xff525252),
dropdownColor: Colors.white,
style: _textStyle(),
value: dropdownvalue,
icon: const Icon(Icons.keyboard_arrow_down),
items: tipos.map((String items) {
return DropdownMenuItem(
value: items,
child: Center(child: Text(items)),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
),
);
}
TextStyle _textStyle() => TextStyle(
fontSize: 18,color: Color.fromARGB(123, 82, 82, 82),fontWeight: FontWeight.w400) ;}
I was expecting a compact dropdown list like this
DropdownButton(
menuMaxHeight: 100, // this line
hint: const Text(
"Please select Child / Patient"),
underline: const SizedBox(),
isExpanded: true,
iconEnabledColor: Colors.blue[800],
dropdownColor: Colors.grey[100],
style: TextStyle(
letterSpacing: 2,
fontWeight: FontWeight.bold,
fontSize: 12,
color: Colors.grey[800]),
value: patientName,
items: patients.map((patient) {
return DropdownMenuItem(
value: patient,
child: Text(patient.childName),
);
}).toList(),
onChanged: (value) {
setState(() {
patientName = value;
debugPrint(patientName!
.toJson()
.toString());
});
}),
try changing the menu max height
Try to add dropdownMaxHeight: 200
Here you will find what you need https://pub.dev/packages/dropdown_button2

how to make the value of DropDown Button updated?

so i aim to use a dropDownButton if already i have selected an option i find it selected ( the value is saved in DataBase) and of course it can be modified else if i didn't choose any option i choose . so this is using the attribute value : value: box.read("optioSaved") ?? dropDownValue, but here if the user has already choose a value he can't modified it
how can i do ?
this is the full code :
child: DropdownButton<String>(
icon: const Icon(Icons.keyboard_arrow_down),
isExpanded: true,
style: const TextStyle(
color: Colors.black,
fontSize: 17,
fontFamily: 'SFProRegular',
),
underline: Container(
height: 1,
color: Colors.black,
),
onChanged: (String? newValue) {
setState(() {
dropDownValue = newValue;
});
},
items: <String>[
"option1",
"option 2",
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
value: box.read("optioSaved") ?? dropDownValue,
hint: const Text("choose"),
),
assign box.read("optioSaved") to dropDownValue in initState and then just value: dropDownValue

Flutter DropDownButton selection calls all apis on setState

For my app, I have dropdown to select year. The moment I select a value, the entire app starts calling various apis, which I guess is happening due to setState. A section of code:
DropdownButton(
style: const TextStyle(
color: Colors.blue,
),
icon: const Icon(Icons.keyboard_arrow_down),
iconSize: 12,
iconEnabledColor: Colors.red,
hint: const Text(
"MM",
style: TextStyle(
color: Colors.blueAccent,
),
),
items: getYears().map<DropdownMenuItem<String>>((String prod) {
return DropdownMenuItem(
value: prod,
child: Text(prod),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
year = newValue!;
});
print(year);
},
value: year,
),
The api calls for the previous dropdowns are getting called when I change value for this dropdown, even though they are not being touched. Any suggestions how to avoid unnecessary api calls with setState for other dropdowns?

How to make DropdownButton menu width to fit text?

I want to have a dropdown button that has a width based on the menu text length. The dropdown arrow does not have any additional spacing between text.
Like this:
Currently, I am getting this:
My dropdown button arrow is positioned based on the longest text.
My code:
Widget dropdownList(){
return Container(
child: DropdownButton<Location>(
value: _selectedValue,
icon: const Icon(Icons.expand_more),
iconSize: 30,
underline: SizedBox(),
onChanged: (Location? newValue) {
setState(() {
_selectedValue = newValue!;
});
},
style: const TextStyle(color: Colors.blue),
selectedItemBuilder: (BuildContext context) {
return locationList.map((Location value) {
return Container(
child: Text(
value.name,
style: const TextStyle(color: Colors.black,fontSize: 30,
fontWeight: FontWeight.w300),
),
);
}).toList();
},
items: locationList.map<DropdownMenuItem<Location>>((Location value) {
return DropdownMenuItem<Location>(
value: value,
child: Text(value.name, style: TextStyle(color: Colors.black,fontSize: 15,
fontWeight: FontWeight.w300)),
);
}).toList(),
),
);
}
According to the documentations there is a property for DropDownButton called isExpanded:
isExpanded → bool
Set the dropdown's inner contents to horizontally fill its parent. [...]
final
so just set:
isExpanded = true;

How to open dropDownButton from RaisedButton

Using Flutter.
When a user taps a button, I want focus to shift to a dropDownButton and open up the options. Here is my attempt (not working):
RaisedButton(
onPressed: () {setState(() {FocusScope.of(context).requestFocus(_node);exactTime = false;});},
color: Theme.of(context).primaryColor,
child: const Text(
'Estimate',
style: TextStyle(fontSize: 20)
),
)
DropdownButton<String>(
isExpanded: true,
focusNode: _node,
items: ageRanges.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
);
}).toList(),
value: pmhOnset,
onChanged: (String selected) {
setState(() {
pmhOnset = selected;
});
},
)
I don't get any errors. It just doesn't do anything. Any suggestions?
From what I have read it is not possible with out making your own DropDownButton class but that shouldn't be that hard after all just a matter of coping most of flutters code and changing it to fit your need I'll attach a link that I think you will find helpful.