如何隐藏文本框边框后面的东西？答案

【问题标题】：How to hide the things behind the textfield border?如何隐藏文本框边框后面的东西？
【发布时间】：2020-02-05 23:26:38
【问题描述】：

我正在尝试制作一个带有圆形边框和一些阴影的文本字段，当我使用高程时，它会显示边界外的一些部分，请查看我附加的图像。

Container(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: 30.0,
          child: Material(
            elevation: 2.0,
            shadowColor: Colors.grey,
            child: TextField(
              autofocus: false,
              style: TextStyle(
                  color: Colors.black,
              ),
              decoration: kTextFieldDecorationCircular,
              onChanged: (value){
                searchWord = value;
              },
              onEditingComplete: searchTheWord,
            ),
          ),
        ),
      ),
    );

const kTextFieldDecorationCircular = InputDecoration(
  contentPadding: EdgeInsets.all(2.0),
  filled: true,
  fillColor: Colors.white,
  prefixIcon: Icon(Icons.search, color: Colors.grey,),
  hintText: 'Search',
  hintStyle: TextStyle(color: Colors.grey),
  border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(50.0)),
  ),
);

这是我的代码。提前谢谢你。

【问题讨论】：

你用什么来实现海拔？你能分享一下周围的小部件吗？
@HannesKüttner 我只想显示一个具有如图所示边框半径的文本字段并添加一些阴影，但是您没有看到文本字段的某些部分显示在边框之外。
要回答您的问题，了解如何创建阴影非常重要，因为它不是您输入装饰的一部分。
@HannesKüttner 我已经更新了代码，请看一下。

标签： flutter hide textfield flutter-layout

【解决方案1】：

您可以将其添加到您的 Material 小部件中：

borderRadius: BorderRadius.all(Radius.circular(50.0)),

【讨论】：