如何在FLUTTER中使用Dropdhadow创建圆形TextFormField?

nqwrtyyt  于 2023-04-22  发布在  Flutter
关注(0)|答案(1)|浏览(103)

所以我尝试使用Flutter重新创建我在Figma

中创建的这个UI。我在字段中添加了圆角和阴影,但阴影仍然是矩形的,看起来很糟糕:

我还想改变文本字段的颜色以匹配Figma原型,但我不确定如何改变。
这是我的代码:

Material(
      elevation: 10.0,
      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),
          ),
        ),
      ),
    ),
j1dl9f46

j1dl9f461#

只需将相同的borderRadius添加到Material小部件:

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),
      ),
    ),
  ),
)

相关问题