如何在Flutter中创建特定样式文本输入字段并添加内部文本？

实现核心逻辑 #

无需从零编写渲染与交互逻辑，基于框架原生TextField组件做属性定制，即可完整复现设计样式，同时保留输入法联动、文本选择、光标控制等原生输入能力。

外观样式绘制 #

• 输入框的容器、边框效果完全通过InputDecoration配置实现：针对未聚焦、聚焦、禁用、错误提示四种交互状态，分别设置enabledBorder、focusedBorder、disabledBorder、errorBorder属性，搭配OutlineInputBorder调整圆角半径、边框宽度、颜色值，即可匹配图中的边框样式
• 组件内边距通过contentPadding属性配置，设置对称的水平、垂直边距，让输入文本和容器边缘保持设计要求的间距，同时避免文本、光标被裁剪
• 输入框内部的图标、固定提示内容，直接通过prefixIcon、suffixIcon、prefix、suffix属性嵌入自定义组件，框架会自动处理组件与输入文本的间距、避让逻辑，不需要手动计算位置偏移

内部文本添加与排版 #

• 用户可输入的文本样式：直接通过TextField的style属性配置字号、字重、颜色、行高，框架会自动处理文本排版、光标位置对齐，不需要手动绘制文本层
• 占位提示文本：通过InputDecoration的hintText、hintStyle配置，框架会自动将提示文本放在和输入文本一致的排版位置，获得焦点时会自动隐藏
• 默认填充文本：给TextField关联的TextEditingController设置初始赋值，即可配置默认显示的文本，文本会自动匹配之前设置的样式，不需要额外调整位置

常见避坑点 #

• 不要为了样式定制强行用CustomPainter从零绘制输入区域，会丢失TextField自带的文本编辑、输入法联动能力，后续维护成本极高
• 不要给TextField外层套固定高度的SizedBox约束尺寸，优先通过contentPadding调整内部间距实现自适应高度，避免出现光标被裁剪、点击热区不对的问题
• 配置边框时不要只设置全局border属性，必须分别配置不同交互状态的边框样式，否则交互切换时会出现样式跳变

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