Flutter TextField内容始终大写及onChanged事件防抖实现咨询

Hey there! I totally get where you're coming from—these are two super common tweaks for TextField that don't always pop up in basic tutorials. Let's break them down one by one:

Flutter has a built-in formatter that handles this perfectly, no need to roll your own logic. Just use UpperCaseTextInputFormatter from the flutter/material.dart package. It automatically converts any lowercase input (including pasted text) to uppercase in real time, and the underlying text value will also be uppercase.

Here's a quick example:

import 'package:flutter/material.dart';

TextField(
  inputFormatters: const [
    UpperCaseTextInputFormatter(), // This does all the heavy lifting
  ],
  decoration: const InputDecoration(
    labelText: "Uppercase Only",
    hintText: "Type or paste anything here",
  ),
)

If you ever need more control (like only converting certain characters), you could write a custom TextInputFormatter, but the built-in one covers 99% of use cases.

The default onChanged triggers immediately on every keystroke, which is annoying for things like API calls or expensive state updates. To fix this, we'll use a Timer to delay execution until the user stops typing for 500ms.

First, define a Timer variable in your state class (this needs to be a StatefulWidget since we're managing state):

class MyDebounceTextField extends StatefulWidget {
  const MyDebounceTextField({super.key});

  @override
  State<MyDebounceTextField> createState() => _MyDebounceTextFieldState();
}

class _MyDebounceTextFieldState extends State<MyDebounceTextField> {
  Timer? _debounceTimer; // Holds our pending timer

  // Always cancel the timer when the widget is disposed to avoid memory leaks
  @override
  void dispose() {
    _debounceTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (value) {
        // Cancel the previous timer if the user types again before 500ms
        _debounceTimer?.cancel();
        // Start a new timer that triggers after 500ms of inactivity
        _debounceTimer = Timer(const Duration(milliseconds: 500), () {
          // This code runs ONLY after the user stops typing for 500ms
          debugPrint("Debounced input: $value");
          // Add your logic here—like updating state, calling an API, etc.
        });
      },
      decoration: const InputDecoration(
        labelText: "Debounced Input",
        hintText: "Type something...",
      ),
    );
  }
}

Combine Both Features #

If you want a TextField that does both uppercase and debounce, just merge the two code snippets:

class UppercaseDebounceField extends StatefulWidget {
  const UppercaseDebounceField({super.key});

  @override
  State<UppercaseDebounceField> createState() => _UppercaseDebounceFieldState();
}

class _UppercaseDebounceFieldState extends State<UppercaseDebounceField> {
  Timer? _debounceTimer;

  @override
  void dispose() {
    _debounceTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      inputFormatters: const [UpperCaseTextInputFormatter()],
      onChanged: (value) {
        _debounceTimer?.cancel();
        _debounceTimer = Timer(const Duration(milliseconds: 500), () {
          debugPrint("Final uppercase input: $value");
          // Your delayed logic here
        });
      },
      decoration: const InputDecoration(
        labelText: "Uppercase + Debounce",
        border: OutlineInputBorder(),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Harun