Flutter输入框内凹雕刻效果实现求助：Figma设计还原

以下是一个精准实现内凹雕刻（Engraved）效果的输入框组件示例，你可以基于此调整参数匹配你的Figma设计：

import 'package:flutter/material.dart';

class EngravedInputField extends StatelessWidget {
  final String hintText;
  final TextEditingController? controller;
  final TextStyle? hintStyle;
  final TextStyle? textStyle;
  final EdgeInsetsGeometry? padding;
  final BorderRadius? borderRadius;
  final Color? backgroundColor;
  final Color? shadowColorLight;
  final Color? shadowColorDark;

  const EngravedInputField({
    super.key,
    required this.hintText,
    this.controller,
    this.hintStyle,
    this.textStyle,
    this.padding,
    this.borderRadius,
    this.backgroundColor,
    this.shadowColorLight,
    this.shadowColorDark,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: padding ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: backgroundColor ?? const Color(0xFFF0F0F0),
        borderRadius: borderRadius ?? BorderRadius.circular(8),
        boxShadow: [
          // 左上深色阴影，模拟凹入边缘
          BoxShadow(
            color: shadowColorDark ?? const Color(0xFFD0D0D0),
            offset: const Offset(-1, -1),
            blurRadius: 2,
            spreadRadius: 1,
          ),
          // 右下浅色阴影，强化凹入质感
          BoxShadow(
            color: shadowColorLight ?? const Color(0xFFFFFFFF),
            offset: const Offset(1, 1),
            blurRadius: 2,
            spreadRadius: 1,
          ),
        ],
      ),
      child: TextField(
        controller: controller,
        style: textStyle ?? const TextStyle(color: Colors.black87, fontSize: 16),
        decoration: InputDecoration(
          hintText: hintText,
          hintStyle: hintStyle ?? const TextStyle(color: Colors.grey, fontSize: 16),
          border: InputBorder.none,
          contentPadding: EdgeInsets.zero,
        ),
      ),
    );
  }
}

// 使用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.grey[200],
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(20),
          child: EngravedInputField(
            hintText: "请输入内容",
          ),
        ),
      ),
    ),
  ));
}

关键参数调整指南 #

• 阴影组合：通过左上深色阴影+右下浅色阴影的反向搭配，模拟内凹雕刻的视觉效果。可直接替换shadowColorDark/shadowColorLight为Figma中的色值，调整offset/blurRadius/spreadRadius匹配阴影的位置与柔和度。
• 背景色：选择中性浅色调（如示例中的浅灰），避免与页面背景色过于接近，确保阴影效果清晰呈现。
• 边框与内边距：移除TextField默认边框，通过padding参数控制输入框内部文字的位置，匹配设计稿的布局。
• 圆角：使用borderRadius参数设置输入框圆角，完全对齐Figma设计。

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