带有阴影的 textFormField 边框答案

【问题标题】：textFormField borders with shadows带有阴影的 textFormField 边框
【发布时间】：2021-11-27 04:46:27
【问题描述】：

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

不幸的是，在多次尝试使用 InputBorders、Material 小部件等之后，我一直无法这样做。

有人可以告诉我如何以完全相同的设计实现这样的 textFormFields 吗？

【问题讨论】：

标签： flutter dart user-interface textformfield

【解决方案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),
          ),
        )

【讨论】：

【解决方案2】：

如果您查看TextField docs on Flutter API，就会发现decoration 属性。

边界模糊效果

这个属性是类InputDecoration（阅读its API）。

要添加一个简单的边框，请在border 属性（类Border 和边框的每一侧类BorderSide）中查看下面的代码。

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

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

阴影样式

要制作这些阴影，您可以使用属性contentPadding、enabledBorder 和border。看看这个答案https://stackoverflow.com/a/54195097/9192954。它使用InputDecoration（代码是2019年的，那么borderSide目前不存在，而是使用border）。

希望对你有所帮助。

【讨论】：