Flutter 如何实现带阴影边框的TextFormField输入框

以下代码可直接实现你需要的输入框效果，可根据设计稿参数灵活调整：

// 完整自定义输入框组件
import 'package:flutter/material.dart';

class CustomInputField extends StatelessWidget {
  final String label;
  final bool isPassword;
  final TextInputType? inputType;
  final String? Function(String?)? validator;
  final TextEditingController? controller;

  const CustomInputField({
    super.key,
    required this.label,
    this.isPassword = false,
    this.inputType,
    this.validator,
    this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      obscureText: isPassword,
      keyboardType: inputType,
      validator: validator,
      style: const TextStyle(
        fontSize: 16,
        color: Colors.black87,
      ),
      decoration: InputDecoration(
        labelText: label,
        // 未聚焦时标签样式
        labelStyle: const TextStyle(
          color: Colors.grey,
          fontSize: 16,
        ),
        // 聚焦后上浮标签样式
        floatingLabelStyle: const TextStyle(
          color: Colors.deepPurple,
          fontSize: 14,
        ),
        // 未激活状态边框
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Colors.grey, width: 1),
        ),
        // 聚焦状态边框
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Colors.deepPurple, width: 2),
        ),
        // 校验错误状态边框
        errorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Colors.red, width: 1),
        ),
        // 错误状态下聚焦的边框
        focusedErrorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Colors.red, width: 2),
        ),
        // 输入框内边距
        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
        // 标签上浮规则：有输入或聚焦时上浮
        floatingLabelBehavior: FloatingLabelBehavior.auto,
      ),
    );
  }
}

// 调用示例
class UseExample extends StatelessWidget {
  const UseExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomInputField(
              label: "用户名",
              inputType: TextInputType.name,
              validator: (value) {
                if (value?.isEmpty ?? true) return "请输入用户名";
                return null;
              },
            ),
            const SizedBox(height: 18),
            CustomInputField(
              label: "密码",
              isPassword: true,
            ),
          ],
        ),
      ),
    );
  }
}

常见适配调整点 #

• 如需修改圆角大小，调整BorderRadius.circular的参数即可
• 如需替换边框、标签的颜色，修改对应BorderSide和TextStyle的color参数即可
• 如需添加前缀/后缀图标，在InputDecoration中增加prefixIcon、suffixIcon属性即可
• 如需调整输入区域大小，修改contentPadding的数值即可

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