Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix Flutter dropdown button overflow issue?

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...';
                          },
                        ),
                      ],
                    ))));
like image 950
Nick Avatar asked Nov 08 '18 17:11

Nick


People also ask

How do you resolve overflow issues in Flutter?

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.

How do you handle multiple dropdowns in Flutter?

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.

How do you get the Flutter drop down position?

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.


2 Answers

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,
                ...
like image 114
chemamolins Avatar answered Nov 07 '22 02:11

chemamolins


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) { }
)
like image 22
Cassio Seffrin Avatar answered Nov 07 '22 00:11

Cassio Seffrin