Flutter：当textformfield没有输入时如何隐藏后缀图标？

Question

我有一个 TextFormField，我希望当文本字段为空时自动隐藏其后缀图标。这是我的代码

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,
                  ),

这就是它应该的样子

任何人都可以帮助我吗？

Answer 1

您可以将

TextEditingController

与监听器一起使用

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

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

Answer 2

您也可以使用

onChanged

和

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,
                  ),

Answer 3

      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,
                      ),

Answer 4

添加 Md. Yeasin Sheikh 的答案以添加侦听器，例如：

    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: () => postImage(
                              userProvider.getUser!.uid,
                              userProvider.getUser!.username,
                              userProvider.getUser!.photoUrl,
                            ),
                          ),
                        ),
                        maxLines: 1,
                        maxLength: 300,
                      ),  //TextField