본문 바로가기
Flutter/Flutter FAQ

Flutter TextField 위젯에 Clear 버튼을 추가하는 방법, How to add clear button to TextField Widget

by 베타코드 2023. 5. 18.
반응형

질문


TextField에 클리어 버튼을 추가하는 올바른 방법이 있나요?

Material design 가이드라인에서 보는 것처럼:

enter image description here

찾아본 결과, InputDecorationsuffixIcon에 클리어 IconButton을 설정하는 것이 맞는 방법인가요?


답변


출력:

enter image description here

변수를 만드세요

var _controller = TextEditingController();

그리고 TextField를 추가하세요:

TextField(
  controller: _controller,
  decoration: InputDecoration(
    hintText: '메시지를 입력하세요',
    suffixIcon: IconButton(
      onPressed: _controller.clear,
      icon: Icon(Icons.clear),
    ),
  ),
)
반응형

댓글