How to detect when a TextField is selected in Flutter?

In Flutter, if you want to detect when the user selects a TextField, several common approaches can be employed. Below are some typical methods:

1. Using FocusNode

The most direct method is to use FocusNode to monitor focus changes. Assign a FocusNode to the TextField and add listeners to detect focus transitions. When the user taps the TextField and it gains focus, you can execute the desired actions.

Example code:

dart
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  FocusNode myFocusNode;

  @override
  void initState() {
    super.initState();
    myFocusNode = FocusNode();

    // Add focus listener
    myFocusNode.addListener(() {
      if (myFocusNode.hasFocus) {
        print('TextField is selected');
      }
    });
  }

  @override
  void dispose() {
    // Remove focus listener and release resources
    myFocusNode.removeListener(() {});
    myFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FocusNode Example')),
      body: Center(
        child: TextField(
          focusNode: myFocusNode,
        ),
      ),
    );
  }
}

2. Using TextEditingController

You can also utilize TextEditingController to monitor text field changes. While it is primarily used for handling text input, it can indirectly detect user interactions with the TextField.

Example code:

dart
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TextEditingController myController;

  @override
  void initState() {
    super.initState();
    myController = TextEditingController();

    // Add listener
    myController.addListener(() {
      print('Current TextField content: ${myController.text}');
    });
  }

  @override
  void dispose() {
    // Release controller resources
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TextEditingController Example')),
      body: Center(
        child: TextField(
          controller: myController,
        ),
      ),
    );
  }
}

Summary

Using FocusNode is a direct and effective method for detecting when a TextField is selected, as it directly monitors focus changes. Conversely, TextEditingController is mainly used for text control but can also indirectly detect user interactions with the TextField. Both approaches can be flexibly selected based on specific requirements and context.