我有一个四舍五入的文本字段.它工作得很好,但当用户点击它时,会出现灰色背景.我如何才能禁用飞溅效果?

以下是我的代码和结果:

        new Container(
          margin: const EdgeInsets.only(left: 30.0, top: 60.0, right: 
         30.0),
          height: 40.0,
          decoration: new BoxDecoration(

          color: Colors.white,

            borderRadius: new BorderRadius.all(new Radius.circular(25.7))
          ),

          child: new Directionality(

              textDirection: TextDirection.ltr,
              child: new TextField(
                controller: null,
                autofocus: false,

                style:
                    new TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
                decoration: new InputDecoration(
                  filled: true,

                  fillColor: Colors.white,
                  hintText: 'Username',
                  contentPadding: const EdgeInsets.only(
                      left: 14.0, bottom: 8.0, top: 8.0),
                  focusedBorder: OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.white),
                    borderRadius: new BorderRadius.circular(25.7),
                  ),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: new BorderSide(color: Colors.white),
                    borderRadius: new BorderRadius.circular(25.7),
                  ),
                ),
              ))),

enter image description here

推荐答案

它看起来像是由文本字段上的飞溅效果引起的.我无法找到禁用该特定小部件的方法,但您可以通过将TextField包装在Theme小部件中并将splashColor设置为透明来使其透明:

Theme(
  data: Theme.of(context).copyWith(splashColor: Colors.transparent),
  child: TextField(
    autofocus: false,
    style: TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
    decoration: InputDecoration(
      filled: true,
      fillColor: Colors.white,
      hintText: 'Username',
      contentPadding:
          const EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.white),
        borderRadius: BorderRadius.circular(25.7),
      ),
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.white),
        borderRadius: BorderRadius.circular(25.7),
      ),
    ),
  ),
);

Flutter相关问答推荐

创建后检索FiRestore文档ID

Android Studio中的Ffltter&;Couchbase:进程C:/Program Files/Git/bin/bash以非零退出值35结束

当键盘在抖动中打开时,如何才能看到包装在SingleChildScrollView中的列中的最后一个小工具?

如何使用flutter_local_notification包处理通知操作?

如何在抖动中将PNG图像转换为WebP

Flutter :执行com.android.build.gradle.internal.tasks.MergeNativeLibsTask$MergeNativeLibsTaskWorkAction时出现故障

BaseInputfield和Textfield有什么不同?

Ffltter Firebase向用户添加公司

Flutter 中的 setState() 内部是如何工作的?

使用 forLoops 在 Dart 中进行单元测试会返回 stackoverflow

使用 flutter_svg 在 flutter 中的 Canvas 上绘制 SVG 图像

如何使Flutter 边框宽度在外面而不是在里面?

Flutter如何从深入嵌套的小部件中打开抽屉?

如何计算 Firestore 集合中的文档数量?

如何在android中 Select 任何文件/文件路径 - Flutter

Flutter 自定义对齐

Flutter blue plus 库,当try 从 esp32 驱动程序获取 PlatformException 时读取特性

Flutter Bloc 使用 Cubit 监听流和emits 状态

仅使用 Flutter 在本地环境中托管 Web 服务器

Flutter Bloc Todo 示例 - 收听存储库中的单个 todo