[ j Flutter ] TextField suffixIcons에 clear 아이콘 추가 후 글자 지우기

TextField에 글자를 입력하면 suffixIcons에 clear 아이콘 추가 후 해당 아이콘 클릭 시 글자 지워보자

 

1. 먼저 TextField에 추가할 controller를 생성해준다.

 var _textController = TextEditingController();

 

 

2. TextField를 추가해준다.

TextField(
            controller: _textController,
            onChanged: (text) {
              setState(() {});
            },
            decoration: InputDecoration(
                labelText: 'Test',
                suffixIcon: _textController.text.length > 0
                    ? IconButton(
                        onPressed: () {
                          _textController.clear();
                          setState(() {});
                        },
                        icon: Icon(Icons.cancel, color: Colors.grey))
                    : null),
          )

 

_textController.text.length 를 통해 글자가 있으면 해당 아이콘을 보여준다.

 

아이콘을 클릭하면 _textController.clear(); 가 호출이 되어 해당 TextField글자를 다 지워준다.