Flutter Web：TextFormField 在 Microsoft Edge 上显示另一个 suffixIcon答案

【问题标题】：Flutter Web: TextFormField shows another suffixIcon on Microsoft EdgeFlutter Web：TextFormField 在 Microsoft Edge 上显示另一个 suffixIcon
【发布时间】：2021-10-19 01:45:44
【问题描述】：

我在 Microsoft Edge[Edge(web-javascript] 上测试我的登录表单，我的TextFormField 上从未添加过另一个可交互的可见性按钮。当我在 Chrome 上打开它时，它没有出现。

根据我的测试，它仅在obscureText == true 并且表单字段上有任何值时才会出现。

这引发了我另一个问题：这只是一个调试问题吗？既然 Flutter Web 是一个 PWA，它在任何浏览器上的行为不应该都一样吗？

在 Microsoft Edge 上录制的 Gif。

我的代码：

bool isObscured = true;

InputDecoration loginFormFieldDecoration = InputDecoration(
  constraints: const BoxConstraints(maxWidth: 400, maxHeight: 70),
  hintStyle: hintTextLoginFormFieldStyle,
  border: OutlineInputBorder(
      borderSide: BorderSide(color: cinzaEscuro, width: 1.0), borderRadius: BorderRadius.circular(12)),
  focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: cinzaEscuro, width: 1.0), borderRadius: BorderRadius.circular(12)),
  errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red[400]!, width: 1.0), borderRadius: BorderRadius.circular(12)),
  focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red[400]!, width: 1.0), borderRadius: BorderRadius.circular(12)),
);

TextFormField(
  controller: senha,
  validator: (value) {
    if (value!.isEmpty) {
      return "Insira uma senha";
    }
  },
  cursorColor: azul,
  style: formFieldValueStyle,
  keyboardType: TextInputType.visiblePassword,
  obscureText: isObscured,
  decoration: loginFormFieldDecoration.copyWith(
      prefixIcon: Icon(
        Icons.lock,
        color: cinzaEscuro,
      ),
      suffixIcon: IconButton(
          splashRadius: 0.1,
          onPressed: () {
            setState(() {
              isObscured = !isObscured;
            });
          },
          icon: Icon(
            isObscured ? Icons.visibility_off : Icons.visibility,
            color: isObscured ? cinzaEscuro : azul,
          )),
      hintText: "Digite a sua senha"),
)

版本：

Flutter 2.4.0-1.0.pre.82 • channel master • https://github.com/flutter/flutter.git
Framework • revision 5cda761161 (6 weeks ago) • 2021-07-05 21:46:01 -0400
Engine • revision 60ff03819c
Tools • Dart 2.14.0 (build 2.14.0-280.0.dev)
Microsoft Edge version 92.0.902.73

【问题讨论】：

你想显示和隐藏密码正确吗？
没有。正如您在提供的代码中看到的那样，我已经有了一个功能正常的显示/隐藏密码按钮。问题是在 Microsoft Edge 上出现了另一个 suffixIcon。
能否添加flutter版本详情。
- Flutter 2.4.0-1.0.pre.82 • 频道主 • github.com/flutter/flutter.git - 框架 • 修订版 5cda761161（6 周前） • 2021-07-05 21:46:01 -0400 -引擎 • 修订版 60ff03819c - 工具 • Dart 2.14.0（内部版本 2.14.0-280.0.dev）
我应该在 Github 上打开一个问题吗？

标签： flutter flutter-layout flutter-web

【解决方案1】：

经过一番研究，我在 github 上发现了一个关于这个问题的 open issue。还有一种解决方法。

见this issue.

【讨论】：