Flutter Dropdown align selected item and hint text

Question

I have following code. I have ListTile with text on title and a dropdown on a trailing.

Card(
      elevation: 1,
      margin: EdgeInsets.only(bottom: 3),
      child: ListTile(
        title:Text("Item Type"),
        contentPadding:
            EdgeInsets.fromLTRB(10, 0, 10, 0),
        trailing: DropdownButtonHideUnderline(
            child: DropdownButton(
              isExpanded: false,
              value: selectedLeaveType,
              items: itemTypeList.map((item) {
                return new DropdownMenuItem(
                  child: new Text(item['item_name']),
                  value: item['item_id'],
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  selectedLeaveType = value;
                });
              },
              hint: Align(
                alignment: Alignment.centerRight,
                child: Text(
                  "Select Item Type",
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              style:
                  TextStyle(color: Colors.black, decorationColor: Colors.red),
            ),
          ),
        ),
      ),
    );

Dropdown contains items with various lengths, What I want to do is Text is left aligned and dropdown is right aligned.

Problem

I want to align only hint text and selected text of dropdown to align right, but without luck.

Anybody help me on this??

Answer 1

Try to expand the width:

Card(
  elevation: 1,
  margin: EdgeInsets.only(bottom: 3),
  child: ListTile(
    title: Text("Item Type"),
    contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),
    trailing: DropdownButtonHideUnderline(
      child: DropdownButton(
        isExpanded: false,
        value: true,
        items: itemTypeList.map((item) {
          return new DropdownMenuItem(

            child: Container(
              width: 150,                    //expand here
              child: new Text(
                item['item_name'],
                textAlign: TextAlign.end,
              ),
            ),
            value: item['item_id'],
          );
        }).toList(),
        onChanged: (value) {
          setState(() {
            selectedLeaveType = value;
          });
        },
        hint: Container(
          width: 150,                      //and here
          child: Text(
            "Select Item Type",
            style: TextStyle(color: Colors.grey),
            textAlign: TextAlign.end,
          ),
        ),
        style:
            TextStyle(color: Colors.black, decorationColor: Colors.red),
      ),
    ),
  ),
),

The results: