flutterdartflutter-textformfield

error in the textformfield in Flutter web, keyboard does not work


I'm having an issue with my Flutter Web system. My TextFormField fields are not working correctly in production. They worked perfectly before, but now, on version 3.24.3, when I try to type something in the text field, nothing happens, and when I manage to type, the 'space' key doesn't work properly.

This only occurs after the build, as everything works fine in debug mode. I'm using the following build command:

flutter build web --no-tree-shake-icons --release --web-renderer auto I'm using a custom widget for the text fields, as shown in the code below:

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

Everything works fine in debug mode, but in production, the TextFormField fields are not responding as expected. Does anyone know what could be causing this?

I tried several approaches, including:

I checked if there were any differences between the debug and release modes in Flutter Web, and if something was interfering with the TextFormField functionality. I tested the build command with different web renderer options, such as --web-renderer html and --web-renderer canvaskit, to see if the issue was related to the renderer. I updated packages and dependencies to make sure everything was at the latest version. I reviewed the custom widget for the TextFormField to ensure it wasn’t interfering with the text field’s behavior. I tested on different browsers, thinking it might be browser-specific. What I expected: That the TextFormField would behave the same way in production as it does in debug mode, allowing me to type text and use the 'space' key correctly.


Solution

  • I had the same problem and the solution was to delete de web folder of the project and recreate it with flutter create --platforms=web. Be careful if you made any customizations in the web project, it will be lost. You should make a backup of the folder and after the creation customize it again.