如何为Flutter TextField组件的label文本设置顶部内边距？

解决方案 #

你当前在labelStyle中设置height属性无法实现label顶部内边距效果，该属性为文本行高配置，不会作用于label的外部间距，可通过InputDecoration的内置属性调整实现需求，修改后的代码如下：

TextField(
  controller: emailTextController,
  decoration: InputDecoration(
    border: const OutlineInputBorder(
      borderRadius: Dimens.textFieldBorderRadius,
    ),
    filled: true,
    // 配置label固定在顶部，不跟随输入状态浮动，不需要固定可删除该行
    floatingLabelBehavior: FloatingLabelBehavior.always,
    labelStyle: const TextStyle(
      color: Colors.black,
      fontSize: 18,
      fontFamily: 'SFPro',
    ),
    labelText: Strings.enterEmail,
    fillColor: Colors.white70,
    // 调整内边距，修改top值即可控制label距离输入框顶部的间距
    contentPadding: const EdgeInsets.only(top: 30, bottom: 16, left: 16, right: 16),
  ),
)

参数调整说明 #

• 可按需修改contentPadding的top数值，数值越大label顶部内边距越大
• 若删除floatingLabelBehavior配置，label会在无输入时居中显示、用户输入时自动上浮，contentPadding的top值仍会控制上浮后label的顶部间距

内容的提问来源于stack exchange，提问作者Андрей Куприёв