Flutter中实现圆形TextFormField及解决文本溢出问题

你现在的问题是外层Container是圆形，但TextFormField的内容没被圆形边界裁剪，加上内边距不足，导致文本超出范围。可以通过以下修改解决：

Container(
  height: 300,
  width: 300,
  padding: const EdgeInsets.all(5),
  decoration: const BoxDecoration(
    color: Colors.amber,
    shape: BoxShape.circle,
  ),
  // 关键：添加裁剪，把超出圆形的内容切掉
  clipBehavior: Clip.hardEdge,
  child: TextFormField(
    expands: true,
    maxLines: null,
    textAlign: TextAlign.center,
    textAlignVertical: TextAlignVertical.center,
    keyboardType: TextInputType.multiline,
    decoration: InputDecoration(
      // 移除多余边框，避免和外层圆形冲突
      border: InputBorder.none,
      filled: false,
      // 关键：给文本加内边距，避免贴在圆形边缘
      contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
    ),
  ),
)

核心修改说明： #

• clipBehavior: Clip.hardEdge：强制Container用圆形边界裁剪所有子组件，不管文本怎么换行，超出圆形的部分都会被隐藏。
• contentPadding：给文本预留足够的内边距，让文本在圆形内部有足够空间换行，不会贴到边缘。
• border: InputBorder.none：外层已经是带底色的圆形，不需要TextFormField额外加边框，避免视觉混乱。如果需要输入框边框，可以去掉外层Container的颜色，给TextFormField设置圆形边框再调整内边距。

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