Flutter中OutlineInputBorder内文本无法正常显示的问题

问题原因 #

添加OutlineInputBorder后，InputDecoration默认带有内边距（contentPadding），而你的容器宽度仅设置为50，内边距占用了大部分空间，导致文本被挤压到可视区域之外，所以看起来为空但实际内容存在。

修复代码 #

保留原容器的width:50约束，通过调整InputDecoration的内边距和文本对齐方式解决：

Container(
  margin: const EdgeInsets.only(left: 10, bottom: 12),
  constraints: BoxConstraints.tightFor(width: 50, height: 40),
  child: TextFormField(
    textAlign: TextAlign.left, // 让文本靠左显示，避免被内边距遮挡
    decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(horizontal: 4, vertical: 0), // 缩小水平内边距，给文本留出空间
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 1, color: Colors.green),
      ),
      disabledBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 1, color: Colors.green),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 1, color: Colors.green),
      ),
    ),
  ),
)

关键调整点 #

• contentPadding：默认内边距为EdgeInsets.symmetric(horizontal: 12, vertical: 16)，对于50宽度的容器来说过于宽大，缩小水平内边距后，文本就能在边框内正常显示。
• textAlign：设置文本靠左对齐，确保文本从边框左侧起始位置显示，不会被内边距挤到可视区域外。

这样修改后，既保留了边框样式，又能让文本正常显示，同时不需要改动容器的宽度约束。

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