Flutter for web，无法输入文本字段

Posted 2023-02-23

【中文标题】Flutter for web，无法输入文本字段

【英文标题】：Flutter for web, can't type into a TextField

【发布时间】：2019-11-23 05:25:16

【问题描述】：

所以我正在为 web 应用程序创建一个颤振。有点冒险，但我真的只想要一个初始原型，希望在我需要生产准备好的时候它至少处于测试阶段。

无论如何，我正在尝试创建一个登录页面，但实际上我无法在 TextFiled 中输入任何内容。

我尝试添加/删除 TextEdditingController 和输入装饰。我也尝试过 TextField 和 TextFormField

Widget loginWidget() 
    return Container(
      width: 650,
      child: Card(
        margin: EdgeInsets.all(5.0),
        color: UiColors.CardBlue,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                MaterialButton(
                  minWidth: 300,
                  color: UiColors.CardBlue,
                  child: Text("Login", style: TextStyle(color: Colors.white),),
                  onPressed: (), // do nothing, this is already the login
                ),
                MaterialButton(
                  minWidth: 300,
                  elevation: 10,
                  color: UiColors.ButtonBlue,
                  child: Text("Register", style: TextStyle(color: Colors.white),),
                  onPressed: toggleLogin,
                )
              ],
            ),
            TextField(
              controller: usernameController,
              decoration: InputDecoration(
                border: InputBorder.none,
                labelText: "Email Address",
                hintText: "[e-mail]"
              ),
            )
          ],
        ),
      ),
    );
   

编辑：这似乎只影响 firefox，适用于 chrome

【参考方案1】：

在flutter_web的github repo中，它说

“开发工作流程目前仅适用于 Chrome。” https://github.com/flutter/flutter_web

目前，您的原型开发似乎仅限于 chrome 浏览器。

【讨论】：

@Alex 我在 Flutter Web 中创建了登录屏幕。设计方面都很完美，但我无法输入文本字段。当我输入键盘时，它不会在文本字段中更新。

和 Magesh 我遇到了同样的问题。是的，我在谷歌浏览器工作

我建议大家在 Flutter 的 github 上搜索问题板，寻找遇到相同​​情况的人。我不在 Flutter 的团队工作，也没有任何关于您的代码如何使用 TextField 小部件的上下文。我不能再帮忙了。

【参考方案2】：

我知道已经晚了，但我会回答这个以供他人使用。 Flutter 目前正在完善其 web 框架。因此，TextField 不起作用的事实是由于 flutter_web 的版本。因此，我建议您在 pubspec.yaml 文件中使用来自 github 的旧问题，如下所示：

name: newweb
description: An app built using Flutter for web

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any
  provider: any
  rxdart: ^0.22.0
  http: ^0.12.0+2
  json_annotation: ^2.4.0
  intl: 0.15.8
  firebase: any


dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0
  pedantic: ^1.0.0
  json_serializable: ^3.0.0
  test: any

flutter:
  uses-material-design: true

dependency_overrides:
  flutter_web:
    git:
      ref: cc38319
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui
  provider:
    git:
      url: https://github.com/kevmoo/provider
      ref: flutter_web

【参考方案3】：

我尝试了所有解决方案，但无法解决。无论我在 TextField、TextFormField 或 autocomplete_textfield 中输入什么，这些字符都是不可见的。

我通过将小部件打开为showGeneralDialog() 而不是使用Navigator.of(...) 来修复它。这是示例代码。

await showGeneralDialog(
    barrierColor: AppStyle.primaryColor.withOpacity(0.3),
    transitionBuilder: (context, a1, a2, widget) 
      return Transform.scale(
        scale: a1.value,
        child: Opacity(opacity: a1.value, child: WidgetScreenToOpen()),
      );
    ,
    transitionDuration: Duration(milliseconds: 500),
    barrierDismissible: true,
    barrierLabel: 'Label',
    context: context,
    pageBuilder: (context, animation1, animation2) 
      return Container();
    ).then((result) 
  return result;
);