Question 325730 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter text field clear button

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 {
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();
        },
    );
}

}`

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer just after asking the question:

    I had to add onChanged on my text like this and it's work:

    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();
      },
    );
  }
}

  2. 0

    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(() {});
      },
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search