TextFormField input text overflow with DropdownButtonFormField, Flutter

Question

I have layout issues because the text from the dropdown menu that you choose can't fit inside the TextFormField and I can't seem to fix this issue. I have tried adding the overflow: TextOverflow.ellipsis property but that only changes for the dropdown labels, still when I choose one, they can't fit inside the TextFormField.

When you press the dropdown button, it shows like this:

and with the TextOverflow.elipsis property:

which is fine, but I still have the layout issue because of the chosen text that is now displayed inside the textformfield:

How can I add the same property to the TextFormField, or any sort of solution to this issue? The code:

Row(
                                    children: [
                                      Expanded(
                                        child: DropdownButtonFormField<String>(
                                          decoration:
                                              kTextFieldDecoration.copyWith(
                                            hintText: 'Legal status',
                                            labelText: 'Legal status',
                                          ),
                                          value: _legalStatus,
                                          items: [
                                            'Sole proprietorship',
                                            'Partnerships',
                                            'Limited Liability Company (LLC)',
                                            'Corporation',
                                            'Small Business Corporation (S-Corporation)'
                                          ]
                                              .map((label) => DropdownMenuItem(
                                                    child: Text(
                                                      label.toString(),
                                                    ),
                                                    value: label,
                                                  ))
                                              .toList(),
                                          onChanged: (value) {
                                            setState(() {
                                              _legalStatus = value;
                                              print(value);
                                            });
                                          },
                                          validator: (thisValue) {
                                            if (thisValue == null) {
                                              return 'Please choose your legal status';
                                            }
                                            return null;
                                          },
                                        ),
                                      ),
                                      SizedBox(
                                        width: 16.0,
                                      ),
                                      Container(
                                        width: 120.0,
                                        child: DropdownButtonFormField<String>(
                                          decoration:
                                              kTextFieldDecoration.copyWith(
                                            hintText: 'Year established',
                                            labelText: 'Year established',
                                          ),
                                          value: _yearEstablished,
                                          items: items // a list of numbers that are Strings
                                              .map((label) => DropdownMenuItem(
                                                    child:
                                                        Text(label.toString()),
                                                    value: label,
                                                  ))
                                              .toList(),
                                          onChanged: (value) {
                                            setState(() {
                                              _yearEstablished = value;
                                              print(value);
                                            });
                                          },
                                          validator: (thisValue) {
                                            if (thisValue == null) {
                                              return 'Please choose your company year of establishment';
                                            }
                                            return null;
                                          },
                                        ),
                                      ),
                                    ],
                                  ),

Thanks in advance for your help!

Answer 1

You need to use isExpanded property of DropDownFormField to solve this error.

Row(
                                    children: [
                                      Expanded(
                                        child: DropdownButtonFormField<String>(
                                          isExpanded: true,
                                          decoration:
                                              kTextFieldDecoration.copyWith(
                                            hintText: 'Legal status',
                                            labelText: 'Legal status',
                                          ),
                                          value: _legalStatus,
                                          items: [
                                            'Sole proprietorship',
                                            'Partnerships',
                                            'Limited Liability Company (LLC)',
                                            'Corporation',
                                            'Small Business Corporation (S-Corporation)'
                                          ]
                                              .map((label) => DropdownMenuItem(
                                                    child: Text(
                                                      label.toString(),
                                                    ),
                                                    value: label,
                                                  ))
                                              .toList(),
                                          onChanged: (value) {
                                            setState(() {
                                              _legalStatus = value;
                                              print(value);
                                            });
                                          },
                                          validator: (thisValue) {
                                            if (thisValue == null) {
                                              return 'Please choose your legal status';
                                            }
                                            return null;
                                          },
                                        ),
                                      ),
                                      SizedBox(
                                        width: 16.0,
                                      ),
                                      Container(
                                        width: 120.0,
                                        child: DropdownButtonFormField<String>(
                                          decoration:
                                              kTextFieldDecoration.copyWith(
                                            hintText: 'Year established',
                                            labelText: 'Year established',
                                          ),
                                          value: _yearEstablished,
                                          items: items // a list of numbers that are Strings
                                              .map((label) => DropdownMenuItem(
                                                    child:
                                                        Text(label.toString()),
                                                    value: label,
                                                  ))
                                              .toList(),
                                          onChanged: (value) {
                                            setState(() {
                                              _yearEstablished = value;
                                              print(value);
                                            });
                                          },
                                          validator: (thisValue) {
                                            if (thisValue == null) {
                                              return 'Please choose your company year of establishment';
                                            }
                                            return null;
                                          },
                                        ),
                                      ),
                                    ],
                                  ),