如何在Flutter的TextField代码中为labelText与hintText添加间距

方案1：调整InputDecoration内置参数实现（无需修改组件结构） #

默认TextField的labelText浮动后和hint的间距可以通过两个参数调整：

• 将floatingLabelBehavior设为FloatingLabelBehavior.always，保证label始终固定在顶部不会和hint重叠
• 调整contentPadding的top值，直接控制label底部到hint顶部的间距，数值可按需求修改

修改后的代码如下：

Expanded(
  child: TextField(
    style: TextStyle(color: Colors.white),
    autofocus: true,
    decoration: InputDecoration(
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.red),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.green),
        ),
        labelText: 'Name',
        labelStyle: TextStyle(
          color: Colors.white,
          fontFamily: 'abel',
          fontSize: 30.0,
        ),
        // 新增配置开始
        floatingLabelBehavior: FloatingLabelBehavior.always,
        contentPadding: EdgeInsets.only(top: 20, bottom: 10),
        // 新增配置结束
        hintText: 'eg. Raakib Zargar',
        hintStyle: TextStyle(color: Colors.white)
    ),
    onChanged: (value) {
      teamName = value;
    },
  ),
)

方案2：自定义结构实现完全灵活的间距控制 #

如果需要更精细化的样式调整，可放弃内置的labelText参数，用Column嵌套自定义label和TextField，直接通过SizedBox控制间距：

Expanded(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      // 自定义label
      Text(
        'Name',
        style: TextStyle(
          color: Colors.white,
          fontFamily: 'abel',
          fontSize: 30.0,
        ),
      ),
      // 调整SizedBox的height即可修改两者间距，数值按需设置
      SizedBox(height: 16),
      TextField(
        style: TextStyle(color: Colors.white),
        autofocus: true,
        decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.red),
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.green),
            ),
            hintText: 'eg. Raakib Zargar',
            hintStyle: TextStyle(color: Colors.white),
            contentPadding: EdgeInsets.zero
        ),
        onChanged: (value) {
          teamName = value;
        },
      ),
    ],
  ),
)

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