[Flutter] Form 위젯과 validate 사용 - 유효성 검사 프로세스

Flutter의 유효성 검사 프로세스 (Validation Process)

Flutter에서 TextFormField의 유효성 검사는 Form 위젯과 validator를 사용하여 이루어지며 아래 순서로 동작한다

 

🔹 유효성 검사 동작 흐름

1️⃣ TextFormField에 validator를 설정하면, 사용자가 입력한 값에 대한 검사를 수행.

2️⃣ Form 위젯의 FormState에서 validate()를 호출하면 모든 TextFormField의 validator 함수가 실행됨.

3️⃣ validator 함수가 null을 반환하면 유효한 값, 그렇지 않으면 오류 메시지를 반환하여 오류 표시.

4️⃣ 만약 모든 필드가 유효하면 save()를 호출하여 onSaved에서 값을 저장할 수 있음.

 

 

🔹 코드 예제 (유효성 검사 적용)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ValidationExample(),
    );
  }
}

class ValidationExample extends StatefulWidget {
  @override
  _ValidationExampleState createState() => _ValidationExampleState();
}

class _ValidationExampleState extends State<ValidationExample> {
  final _formKey = GlobalKey<FormState>(); // Form의 상태를 추적할 키
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('유효성 검사 예제')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey, // Form과 연결
          child: Column(
            children: [
              TextFormField(
                controller: _controller,
                decoration: InputDecoration(labelText: '이름'),
                validator: (value) { // 유효성 검사 로직
                  if (value == null || value.isEmpty) {
                    return '이름을 입력해주세요';
                  }
                  if (value.length < 3) {
                    return '이름은 최소 3자 이상 입력해야 합니다';
                  }
                  return null; // 유효한 값이면 null 반환
                },
                onSaved: (value) {
                  print('저장된 이름: $value'); // 유효할 때만 실행됨
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) { // 모든 필드 검증 실행
                    _formKey.currentState!.save(); // 값 저장
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('유효한 입력값: ${_controller.text}')),
                    );
                  }
                },
                child: Text('검사 실행'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

🔹 핵심 포인트

✅ TextFormField의 validator 함수는 오류 메시지(String)를 반환하면 입력값이 유효하지 않다고 판단.

✅ Form의 validate()를 호출하면 모든 validator가 실행됨.

✅ 모든 필드가 유효하면 save()를 호출하여 onSaved 실행 가능.

✅ FormState를 추적하기 위해 GlobalKey<FormState> 사용.