Flutter for web，无法输入 TextField

Question

所以我正在为 Web 应用程序创建 flutter。有点冒险，但我真的只想要一个初始原型，希望到我需要一些产品准备就绪时它至少处于测试阶段。

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

我试过 adding/removing 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: "user@email.com"
              ),
            )
          ],
        ),
      ),
    );
  }

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

Answer 1

在 flutter_web 的 github 回购中，它说

"The development workflow is only designed to work with Chrome at the moment." https://github.com/flutter/flutter_web

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

Answer 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

Answer 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;
});

Flutter for web，无法输入 TextField

Flutter for web, can't type into a TextField

flutter

flutter-web