Flutter_19. TextField, TextEditingController, dispose, onSubmitted, obscureText

이번 포스팅에는 텍스트필드를 정리해보려 한다.

TextField 관련 내용은 아래 링크 참고:)

 

https://api.flutter.dev/flutter/material/TextField-class.html

TextField class - material library - Dart API

 

 

 

 

 

 

TextField, InputDecoration, obscureText

 

 

 

1) 기본 예제 실행

플러터 사이트에 있는 기본 예제를 실행해보았다.

InputDecoration은 OutlineInputBorder를 사용하여 테두리 필드를 라인으로 감싸주고, 그 안에 레이블 문구가 추가되었다.

TextField
- obscureText : 문자 숨김 처리(ex 비밀번호 입력)
- decoration : InputDecoration(border, labelText)

  // Ex01.(api.flutter.dev)
  TextField(
    obscureText: true,
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'Password',
    ),
  ),

 

 

2) 결과 확인

obscureText: true	obscureText: false

 

 

💋 obscureText

 

 

 

 

 

 

onSubmitted, TextEditingController, dispose

 

 

 

1) 두번째 예제 실행

TextField에서 값을 읽는 방법은 onSubmitted 콜백을 사용하는 것이다.

이 콜백은 사용자가 편집을 완료했을 때 onChanged 이후 호출되며, 텍스트 필드의 현재 값이 적용된다.

❊ onChanged : input 칸의 내용이 바로바로 변경될 때
❊ onSubmitted : 키보드의 입력완료를 클릭 했을 때

 

 

https://api.flutter.dev/flutter/material/TextField/onSubmitted.html

onSubmitted property - TextField class - material library - Dart API

 

 

 

 

 

2) TextEditingController 셋팅

❊ dispose 함수 오버라이딩 ❊
위젯이 dispose될때, 컨트롤러도 같이 dispose되도록 해야한다. 반드시!!

 

 

 

3) TextField 작성

TextField
- controller : TextEditingController
- onSubmitted : (String value) async{ await... }

❊ 텍스트필드는 컨트롤러가 있기 때문에 setState가 필요 없다!!!

  // Ex02.(api.flutter.dev)
  TextField(
    controller: _controller,
    onSubmitted: (value) async{
      // ----
      await showDialog(
        context: context, 
        builder: (BuildContext context){
          return AlertDialog(
            title: const Text('Thsnks!'),
            content: Text(
              'You typed "$value", which has length ${value.characters.length},'
            ),
            actions: [
              TextButton(
                onPressed: () {
                  // ----
                  Navigator.pop(context);
                }, 
                child: const Text('OK'),
              ),
            ],
          );
        }
      );
    },
  ),

 

 

 

4) 결과 확인

 

 

 

 

 

 

 

---

 

TextFormField, onEditingComplete

 

 

 

TextField와 별개로 TextFormField 클래스가 존재한다. 

이부분은 추후 따로 정리하면서 체킹할 예정 ^-^* 

<출처 - api.flutter.dev>

 

 

https://api.flutter.dev/flutter/material/TextFormField-class.html

TextFormField class - material library - Dart API

 

https://api.flutter.dev/flutter/material/TextField/onEditingComplete.html

onEditingComplete property - TextField class - material library - Dart API

 

 

 

반응형