CODEWITHSUNDEEP
flutterdartflutter-layoutwidgetflutter-textformfield
Đinh Việt Hoàng
Đinh Việt Hoàng

Reputation: 75

Flutter: How to hide suffix icon when there is no input on textformfield?

I have a TextFormField and i want its suffix icon auto hidden when the textfield is empty. Here is my code

child: TextFormField(
                    decoration: InputDecoration(
                      contentPadding:
                      const EdgeInsets.only(top: 16, bottom: 15),
                      border: InputBorder.none,
                      fillColor: Colors.white,
                      prefixIcon: const Padding(
                        padding: EdgeInsets.only(top: 16.0, bottom: 15),
                        child: Text("Code: "),
                      ),
                      prefixIconConstraints: const BoxConstraints(minWidth: 60, minHeight: 19),
                      hintText: "Input code here ",                         
                      suffixIcon: IconButton(
                        onPressed: () {
                        },
                        icon: Icon(Icons.delete),
                      ),
                    ),
                    keyboardType: TextInputType.number,
                  ),

This is how it should look like

enter image description here

Can anyone help me pls.

Upvotes: 5

Views: 3094

Answers (4)

David Garfield
David Garfield

Reputation: 1

Adding to Md. Yeasin Sheikh's answer, you can provide an inactive version until text input is received like this:

// Add listener at top of file
enter code here
    late final TextEditingController _yourDescriptionController = TextEditingController()
  ..addListener(() {
      setState(() {});
    });

// then add the following to your textField

 child: TextField( 
                        controller: _yourDescriptionController,
                        decoration: InputDecoration(
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(20),
                            borderSide: BorderSide(
                              color: const Color.fromARGB(255, 229, 229, 229),
                              width: 1.0,
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(20),
                            borderSide: BorderSide(
                              color: const Color.fromARGB(255, 40, 144, 255),
                              width: 1.0,
                            ),
                          ),
                          hintText: "Comments...",
                          hintStyle: TextStyle(fontSize: 16),
                          suffixIcon: 
                            _yourDescriptionController.text.isEmpty ? const 
    Icon(
                      Icons.send,
                      color: Color.fromARGB(255, 174, 174, 174),
                      size: 20,
                    ) :
                      
                      IconButton(
                            icon: const Icon(
                              Icons.send,
                              color: Color.fromARGB(255, 40, 144, 255),
                              size: 20,
                            ),
                             onPressed: () {},
                                       icon: Icon(Icons.send),
                                           ),
                          ),
                        ),
                        maxLines: 1,
                        maxLength: 300,
                      ),  //TextField

Upvotes: 0

Safal Shrestha
Safal Shrestha

Reputation: 366

You can also do it using onChanged and setState .

bool show= false;


child:TextFormField(
              onChanged: (value){
                if(value.isNotEmpty){
                  setState(() {
                    show=true;
                  });
                }
                else{
                  setState(() {
                    show=false;
                  });
                }
              } ,
                    decoration: InputDecoration(
                      contentPadding:
                      const EdgeInsets.only(top: 16, bottom: 15),
                      border: InputBorder.none,
                      fillColor: Colors.white,
                      prefixIcon: const Padding(
                        padding: EdgeInsets.only(top: 16.0, bottom: 15),
                        child: Text("Code: "),
                      ),
                      prefixIconConstraints: const BoxConstraints(minWidth: 60, minHeight: 19),
                      hintText: "Input code here ",                         
                      suffixIcon:show? IconButton(
                        onPressed: () {
                        },
                        icon: Icon(Icons.delete),
                      ):null,
                    ),
                    keyboardType: TextInputType.number,
                  ),

Upvotes: 2

Anandh Krishnan
Anandh Krishnan

Reputation: 5986

      late final TextEditingController controller = TextEditingController()
        ..addListener(() {
              if(controller.text.isEmpty){
          setState(() {});
           }
        });   



              child: TextFormField(
                        decoration: InputDecoration(
                          contentPadding:
                          const EdgeInsets.only(top: 16, bottom: 15),
                          border: InputBorder.none,
                          fillColor: Colors.white,
                          prefixIcon: const Padding(
                            padding: EdgeInsets.only(top: 16.0, bottom: 15),
                            child: Text("Code: "),
                          ),
                          prefixIconConstraints: const BoxConstraints(minWidth: 60, minHeight: 19),
                          hintText: "Input code here ",                         
                         suffixIcon: controller.text.isEmpty
                                     ? null
                                       : IconButton(
                                              onPressed: () {},
                                           icon: Icon(Icons.delete),
                                               ),
                                  ),
                        keyboardType: TextInputType.number,
                      ),

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63559

You can use TextEditingController with a listner

  late final TextEditingController controller = TextEditingController()
    ..addListener(() {
      setState(() {});
    });

TextFormField(
  controller: controller,
  decoration: InputDecoration(
    suffixIcon: controller.text.isEmpty
        ? null
        : IconButton(
            onPressed: () {},
            icon: Icon(Icons.delete),
          ),

Upvotes: 4

Related Questions