Flutter 폼 유효성 검증: 쉽게 구현하는 방법

Flutter는 다양한 앱 개발 기능을 제공하며, 그 중 폼 유효성 검증은 사용자 입력을 효과적으로 관리하는 핵심 기능 중 하나입니다. 이 블로그 포스트에서는 Flutter에서 폼 유효성 검증을 설정하는 방법과 주요 구현 요소들을 단계별로 살펴봅니다. 폼 유효성 검증은 로그인 페이지나 데이터 입력 폼에서 올바른 정보가 입력되었는지를 확인해 앱의 보안성과 사용자 경험을 높이는 데 필수적입니다.

참고. Build a form with validation

Flutter에서 폼 유효성 검증 구현하기

1. GlobalKey를 사용하여 폼 생성하기

Flutter에서 폼 유효성 검증을 시작하려면, 우선 GlobalKey를 사용하여 폼을 생성해야 합니다. GlobalKey는 각 폼에 고유한 식별자를 부여하여 폼 상태를 쉽게 확인하고 제어할 수 있게 합니다.

import 'package:flutter/material.dart';

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: const Column(
        children: <Widget>[
          // 여기에 TextFormFields와 ElevatedButton을 추가합니다.
        ],
      ),
    );
  }
}

Tip: GlobalKey를 사용하는 것은 폼에 접근하는 데 가장 권장되는 방식입니다. 만약 위젯 트리가 복잡할 경우, Form.of() 메서드를 사용하여 중첩된 위젯 내에서 폼에 접근할 수도 있습니다.

2. TextFormField와 유효성 검증 함수 추가하기

이제 사용자가 텍스트를 입력할 수 있도록 TextFormField를 폼에 추가하고, 입력한 값이 유효한지 확인하는 validator() 함수를 설정합니다. 유효성 검증을 위해 validator() 함수는 사용자가 입력한 값을 받아와서, 오류가 있을 경우 오류 메시지를 반환하고, 없을 경우 null을 반환합니다.

TextFormField(
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
),

참고: 이 예제에서는 텍스트 필드가 비어있을 때 오류 메시지를 표시하도록 설정했습니다. 실제 프로젝트에서는 이메일 형식, 패스워드 강도 등의 추가 조건을 설정할 수도 있습니다.

3. 유효성 검증과 폼 제출을 위한 버튼 추가하기

유효성 검증이 설정된 폼에는 사용자 입력을 제출할 버튼이 필요합니다. 이 버튼을 누르면, 폼의 유효성을 검사하고 그 결과에 따라 메시지를 표시하거나 추가 작업을 수행할 수 있습니다.

ElevatedButton(
  onPressed: () {
    if (_formKey.currentState!.validate()) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Processing Data')),
      );
    }
  },
  child: const Text('Submit'),
),

이 코드는 버튼을 눌렀을 때 _formKey.currentState!.validate()를 사용하여 폼의 유효성을 검사합니다. 폼이 유효한 경우, 성공 메시지를 스낵바로 표시하며, 필요에 따라 데이터를 서버로 전송하거나 데이터베이스에 저장하는 로직을 추가할 수 있습니다.

Flutter 폼 유효성 검증의 작동 원리

폼 유효성 검증이 어떻게 동작하는지 더 자세히 알아보겠습니다. 유효성 검사를 수행하기 위해서는 _formKey를 통해 FormState에 접근한 뒤 validate() 메서드를 호출합니다. validate() 메서드는 폼 내의 모든 TextFormField에 설정된 validator() 함수를 실행하여 오류가 있는 필드를 찾아내며, 오류가 있는 경우 오류 메시지를 화면에 표시합니다. 모든 필드가 유효한 경우에만 true를 반환합니다.

---

Flutter 폼 유효성 검증이 중요한 이유

• 보안성 향상: 폼 유효성 검증을 통해 기본적인 사용자 데이터의 정확성을 확보하고, 잘못된 입력을 사전에 방지할 수 있습니다.
• 사용자 경험 개선: 친절한 오류 메시지를 제공하여 사용자가 쉽게 오류를 수정하고 올바르게 입력하도록 돕습니다.
• 유연한 커스터마이징: 다양한 유효성 검증 규칙을 적용하여 사용자의 요구에 맞는 기능을 개발할 수 있습니다.

Flutter의 폼 유효성 검증 기능은 간단하면서도 강력한 기능으로, 다양한 앱에서 사용자 데이터를 올바르게 처리하고 더 나은 사용자 경험을 제공하는 데 큰 도움을 줍니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            // The validator receives the text that the user has entered.
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false otherwise.
                if (_formKey.currentState!.validate()) {
                  // If the form is valid, display a snackbar. In the real world,
                  // you'd often call a server or save the information in a database.
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Processing Data')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}