颤动中的透明文本字段答案

【问题标题】：Transparent TextField in flutter颤动中的透明文本字段
【发布时间】：2021-04-03 02:56:42
【问题描述】：

我正在尝试实现透明的TextField（我正在复制 Instagram 故事编辑器 UI）。但是，我得到了一个背景颜色为白色的 TextField。如何去除白色背景并使TextField 透明？

这是我的代码：

 @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: widget.onTap,
          child: Container(
            color: Colors.black.withOpacity(0.5),
          ),
        ),   
        Center(
          child: Material(
            child: Container(
              color: Colors.transparent,
              child: TextField(
                focusNode: myFocusNode,
                cursorColor: Colors.blueAccent,
                decoration: InputDecoration(
                  fillColor: Colors.transparent,
                  filled: true,
                  border: InputBorder.none,
                  contentPadding: EdgeInsets.only(
                    left: 15,
                    bottom: 11,
                    top: 11,
                    right: 15,
                  ),
                ),
              ),
            ),
          ),
        )

这是上面代码的结果：

我希望它看起来像：

更新： 删除Material 小部件和Container 小部件并在顶部添加Scaffold 解决了问题❤️

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: widget.onTap,
            child: Container(
              color: Colors.black.withOpacity(0.5),
            ),
          ),
          Center(
            child: TextField(
              focusNode: myFocusNode,
              cursorColor: Colors.blueAccent,
              decoration: InputDecoration(
                fillColor: Colors.transparent,
                filled: true,
                border: InputBorder.none,
                contentPadding: EdgeInsets.only(
                  left: 15,
                  bottom: 11,
                  top: 11,
                  right: 15,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

使Material 透明（你也不需要Container）：

https://www.dartpad.dev/5c0168a92f89ab40b809d2e92c5d51c6?null_safety=true

Center(
  child: Material(
    color: Colors.transparent,
    child: TextField(
      cursorColor: Colors.blueAccent,
      decoration: InputDecoration(
        fillColor: Colors.transparent,
        filled: true,
        border: InputBorder.none,
        contentPadding: EdgeInsets.only(
          left: 15,
          bottom: 11,
          top: 11,
          right: 15,
        ),
      ),
    ),
  ),
);

【讨论】：

【解决方案2】：

您不需要用Container 和Material 包装TextField。 Container 是为您的TextField 添加白色背景的那个。你只需要设置TextField的边框属性：

TextField(
   decoration: InputDecoration(
       border: InputBorder.none,
   ),
)

这里是InputBorder 到InputDecoration 的边框属性的可用选项的参考（最好阅读文档中的所有属性）：https://api.flutter.dev/flutter/material/InputDecoration/border.html

【讨论】：