如何在Flutter的TextField中设计内嵌按钮

直接使用InputDecoration的suffix属性即可实现需求，以下是修改后的完整代码：

const SizedBox(height: 10),
TextField(
  decoration: InputDecoration(
    hintText: "Code",
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(30),
      borderSide: BorderSide.none,
    ),
    fillColor: Colors.grey.withOpacity(0.3),
    filled: true,
    prefixIcon: const Icon(Icons.code),
    // 内嵌"Get a Code"按钮
    suffix: TextButton(
      onPressed: () {
        // 在此处编写获取验证码的逻辑
        print("触发获取验证码操作");
      },
      style: TextButton.styleFrom(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        backgroundColor: Colors.blue,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30),
        ),
      ),
      child: const Text(
        "Get a Code",
        style: TextStyle(color: Colors.white, fontSize: 12),
      ),
    ),
    // 调整内边距避免输入内容与按钮重叠
    contentPadding: const EdgeInsets.symmetric(vertical: 16),
  ),
  obscureText: true,
),

关键改动说明 #

• 用suffix替代suffixIcon：suffix支持自定义Widget，更适合实现带文字的内嵌按钮
• 统一圆角样式：按钮的borderRadius与TextField保持一致，保证视觉统一
• 调整内边距：通过contentPadding避免输入文本和按钮区域重叠
• 按钮样式自定义：可根据需求修改按钮背景色、文字大小、内边距等参数

内容的提问来源于stack exchange，提问作者Rommel S. Pabustan