时间戳

首页 > 解决方案 > 颤动中的透明文本字段

flutter - 颤动中的透明文本字段

问题描述

我正在尝试实现透明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,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

标签： flutterflutter-layout

解决方案

使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,
        ),
      ),
    ),
  ),
);

推荐阅读