Flutter text field clear button

Question

I'm trying to build a search field with a clear button who appear when i type some text in. But i tried a ternary condition to display my button, it never appear.

Thanks in advance

Here is my class:

class SearchField extends StatefulWidget {
    @override
    _SearchFieldState createState() => _SearchFieldState();
}

class _SearchFieldState extends State<SearchField> {
    TextEditingController _controller = TextEditingController();

    @override
    Widget build(BuildContext context) {
        return TextField(
            controller: _controller,
            style: const TextStyle(
                color: Colors.white,
            ),
            decoration: InputDecoration(
                labelText: 'Search',
                labelStyle: TextStyle(
                    color: Color.fromARGB(255, 255, 255, 255).withOpacity(0.4),
                    fontFamily: 'Inter',
                ),
                border: InputBorder.none,
                suffixIcon: _controller.text.isEmpty //my clear button
                                ? null
                                : IconButton(
                                        icon: Icon(Icons.clear),
                                        onPressed: () {
                                            setState(() {
                                                _controller.clear();
                                            });
                                        },
                                    )
            ),
            onEditingComplete: () {
                // TODO: search contact with _controller.text
                FocusScope.of(context).unfocus();
            },
        );
    }
}

Answer 1

I found the answer just after asking the question:

I had to add onChanged on my text, like below, and it works:

class SearchField extends StatefulWidget {
  @override
  _SearchFieldState createState() => _SearchFieldState();
}

class _SearchFieldState extends State<SearchField> {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      style: const TextStyle(
        color: Colors.white,
      ),
      decoration: InputDecoration(
        labelText: 'Search',
        labelStyle: TextStyle(
          color: Color.fromARGB(255, 255, 255, 255).withOpacity(0.4),
          fontFamily: 'Inter',
        ),
        border: InputBorder.none,
        suffixIcon: _controller.text.isEmpty
            ? null
            : IconButton(
                icon: Icon(Icons.clear),
                onPressed: () {
                  setState(() {
                    _controller.clear();
                  });
                },
              ),
      ),
      onChanged: (text) {
        setState(() {
          // This will rebuild the widget and update the suffixIcon accordingly
        });
      },
      onEditingComplete: () {
        // TODO: search contact with _controller.text
        FocusScope.of(context).unfocus();
      },
    );
  }
}

Answer 2

This can help you, I only added a new field to handler field empty state, and on the TextField I used onChanged to update the previous var, and updated the clear method to return to the initial value

import 'package:flutter/material.dart';

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

  @override
  State<SearchField> createState() => _SearchFieldState();
}

class _SearchFieldState extends State<SearchField> {
  final TextEditingController _controller = TextEditingController();

  // New var to handler whether field is empty
  bool isFieldEmpty = false;

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      style: const TextStyle(
        color: Colors.white,
      ),
      decoration: InputDecoration(
        labelText: 'Search',
        labelStyle: TextStyle(
          color: const Color.fromARGB(255, 255, 255, 255).withOpacity(0.4),
          fontFamily: 'Inter',
        ),
        border: InputBorder.none,
        suffixIcon: isFieldEmpty //my clear button
            ? null
            : IconButton(
                icon: const Icon(Icons.clear),
                onPressed: () {
                  _controller.clear();
                  isFieldEmpty = true;
                  setState(() {});
                },
              ),
      ),
      onEditingComplete: () {
        // TODO: search contact with _controller.text
        FocusScope.of(context).unfocus();
      },
      // Update field on every field change
      onChanged: (value) {
        isFieldEmpty = value.trim().isEmpty;
        setState(() {});
      },
    );
  }
}