개요

플러터는 사용자 입력을 받기 위한 폼 처리 기능을 제공합니다. 이를 통해 사용자가 입력한 데이터의 유효성을 검사하고 처리할 수 있습니다. 이번 기사에서는 플러터에서 폼을 어떻게 처리하고 유효성을 검사하는지에 대해 알아보겠습니다.

폼 생성하기

플러터에서 폼 생성은 Form 위젯을 사용하여 할 수 있습니다. Form 위젯은 다양한 폼 필드를 포함할 수 있는 컨테이너 역할을 합니다.

Form(
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(
          labelText: '이름',
        ),
      ),
      TextFormField(
        decoration: InputDecoration(
          labelText: '이메일',
        ),
      ),
      // 추가적인 폼 필드들...
    ],
  ),
)

위의 예시에서는 Form 위젯 안에 TextFormField 위젯이 포함되어 있습니다. 이 곳에 원하는 만큼의 폼 필드를 추가할 수 있습니다. TextFormField는 사용자로부터 텍스트를 입력받을 수 있는 필드입니다.

유효성 검사 처리하기

폼 필드에 입력받은 데이터의 유효성을 검사하고 처리하기 위해서는 Form 위젯의 onSubmitted 콜백을 활용할 수 있습니다.

Form(
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(
          labelText: '이름',
        ),
        validator: (value) {
          if (value.isEmpty) {
            return '이름을 입력해주세요.';
          }
          return null;
        },
        onSaved: (value) {
          // 입력받은 이름을 저장하는 로직 작성
        },
      ),
      // 추가적인 폼 필드들...
    ],
  ),
)

위의 예시에서는 TextFormField 위젯의 validator 속성을 사용하여 입력받은 데이터의 유효성 검사를 수행합니다. 만약 입력값이 비어있는 경우에는 에러 메세지를 반환하고, 그렇지 않은 경우에는 null을 반환합니다.

또한, onSaved 속성을 사용하여 유효성 검사를 통과한 데이터를 저장할 수 있습니다. 이곳에 데이터를 처리하는 로직을 작성하면 됩니다.

유효성 검사 실행하기

플러터에서는 Form 위젯을 FormState와 연결하여 유효성 검사를 실행할 수 있습니다. Form 위젯의 상위에 GlobalKey<FormState>를 사용하여 키값을 할당하고, 이를 Form 위젯의 key 속성에 전달합니다.

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      // 폼 필드들...
    ],
  ),
)

이후, 유효성 검사를 실행할 때는 FormState 객체에 접근하여 validate() 메서드를 호출하면 됩니다.

if (_formKey.currentState.validate()) {
  // 유효성 검사 통과 시 처리할 로직 작성
}

위의 예시에서는 currentState를 사용하여 FormState 객체에 접근한 후, validate() 메서드를 호출하여 유효성 검사를 수행합니다. 유효성 검사에 통과한 경우에는 데이터 처리 로직을 실행할 수 있습니다.

결론

플러터에서 폼을 처리하고 유효성 검사를 수행하는 방법에 대해 알아보았습니다. Form 위젯을 활용하여 폼 필드를 생성하고, validator를 통해 유효성을 검사하며, onSaved를 사용하여 데이터를 처리할 수 있습니다. 이를 통해 사용자 입력 데이터를 안전하게 처리할 수 있습니다.

더 자세한 정보는 다음 문서를 참고해주세요:

• Flutter - Working with Forms