如何设计像这样的颤抖的Textfield边框

Question

我想像这样设计Flutter文本字段，任何人都可以帮助我。

Image Reference

Answer 1

将“文本字段”包装在“主题”小部件和“材质”小部件中

增加阴影效果的高度

         Theme(
          data: ThemeData(
            primaryColor: Colors.black,
            primaryColorDark: Colors.black,
          ),
          child: Material(
            borderRadius: const BorderRadius.all(Radius.circular(18)),
            elevation: 5,
            shadowColor: Color(0XFF000000),
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: const BorderRadius.all(Radius.circular(18)),
                ),
              ),
            ),
          ),
        ),

它看起来像这样

Answer 2

您可以使用容器将其扭曲并设置

decoration: Boxdecoration(
border: ...
borderRadius: ...
boxShadow: ...
),

Answer 3

您可以将InputDecoration.collapsed用于TextField，并用这样的容器包装它：

Container(
        height: 42,
        child: Center(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
            child: TextField(
              decoration: InputDecoration.collapsed(hintText: "Your Hint", hintStyle: TextStyle(color: Colors.black,fontWeight: FontWeight.bold)),
              textAlign: TextAlign.right,
            ),
          ),
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(18)),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.75),
              spreadRadius: 3,
              blurRadius: 0,
              offset: Offset(2, 2), // changes position of shadow
            ),
          ],
        ),
      )

它看起来像这样：