Flutter/Flutter FAQ

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

독학코딩 2023. 5. 18. 08:38
반응형

질문


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),
    ),
  ),
)
반응형