Flutter TextField带背景色前缀实现：求匹配示例效果的方案

你当前的代码尝试通过prefix属性添加带背景色的前缀，但会出现前缀容器和输入框边框有间隙、样式衔接不自然的问题，以下是匹配示例样式的修改方案：

修改后的完整代码 #

class NumberFiled extends StatelessWidget {
  const NumberFiled({Key? key, required this.lebal}) : super(key: key);
  final String lebal;

  @override
  Widget build(BuildContext context) {
    // 统一前缀与输入框的圆角样式
    const borderRadius = BorderRadius.only(
      topLeft: Radius.circular(4),
      bottomLeft: Radius.circular(4),
    );
    // 匹配输入框默认高度，避免前缀上下错位
    const inputHeight = 48.0;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "$lebal*",
            style: const TextStyle(color: whiltetextcolor),
          ),
          const SizedBox(height: 15),
          TextField(
            style: const TextStyle(color: secondarycolor),
            keyboardType: TextInputType.number,
            cursorColor: secondarycolor,
            decoration: InputDecoration(
              // 调整输入框内边距，让文本与前缀垂直居中对齐
              contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: inputHeight / 2 - 12),
              prefix: Container(
                height: inputHeight,
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(horizontal: 16),
                margin: const EdgeInsets.only(right: 0), // 消除前缀与输入内容的默认间隙
                decoration: BoxDecoration(
                  color: secondarycolor,
                  borderRadius: borderRadius,
                ),
                child: const Text(
                  "+91",
                  style: TextStyle(color: Colors.white), // 可根据需求调整文本颜色
                ),
              ),
              focusedBorder: const OutlineInputBorder(
                borderSide: BorderSide(color: whiltetextcolor),
                borderRadius: BorderRadius.all(Radius.circular(4)),
              ),
              enabledBorder: const OutlineInputBorder(
                borderSide: BorderSide(color: whiltetextcolor, width: .2),
                borderRadius: BorderRadius.all(Radius.circular(4)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

• 统一圆角：给前缀容器设置与输入框一致的左侧圆角，实现样式无缝衔接
• 高度匹配：固定前缀容器高度与输入框默认高度一致，避免上下错位
• 内边距调整：通过contentPadding让输入文本与前缀垂直居中对齐
• 消除间隙：设置margin: EdgeInsets.only(right: 0)，去掉前缀与输入内容之间的默认间距
• 文本对比：给前缀文本设置对比色（如白色），确保在背景色上清晰可见

内容的提问来源于stack exchange，提问作者Kanhaiya Lal Bohra