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.
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.