Flutter中如何创建带圆角与阴影的TextFormField？

问题1：阴影为矩形的修复 #

你用Material包裹TextFormField时，Material默认是矩形形状，导致阴影无法跟随输入框的圆角。只需给Material添加与输入框一致的圆角形状即可：

• 为Material设置shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30))，让阴影区域和输入框圆角完全匹配。

问题2：修改TextFormField颜色匹配原型 #

要调整输入框的背景色、边框色等，在InputDecoration里做以下设置：

• 开启filled: true，通过fillColor设置输入框背景色；
• 分别配置border、focusedBorder、enabledBorder等不同状态的边框样式，保持圆角一致并替换成原型对应的颜色；
• 按需调整hintStyle里的文字颜色或其他样式。

完整修改代码 #

Material(
  elevation: 10.0,
  // 给Material设置圆角，让阴影变成圆角
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(30),
  ),
  child: TextFormField(
    decoration: InputDecoration(
      hintText: 'EMAIL',
      hintStyle: const TextStyle(
          fontSize: 15.0,
          color: Color(0xffA9A9A9),
          fontWeight: FontWeight.w500),
      contentPadding: const EdgeInsets.all(15),
      // 开启填充并设置背景色
      filled: true,
      fillColor: Colors.white, // 替换为Figma原型的背景色
      // 配置各种状态下的边框，保持圆角并修改颜色
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
        borderSide: const BorderSide(color: Color(0xffE0E0E0)), // 原型默认边框色
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
        borderSide: const BorderSide(color: Color(0xff2196F3)), // 聚焦时的边框色
      ),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
        borderSide: const BorderSide(color: Color(0xffE0E0E0)), // 正常状态边框色
      ),
    ),
  ),
),

补充说明 #

• 将代码中的颜色值替换为你Figma原型里对应的十六进制颜色代码；
• 若不需要边框，可把borderSide设置为BorderSide.none；
• elevation数值可根据需求调整阴影的深浅程度。

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