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.

预收

这里是我的班子:

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

Answer 2

这可以帮助你,我只增加了一个新的领域,以交出外地空洞的国家,并在<代码>Text Field<>/code>上提供。我在Changed更新了前var,并更新了返回初始价值的明确方法。

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

友情链接