带有阴影的 textFormField 边框

Question

我是 Flutter 新手。我刚刚看到这个漂亮的设计，因此我一直在尝试实现如下所示的东西 -

不幸的是，在使用 InputBorders、Material 小部件等进行了大量尝试后，我一直无法这样做

有人可以告诉我我们如何使用完全相同的设计来实现这样的 textFormField 吗？

Answer 1

你可以使用neumorphic包，你可以使用这个包达到类似的效果。

 Neumorphic(
          margin: EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 4),
          style: NeumorphicStyle(
            depth: NeumorphicTheme.embossDepth(context),
            boxShape: NeumorphicBoxShape.stadium(),
          ),
          padding: EdgeInsets.symmetric(vertical: 14, horizontal: 18),
          child: TextField(
            onChanged: this.widget.onChanged,
            controller: _controller,
            decoration: InputDecoration.collapsed(hintText: this.widget.hint),
          ),
        )

Answer 2

如果您查看 TextField docs on Flutter API，则有 decoration 属性。

边框模糊效果

这个属性就是classInputDecoration（读its API）。

添加简单的边框，在border属性(classesBorder and for each side of the border the class BorderSide)看下面的代码。

Border(
      top: BorderSide(width: 16.0, color: Colors.lightBlue.shade50),
      bottom: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
),

Border class有一个color 属性，你可以用它和Colors.blue[50]做一个模糊的效果或者更高的数字。阅读 Colors class.

阴影样式

要制作这些阴影，您可以使用属性 contentPadding、enabledBorder 和 border。看看这个答案。它使用InputDecoration（代码来自2019年，然后borderSide目前不存在，而是使用border）。

希望对您有所帮助。

带有阴影的 textFormField 边框

textFormField borders with shadows

user-interface

dart

flutter

textformfield