I create a Flutter Form and I build a dropdown button with flutter. I am losing local son data into dropdown. Some of my items in dropdown button is long. I use SafeArea and ListView and I am getting overflow on right.
partial solution not mentioned in the other question, and I get the answer here.
Any idea how to fix it?
// TODO: BUILD RUN
return new Scaffold(
key: _scaffoldKey,
body: new SafeArea(
top: false,
bottom: false,
child: new Form(
key: _formKey,
child: new ListView(
padding: const EdgeInsets.symmetric(
horizontal: 16.0, vertical: 32.0),
children: <Widget>[
//TODO: CURRENCY
new FormField<String>(
builder: (FormFieldState<String> state) {
return InputDecorator(
decoration: InputDecoration(
labelText: 'CHOOSE CURRENCY',
labelStyle: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.green.shade700),
errorText: state.hasError ? state.errorText : null,
),
isEmpty: _mySelectedCurrency == '',
child: new DropdownButtonHideUnderline(
child: new DropdownButton<String>(
style: TextStyle(
fontSize: 14.0,
color: Colors.black,
fontWeight: FontWeight.w500,
),
value: _mySelectedCurrency,
isDense: true,
onChanged: (String newValue) {
setState(() {
_mySelectedCurrency = newValue;
state.didChange(newValue);
});
},
items: _itemsName,
),
),
);
},
validator: (val) {
return val != '' ? null : 'Choose Currency...';
},
),
],
))));
Solution : The solution to resolve this overflow error is to make your entire widget or in our case the Column scrollable. We can do that by wrapping our Column inside a SingleChildScrollView. Also, wrap the SingleChildScrollView with Center so that the entire UI is centered.
Multi-Select Dropdown in Flutter Multi-select dropdown is used in selecting more than one item or in other words selecting multiple values from a given set of checkbox items and display selected items in the TitleTile box. It displays the list of items in an overlay dropdown fashion.
In Flutter, a dropdown is created using the DropdownButton and DropdownMenuItem widgets. The DropdownButton takes the list of items and shows them using the DropdownMenuItem. Steps to create dropdown: Step 1: Add a variable called dropdownValue that holds the currently selected item.
Though I have flagged the question as possible duplicate, a partial solution not mentioned in the other question is to use the isExpanded
property for DropDownButton
.
child: new DropdownButton<String>(
isExpanded: true,
...
In most cases, in addition to the expanded, it is also good to make it ellipsized.. steps 1 and 2. If it's not ellipsized it will make it wrap to next line and if the component doesn't support multiples lines it will truncated the text.
DropdownButton(
isExpanded: true, //Step 1
items: [
new DropdownMenuItem(
child: Text("Long text that overflow the size.. wrapped or ellipsized",
overflow: TextOverflow.ellipsis), //Step 2
),
],
onChanged: (val) { }
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With