Flutter Web 中的文本表单字段错误，键盘无法使用

Question

我的 Flutter Web 系统出现问题。我的

TextFormField

字段在生产中无法正常工作。它们以前工作得很好，但现在，在版本

3.24.3

上，当我尝试在文本字段中键入内容时，没有任何反应，并且当我设法键入时，“空格”键无法正常工作。

这只发生在构建之后，因为在调试模式下一切正常。我正在使用以下构建命令：

flutter build web --no-tree-shake-icons --release --web-renderer auto 

我正在为文本字段使用自定义小部件，如下面的代码所示：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../../../core/theme/provider/theme_provider.dart';`

class TextFieldBorderWidget extends StatelessWidget {
  final TextEditingController? textController;
  final String? label;
  final String? hintText;
  final int? maxLines;
  final Function(String)? onChanged;
  final double? width;
  final double? height;
  final String? initialValue;
  final String? Function(String?)? validator;
  final TextInputType? keyboardType;
  final List<TextInputFormatter>? inputFormatters;
  final Widget? prefixIcon;
  final bool? enabled;
  final bool obscureText;
  final Widget? suffixIcon;
  final void Function(String)? onFieldSubmitted;

  const TextFieldBorderWidget({
    super.key,
    this.textController,
    this.label,
    this.hintText,
    this.maxLines,
    this.onChanged,
    this.width,
    this.height,
    this.initialValue,
    this.validator,
    this.keyboardType,
    this.inputFormatters,
    this.prefixIcon,
    this.enabled,
    this.obscureText = false,
    this.suffixIcon,
    this.onFieldSubmitted,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: TextFormField(
        obscureText: obscureText,
        enabled: enabled,
        validator: validator,
        keyboardType: keyboardType,
        inputFormatters: inputFormatters,
        initialValue: initialValue,
        style: TextStyle(
          fontSize: 13,
          letterSpacing: 0.1,
          fontWeight: FontWeight.w400,
          color: colorProvider(context: context, lightColor: Colors.black, darkColor: Colors.white),
        ),
        onFieldSubmitted: onFieldSubmitted,
        onChanged: onChanged,
        controller: textController,
        decoration: InputDecoration(
          prefixIcon: prefixIcon,
          suffixIcon: suffixIcon,
          contentPadding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
          hintText: hintText ?? label,
          hintStyle: TextStyle(
            color: colorProvider(context: context, lightColor: Colors.grey.shade400, darkColor: Colors.white70),
            fontSize: 12,
            letterSpacing: 0.1,
          ),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6),
            borderSide: const BorderSide(),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6),
            borderSide: BorderSide(
              color: Colors.grey.shade400,
            ),
          ),
          filled: true,
          fillColor: colorProvider(
            context: context,
            lightColor: Colors.white,
            darkColor: const Color.fromRGBO(20, 18, 24, 1),
          ),
        ),
        maxLines: maxLines ?? 1,
      ),
    );
  }
}

在调试模式下一切正常，但在生产中，

TextFormField

字段未按预期响应。有谁知道这可能是什么原因造成的？

我尝试了几种方法，包括：

我检查了 Flutter Web 中的调试和发布模式之间是否存在任何差异，以及是否有某些东西干扰了

TextFormField

功能。 我使用不同的 Web 渲染器选项（例如

--web-renderer html

和

--web-renderer canvaskit

）测试了构建命令，以查看问题是否与渲染器有关。 我更新了软件包和依赖项，以确保一切都是最新版本。 我检查了

TextFormField

的自定义小部件，以确保它不会干扰文本字段的行为。 我在不同的浏览器上进行了测试，认为这可能是特定于浏览器的。 我的期望：TextFormField 在生产中的行为方式与在调试模式下的行为方式相同，允许我正确键入文本并使用“空格”键。

Answer 1

我遇到了同样的问题，解决方案是删除项目的 de web 文件夹并使用

flutter create --platforms=web

重新创建它。 请小心，如果您在 Web 项目中进行了任何自定义，它将会丢失。您显示对文件夹进行备份，并在创建后再次对其进行自定义。