[flutter] 플러터 Riverpod를 사용한 폼 유효성 검사 방법

30 Nov 2023

flutter

소개

이번 글에서는 플러터(Flutter) 앱을 개발할 때 폼(Form)의 유효성 검사를 수행하는 방법에 대해 알아보겠습니다. 특히, Riverpod라는 상태 관리 라이브러리를 사용하여 폼의 상태를 관리하고 유효성을 검사하는 방법에 초점을 맞출 것입니다.

Riverpod란?

Riverpod는 플러터 앱에서 상태 관리를 위한 강력한 라이브러리입니다. Provider 패턴을 기반으로 하며, 변경 가능한 상태를 제어하는 데 사용됩니다. 플러터의 폼 유효성 검사를 수행할 때 Riverpod를 사용하면 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

폼 유효성 검사를 위한 Riverpod 사용법

아래는 Riverpod를 사용하여 폼 유효성 검사를 수행하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final formProvider = ChangeNotifierProvider.autoDispose<FormProvider>((ref) {
  return FormProvider();
});

class FormProvider extends ChangeNotifier {
  final formKey = GlobalKey<FormState>();
  var email = '';
  var password = '';

  void validateForm() {
    if (formKey.currentState!.validate()) {
      // 폼이 유효한 경우 처리할 작업 수행
      // 예를 들어, 서버로 데이터를 전송하거나 화면을 전환하는 등의 작업을 수행할 수 있습니다.
    } else {
      // 폼이 유효하지 않은 경우 에러 처리
    }
  }
}

class MyFormWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, watch, child) {
        final form = watch(formProvider);
        return Form(
          key: form.formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: '이메일'),
                validator: (value) {
                  if (value!.isEmpty) {
                    return '이메일을 입력해주세요.';
                  }
                  return null;
                },
                onChanged: (value) {
                  form.email = value;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: '비밀번호'),
                obscureText: true,
                validator: (value) {
                  if (value!.isEmpty) {
                    return '비밀번호를 입력해주세요.';
                  }
                  return null;
                },
                onChanged: (value) {
                  form.password = value;
                },
              ),
              ElevatedButton(
                onPressed: form.validateForm,
                child: Text('제출'),
              ),
            ],
          ),
        );
      },
    );
  }
}

위 예제 코드에서 FormProvider 클래스는 폼의 상태를 관리하고 유효성 검사를 수행합니다. validateForm 메서드에서 formKey.currentState!.validate()를 사용하여 폼의 유효성을 검사할 수 있습니다.

MyFormWidget 클래스는 폼 위젯을 구성하는데, Consumer 위젯을 사용하여 formProvider를 구독합니다. 폼 위젯 내부의 TextFormField 위젯들은 각각 validator 콜백을 정의하여 각 필드의 유효성 검사를 수행하고, onChanged 콜백을 사용하여 상태를 업데이트 합니다.

ElevatedButton 위젯은 form.validateForm 메서드를 호출하여 폼의 유효성을 검사하고 처리를 수행합니다.

결론

이번 글에서는 플러터 앱에서 폼의 유효성 검사를 수행하는 방법에 대해 알아보았습니다. Riverpod를 사용하여 폼의 상태를 관리하고 유효성을 검사하는 방법을 소개하였습니다. Riverpod를 사용하면 플러터 앱의 코드 가독성과 유지 보수성을 높일 수 있으며, 폼의 유효성 검사를 효과적으로 수행할 수 있습니다.

더 많은 정보를 원하시면 Riverpod 공식 문서를 참고하세요.