Flutter Align TextFormField with DropdownButton

Question

I have the following code that renders a ListTile with a TextFormField and a ListTitle with a DropdownButton.

           Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                new Expanded(
                    child: ListTile(
                      dense: true,
                      title: Text(
                        "Property Name",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      subtitle: TextFormField(
                        decoration: InputDecoration(
                            labelText: 'Enter the property name'
                        ),
                      ),
                      isThreeLine: true,
                    )
                ),
                new Expanded(
                    child: ListTile(
                      dense: true,
                      title: Text(
                        "Contact Name",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      subtitle: DropdownButton<int>(
                        items: [
                          DropdownMenuItem<int>(
                            value: 1,
                            child: Text(
                              "John Smith",
                            ),
                          ),
                          DropdownMenuItem<int>(
                            value: 2,
                            child: Text(
                              "Jon Doe",
                            ),
                          ),
                        ],
                        onChanged: (value) {
                          setState(() {
                            _value = value;
                          });
                        },
                        value: _value,
                        hint: Text(
                          "Select Contact Name",
                          style: TextStyle(
                            color: Colors.black,
                          ),
                        ),
                      ),
                      isThreeLine: true,
                    )
                ),
              ],
            ),

but it produces the following:

Is there a way to align the Contact Name's DropdownButton bottom line to the Property Name's ListTile? Any ideas?

Answer 1

1. Use DropdownButtonFormField

As for me, I rather choose to replace Dropdown widget with DropdownButtonFormField

change this

child: ListTile(
  dense: true,
  title: Text(
    "Contact Name",
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
  subtitle: DropdownButton<int>( // change this
    items: [
      ...

into this

child: ListTile(
  dense: true,
  title: Text(
    "Contact Name",
    style: TextStyle(
      fontWeight: FontWeight.bold,
    ),
  ),
  subtitle: DropdownButtonFormField<int>( // into this
    decoration: InputDecoration(
      isDense: true,
      hasFloatingPlaceholder: true,
      labelText: 'Select Contact Name',
      contentPadding: EdgeInsets.symmetric(vertical: 9),
    ),
    items: [
      ...

2. Remove hint params

secondly, as we move 'Select Contact name' to label Text inside InputDecoration, we can remove these lines :

hint: Text(
  "Select Contact Name",
  style: TextStyle(
    color: Colors.black,
  ),
),

3. Comparison

We can discover three options that we already have in image below.

1. at the first row, it is solution proposed by KeykoYume
2. at the second row, it is solution proposed by Abhilash Chandran
3. at the last row, it is new solution proposed by me

Take note, that the third row also automatically handle overflows nicely

Answer 2

Padding your dropdown button with top inset could help as shown below.

subtitle: Padding(
  padding: const EdgeInsets.only(top: 19.0),
  child: DropdownButton<int>(
    items: [
      DropdownMenuItem<int>(
        value: 1,
        child: Text(
          "John Smith",
        ),
      ),
      DropdownMenuItem<int>(
        value: 2,
        child: Text(
          "Jon Doe",
        ),
      ),
    ],
    onChanged: (value) {
//                setState(() {
//                  _value = value;
//                });
    },
    value: 1,
    hint: Text(
      "Select Contact Name",
      style: TextStyle(
        color: Colors.black,
      ),
    ),
  ),
),