When entering text into the TextField, display the button, otherwise do not display in Flutter

Question

It is necessary to implement the following function: when entering text into the TextField, show the Remove button; when there are no characters in the TextField, do not show the Remove button. I do not yet understand how to implement this function, I need to track the input as a character somehow. I will be grateful if you help.

code

TextField(
              autofocus: true,
              onChanged: onChanged,
              style: constants.Styles.textFieldTextStyleWhite,
              cursorColor: Colors.white,
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.only(
                  top: 10,
                ),
                border: InputBorder.none,
                prefixIcon: Container(
                  width: 10,
                  height: 10,
                  alignment: Alignment.center,
                  child: SvgPicture.asset(
                    constants.Assets.search,
                  ),
                ),
              ),
            ),

MinD · Accepted Answer · 2022-06-10T14:05:01.963

1

You could use your onChanged function to keep track of what is being written in the TextField or use a TextEditingController(), and use the controller field of the TextField.
Then you can find if the TextField is or isn't empty by using controller.text.isEmpty / controller.text.isNotEmpty.

https://stackoverflow.com/a/57747739/19178917

edited Jun 10 '22 at 14:05

answered May 23 '22 at 15:41

MinD

109
6

Thank you very much, now I understand how to do it. – Max May 23 '22 at 15:43
1

Also, for close icon, you can use suffixIcon. It's pretty same with prefixIcon, but the icon is on the end. – harundemir918 May 23 '22 at 15:45

When entering text into the TextField, display the button, otherwise do not display in Flutter

1 Answers1