Flutter 강좌 - [Form] Form 사용법과 적합성 검증법

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

 

이번 강좌에서는 폼(Form)을 작성하는 방법과 폼 필드의 적감성을 검증하는 방법에 대해서 알아본다.

Flutter에서 폼을 만들고 폼필드를 검증하는 방법은 다음과 같다.

1. GlobalKey를 가지는 폼 생성
2. 폼에 검증 로직을 가지는 폼필드 추가
3. 폼의 데이터를 전송하는 버튼 추가

 

우선 실행화면을 살펴보자.

 

앱은 사용자로부터 텍스트를 입력받는 TextFormField를 가지고 있고, 그 하단에는 Submit 버튼이 존재한다.

사용자가 Submit 버튼을 클릭할 때 TextFormField의 상태를 검증해서 만약 아무런 텍스트가 입력되지 않았을 경우 에러 메시지를 출력하고, 텍스트가 입력된 경우 스낵바를 통해 'Processing Data' 메시지를 출력한다.

 

소스코드는 다음과 같다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(title: Text(appTitle)),
        // StatefulWidget인 MyCustomForm을 body로 설정
        body: MyCustomForm(),
      ),
    );
  }
}

// 커스텀 폼 위젯을 정의
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// 펌 위젯에 상응하는 상태 클래스
class MyCustomFormState extends State<MyCustomForm> {
  // 폼에 부여할 수 있는 유니크한 글로벌 키를 생성한다.
  // MyCustomFormState의 키가 아닌 FormState의 키를 생성해야함을 유의
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // 폼 위젯 생성
    // 폼 위젯은 컨테이너처럼 동작하면서, 복수의 폼 필드를 그룹화하고 적합성을 확인함
    return Form(
      // 필드에 부여했단 글러벌키를 폼에 할당함
      key: _formKey,
      child: Column(
        // 컬럼내 위젯들을 왼쪽부터 정렬함
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          // 텍스트폼필드 추가
          TextFormField(
            // 텍스트폼필드에 validator 추가
            validator: (value) {
              // 입력값이 없으면 메시지 출력
              if (value.isEmpty) {
                return 'Enter some text';
              } else
                return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // 텍스트폼필드의 상태가 적함하는
                if (_formKey.currentState.validate()) {
                  // 스낵바를 통해 메시지 출력
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              // 버튼에 텍스트 부여
              child: Text('Submit'),
            ),
          )
        ],
      ),
    );
  }
}

 

폼의 상태를 확인해서 동적으로 처리되어야 하므로 StatefulWidget을 상속하는 MyCustomForm 클래스를 구현했다. 이와 상응하는 상태 클래스로 MyCustomFormState를 선언하고 화면을 구성한다.

MyCustomFormState 클래스를 좀 더 살펴보면,

글러벌키 값을 필드 _formKey에 할당하고 있다. Flutter의 폼에서는 각 위젯의 고유한  ID를 부여할 때 GlobalKey 함수를 이용한다. 위 코드에서는 폼의 GlobalKey를 부여하기 위해 GlobalKey<FormState> 형태로 키 값을 필드에 부여하고 있다. GlobalKey<MyCustomFormState>가 아닌 GlobalKey<FormState> 값을 부여해야 함에 유념해야 한다.

build 메소드에서는 Form 위젯을 생성해서 반환한다. Flutter에서의 Form 위젯은 복수의 폼필드를 가질 수 있으며 컨테이너와 비슷하게 동작한다.

폼의 첫번째 자식으로 TextFormField를 추가하고 있으며 validator 항목을 통해 적합성을 검증하는 로직을 구현하였다.

          TextFormField(
            // 텍스트폼필드에 validator 추가
            validator: (value) {
              // 입력값이 없으면 메시지 출력
              if (value.isEmpty) {
                return 'Enter some text';
              } else
                return null;
            },
          ),

TextFormField의 validator 항목으로 validation 로직을 구현하고 있다. 만약 입력된 텍스트가 없을 경우 에러 메시지가 출력되는 구조다.

두번째 자식으로 RaisedButton을 추가하고 버튼이 눌리게 되면 검증을 시도하는 로직이 추가 되었다. 조금 더 살펴보면...

            child: RaisedButton(
              onPressed: () {
                // 텍스트폼필드의 상태가 적함하는
                if (_formKey.currentState.validate()) {
                  // 스낵바를 통해 메시지 출력
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              // 버튼에 텍스트 부여
              child: Text('Submit'),
            ),

RaisedButton이 눌려지면 _formKey.currentState.validate() 코드가 실행된다. _formKey는 폼의 ID값이며 currentState.validate() 함수에 의해 폼 내부의 모든 자식들의 validator가 실행되게 된다. 모든 validator가 적합할 경우 true가 반환되어 스낵바가 디스플레이되게 된다.

 

본 강좌는 Flutter 공식 사이트의 문서를 참고하여 작성되었습니다.

https://flutter.dev/docs/cookbook/forms/validation

Build a form with validation

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱