[플러터] TextField 위젯

 

TextField는 사용자가 키보드를 이용하여 텍스트를 입력할 수 있도록 합니다.

TextField를 이용할 때 자주 접하게 될 프로포티를 주로 알아보겠습니다

설명을 도와드리기 위해서 예제 코드를 가져왔습니다.

 

 

 

controller → TextEditingController

TextField에 포함된 텍스트를 이용하고 싶을 때는 controller를 이용하시면 됩니다.

controller를 이용하면 텍스트의 기본값도 설정할 수 있습니다

사실 controller를 가장 많이 사용하는 것은 입력받은 text를 관찰(observer)하고 싶을 때입니다.

예를 들어 회원가입 화면에서 비밀번호를 6글자 이상만 가능하도록 설정할 때 controller의 text를 이용하면 편합니다.

void _validatePassword() {
    setState(() {
      if (_passwordController.text.length < 6) {
        isPasswordValid = false;
      } else {
        isPasswordValid = true;
      }
    });
  }

주의

Controller가 필요 없어질 때 dispose 해주세요!

 

onChanged → ValueChanged

TextField의 text 값이 변할 때마다 호출됩니다.

이때 현재의 text가 String으로 같이 넘어오는데, 이 값을 바로 이용할 수도있고, 위의 controller.text를 이용할수도 있습니다.

 

onSubmitted → ValueChanged

사용자가 textfield에서 작업이 끝났을 때 onSubmitted 콜백을 통해서 알려줍니다. 이때 현재 text를 String값으로 넘겨줍니다.

 

onEditingComplete → VoidCallback

textfield에서 작업이 끝났을때 onSubmitted와 마찬가지로 onEditingComplete 콜백을 통해서 알려줍니다.

 

onSubmitted vs onEditingComplete ?

onEditingComplete는 text controller를 업데이트하고 키보드 focus를 yield를 기본값으로 갖고 있다는 점에서 onSubmitted와 차이가 있습니다. 해당 기본값을 바꾸고 싶을 때 onEditingComplete를 이용하시면 됩니다

예를 들어 카카오톡 과 같은 채팅 앱에서는 메시지를 보낼 때마다 키보드가 내려가면 불편하겠죠?
onEditingComplete를 이용하면 이러한 default값을 변경할 수 있습니다.

위의 예제에서는 onEditingCompleted일때 AlertDialog가 표시되게 했습니다.

onEditingComplete: () {
        _showAlertDialog(context);
},

controller를 이용하면 AlertDialog에서 필요한 값들을 편하게 넘길 수 있습니다.

Text("ID : ${_idController.text}"),
Text("Password : ${_passwordController.text}")

 

decoration → InputDecoration

decoration의 기본값으로는 textfield의 바로 아래에 divider가 하나 제공이 됩니다.

조금 더 화려하게 꾸미기 위해서는 InputDecoration의 border 프로포티를 설정해주면 됩니다.

labelText는 focus가 되어있지 않은 상태일 때 text placeholder역할을 합니다

hintText는 focus가 되었는데 text가 비어있을 때 placeholder역할을 합니다

decoration: InputDecoration(
  border: borderMaker(Colors.green),
  labelText: "ID",
  hintText: "A unique ID",
),

그리고 위의 비밀번호 textfield 예제처럼 에러가 났을 때를 표현하고 싶다면 errorBorder와 errorText를 설정해주시면 됩니다.

decoration: InputDecoration(
    border: borderMaker(Colors.black),
    labelText: "Password",
    errorBorder: borderMaker(Colors.red),
    errorText: isPasswordValid ? null : "Over 6 characters needed"
),

 

autofocus → bool

textfield에게 자동으로 focus가 되게 하게 하려면 해당 프로포티를 true로 해주시면 됩니다.

 

focusNode → FocusNode

FocusNode를 설정해줄 수도 있습니다!

FocusNode는 키보드 focus와 키보드 관련 이벤트를 처리합니다.

위의 예제에서는 버튼을 누르면 focus가 바뀌게 했습니다.

ElevatedButton(
    child: Text("Focus ID"),
    onPressed: () => _idFocusNode.requestFocus()),
ElevatedButton(
    child: Text("Focus Password"),
    onPressed: () => _passwordFocusNode.requestFocus()),

 

keyboardType → TextInputType

text를 입력받는데 필요한 키보드의 종류도 정해줄 수 있습니다.

 

 

참고자료

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