创建一个具有两个圆角和两个直切角的 Flutter TextFormField

Question

是否可以在 Flutter 中创建一个带有两个圆角的 TextFormField，然后是两个直角，就像您在这张图片中看到的那样？

这可以使用Material 小部件来完成，用于常规形状创建，如demonstrated here。在InputDecoration 小部件中，我没有看到除圆角之外的其他方法，除非这可以通过InputDecorator class 来完成？

我独特的 TextFormField 边框的当前 InputDecoration 常量：

const InputDecoration kInputStringFields = InputDecoration(
  hintStyle: TextStyle(
    fontFamily: kBarlowFont,
    fontSize: 16.0,
  ),
  fillColor: kInputStringFieldColor,
  filled: true,
  contentPadding: EdgeInsets.only(left: 20.0),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.elliptical(8.0, 8.0),
      topRight: Radius.circular(20.0),
      bottomLeft: Radius.circular(20.0),
      bottomRight: Radius.elliptical(0.0, 0.0),
    ),
    borderSide: BorderSide.none,
  ),
);

Answer 1

根据您的link 提供的内容，我尝试了类似的方法，请尝试以下代码，希望对您有所帮助。

 Material(
        clipBehavior: Clip.antiAlias,
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            bottomRight: Radius.circular(20.0),
          ),
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.circular(
              15.0,
            ),
          ),
          child: TextFormField(
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.search),
              hintText: 'Search The Store',
              border: OutlineInputBorder(),
              focusedBorder: InputBorder.none,
            ),
          ),
        ),
      ),

你的结果屏幕喜欢->