TextField UpperCase function does not exist or does not work?

Widgets & Design

How can I make my textField uppercase only? Making a widget with this

       inputFormatters: [
          TextInputFormatter.withFunction((oldValue, newValue) {
            return TextEditingValue(
              text: newValue.text.toUpperCase(),
              selection: newValue.selection,
            );"

it already works with just this text: newValue.text.toUpperCase(),. But why doesn't it work natively? How do you have it like in the image?
If anyone knows how I can do UpperCase in a textfield I would be grateful.

What have you tried so far?
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class UpperCaseTextField extends StatefulWidget {
  const UpperCaseTextField({
    super.key,
    this.width,
    this.height,
    this.hintText,
    this.initialValue,
  });

  final double? width;
  final double? height;
  final String? hintText;
  final String? initialValue;

  @override
  State<UpperCaseTextField> createState() => _UpperCaseTextFieldState();
}

class _UpperCaseTextFieldState extends State<UpperCaseTextField> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.initialValue);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width ?? 230.0,
      height: widget.height,
      child: TextFormField(
        controller: _controller,
        autofocus: false,
        textCapitalization: TextCapitalization.characters,
        textInputAction: TextInputAction.next,
        obscureText: false,
        decoration: InputDecoration(
          isDense: true,
          hintText: widget.hintText,
          hintStyle: TextStyle(
            fontFamily: 'Poppins',
            color: Color(0xFF0D121D).withOpacity(0.5),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xFFBFBFBF),
              width: 1.0,
            ),
            borderRadius: BorderRadius.circular(8.0),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xFF020562),
              width: 1.0,
            ),
            borderRadius: BorderRadius.circular(8.0),
          ),
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xFFE21C3D),
              width: 1.0,
            ),
            borderRadius: BorderRadius.circular(8.0),
          ),
          focusedErrorBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xFFE21C3D),
              width: 1.0,
            ),
            borderRadius: BorderRadius.circular(8.0),
          ),
        ),
        style: TextStyle(
          fontFamily: 'Poppins', 
          color: Color(0xFF0D121D),
          letterSpacing: 0.0,
        ),
        inputFormatters: [
          TextInputFormatter.withFunction((oldValue, newValue) {
            return TextEditingValue(
              text: newValue.text.toUpperCase(),
              selection: newValue.selection,
            );
          }),
          FilteringTextInputFormatter.allow(RegExp('[a-zA-Z0-9]')),
        ],
      ),
    );
  }
}

I built this. But I don't know how to make it behave like a FF textfield so that the other widgets recognize it.

Did you check FlutterFlow's Documentation for this topic?
Yes
3
2 replies