Question

因此，我正在为Web应用程序创建混乱状态。有点冒险，但是我真的只想要一个初始原型，希望当我需要准备生产的产品时，至少在beta中。

无论如何，我试图创建一个登录页面，但实际上无法在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: "user@email.com"
              ),
            )
          ],
        ),
      ),
    );
  }

编辑：这似乎只影响Firefox，可在chrome中使用

Answer 1

在flutter_web的github仓库中，它说

“目前，开发工作流程仅适用于Chrome。” 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;
});

Web Flutter，无法输入TextField

3 个答案: