问题

I'm here to help with the translation. Here's the translated code portion:

我试图使用Flutter重新创建我在Figma中创建的UI [![点击这里查看图片描述][1]][1]。我给输入框添加了圆角和阴影，但阴影仍然是矩形的，看起来很糟糕： [![点击这里查看图片描述][2]][2]

我还想要更改文本框的颜色以匹配Figma原型，但我不太确定如何做。

这是我的代码：

    Material(
          elevation: 10.0,
          child: TextFormField(
            decoration: InputDecoration(
              hintText: '邮箱',
              hintStyle: const TextStyle(
                  fontSize: 15.0,
                  color: Color(0xffA9A9A9),
                  fontWeight: FontWeight.w500),
              contentPadding: const EdgeInsets.all(15),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
              ),
            ),
          ),
        ),

Please let me know if you need any further assistance.

<details>
<summary>英文:</summary>

So I&#39;m trying to recreate this UI I created in Figma [![enter image description here][1]][1] using Flutter. I added rounded corners to the field and a drop shadow, but the drop shadow is still rectangular and it looks awful: [![enter image description here][2]][2]

I also want to change the color of the textfield to match the Figma prototype but I&#39;m not sure how.

This is my code:

    Material(
          elevation: 10.0,
          child: TextFormField(
            decoration: InputDecoration(
              hintText: &#39;EMAIL&#39;,
              hintStyle: const TextStyle(
                  fontSize: 15.0,
                  color: Color(0xffA9A9A9),
                  fontWeight: FontWeight.w500),
              contentPadding: const EdgeInsets.all(15),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
              ),
            ),
          ),
        ),


  [1]: https://i.stack.imgur.com/rpkAS.jpg
  [2]: https://i.stack.imgur.com/2L3bs.jpg

</details>


# 答案1
**得分**: 1

Just add the same "borderRadius" to the "Material" widget too:

Material(
elevation: 10.0,
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),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
)

<details>
<summary>英文:</summary>

Just add the same ````borderRadius```` to the ````Material```` widget too:

Material(
elevation: 10.0,
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),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
)

</details>