如何将Flutter DropdownButton控件的文本设置为左对齐

Flutter Dropdown文本左对齐设置方法 #

你需要对现有代码做三处调整即可实现文本左对齐：

• 给DropdownButton添加isExpanded: true属性，让下拉组件撑满横向可用空间，对齐属性才能正常生效
• 给DropdownButton添加alignment: Alignment.centerLeft属性，控制选中后展示的文本默认左对齐
• 分别给下拉选项的Text和hint提示的Text添加textAlign: TextAlign.left属性，保证所有场景下文本都左对齐

修改后的完整代码如下：

DropdownButton<String>(
  value: _chosenValue2,
  isExpanded: true,
  alignment: Alignment.centerLeft,
  style: TextStyle(color: Colors.black),
  items: <String>[
    'Personal Type',
    'Other',
  ].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(
        value,
        textAlign: TextAlign.left,
      ),
    );
  }).toList(),
  hint: Text(
    "Customer Model",
    style: TextStyle(
        color: Colors.black,
        fontSize: 16,
        fontWeight: FontWeight.w600),
    textAlign: TextAlign.left,
  ),
  onChanged: (String value) {
    setState(() {
      _chosenValue2 = value;
    });
  },
),

注：如果不希望下拉组件撑满父容器宽度，可删除isExpanded: true属性，给DropdownButton外层套Container指定固定宽度即可，对齐属性依然生效。

内容的提问来源于stack exchange，提问作者Nero Chaniago