CODEWITHSUNDEEP
flutterflutter-layoutflutter-dropdownbuttonflutter-textinputfield
seyyed javad
seyyed javad

Reputation: 43

How to reduce the height of the DropDownButtonFormField so that the text inside it does not go out of the middle in flutter?

When I set a height for my container that is the parent of DropDownButtonFormField, I have no problem when the height is 55, but when the height is less (42) than a certain limit, the text inside it looks like this.

enter image description here

As it is clear in the picture, cat is no longer in the middle of the container. this is my code:

Container(
  alignment: Alignment.center,
  width: double.infinity,
  height: 40,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: const Color(0xFF616161),
      width: 0.65,
    ),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Padding(
    padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
    child: DropdownButtonFormField(
      enableFeedback: true,
      menuMaxHeight: 200,
      icon: Icon(Icons.keyboard_arrow_down_rounded),
      iconSize: 21,
      alignment: Alignment.center,
      // decoration: InputDecoration.collapsed(hintText: ''),
      decoration: InputDecoration(
        border: InputBorder.none,
        prefixIcon: Icon(Icons.location_on_rounded),
      ),
      dropdownColor: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(8)),
      elevation: 2,
      // isExpanded: true,
      value: cityValue,
      onChanged: (String? newValue) {
        setState(() {
          cityValue = newValue!;
        });
      },
      items: <String>['Tehran', 'Cat', 'Tiger', 'Lion']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(
            value,
            style:
                TextStyle(fontSize: 15, color: Color(0xff707070)),
          ),
        );
      }).toList(),
    ),
  ),
),

The icon is in the middle but not the text. I used Offset, but then the icon gets messed up.

Upvotes: 1

Views: 4469

Answers (4)

Sarkheel Mughal
Sarkheel Mughal

Reputation: 91

Both horizontal and vertical padding will looks nice into InputDecoration put this line

contentPadding: EdgeInsets.symmetric(vertical: 7,horizontal: 10),

Upvotes: 2

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14885

Try below code using InputDecoration

  DropdownButtonFormField(
          decoration: const InputDecoration(
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(4)),
              borderSide: BorderSide(width: 1, color: Colors.grey),
            ),
            contentPadding: EdgeInsets.symmetric(
              horizontal: 10.0,
              vertical: 3.0,
            ),
            border: OutlineInputBorder(),
            prefixIcon: Icon(
              Icons.location_on_rounded,
              color: Colors.grey,
            ),
          ),
          dropdownColor: Colors.white,
          borderRadius: const BorderRadius.all(
            Radius.circular(8),
          ),
          icon: const Icon(Icons.keyboard_arrow_down_rounded),
          onChanged: (value) => {
            cityValue = value!,
          },
          items: <String>['Tehran', 'Cat', 'Tiger', 'Lion']
              .map(
                (e) => DropdownMenuItem(
                  value: e,
                  child: Text(e),
                ),
              )
              .toList(),
        ),

Your Result Screen-> image

Upvotes: 2

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63839

The default Icon size 24, so you need minimum height 48 to view properly. It would be better not to force it have certain height.You can remove height 40 for better UX.

Now let say you like to have fixed hight, for this case, you need to maintain padding for yourself.

decoration: InputDecoration(
  border: InputBorder.none,
  contentPadding: EdgeInsets.only(top: 6), //this one
  prefixIcon: Icon(Icons.location_on_rounded),
),

enter image description here

Container(
  alignment: Alignment.center,
  width: double.infinity,
  height: 40,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: const Color(0xFF616161),
      width: 0.65,
    ),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Padding(
    padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
    child: DropdownButtonFormField(
      enableFeedback: true,
      menuMaxHeight: 200,
      icon: Icon(Icons.keyboard_arrow_down_rounded),
      iconSize: 20,
      alignment: Alignment.center,
      // decoration: InputDecoration.collapsed(hintText: ''),
      decoration: InputDecoration(
        border: InputBorder.none,
        contentPadding: EdgeInsets.only(top: 6), //this one
        prefixIcon: Icon(Icons.location_on_rounded),
      ),
      dropdownColor: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(8)),
      elevation: 2,

      onChanged: (String? newValue) {},
      items: <String>['Tehran', 'Cat', 'Tiger', 'Lion']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(
            value,
            style:
                TextStyle(fontSize: 15, color: Color(0xff707070)),
          ),
        );
      }).toList(),
    ),
  ),
),

Upvotes: 4

Warjeh
Warjeh

Reputation: 1220

A quick solution is adding a contentPadding to the InputDecoration.

contentPadding: EdgeInsets.symmetric(vertical: 7),

Upvotes: 3

Related Questions