Colin's Blog
[flutter] velocity_x를 사용하여 플러터 앱의 폼 유효성 검사 기능 구현하기

VelocityX는 flutter 앱을 빠르게 작성할 수 있는 확장 라이브러리로, flutter 앱의 UI 레이아웃 및 기능을 간단하게 작성할 수 있도록 도와줍니다.

이 포스트에서는 VelocityX를 사용하여 flutter 앱에서 폼 유효성 검사 기능을 구현하는 방법을 다룰 것입니다.

1. VelocityX 및 폼 유효성 검사 라이브러리 추가

우선, flutter 프로젝트의 pubspec.yaml 파일 내에 다음과 같이 VelocityX 및 폼 유효성 검사에 사용할 라이브러리를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_velocity_x: ^4.0.0
  flutter_form_builder: ^7.0.0

이후에는 flutter pub get 명령을 실행하여 이 변경 사항을 반영합니다.

2. 폼 및 유효성 검사 로직 작성

다음으로, flutter 앱의 폼 및 해당 폼 필드의 유효성을 검사하는 로직을 작성해야 합니다. 이 과정에서 VelocityX와 flutter_form_builder를 활용하여 간편하게 작성할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:flutter_velocity_x/flutter_velocity_x.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

class MyFormWidget extends StatelessWidget {
  final GlobalKey<FormBuilderState> _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return VelocityX.m5.child(
      FormBuilder(
        key: _formKey,
        autovalidateMode: AutovalidateMode.onUserInteraction,
        child: Column(
          children: <Widget>[
            FormBuilderTextField(
              name: 'username',
              decoration: InputDecoration(labelText: 'Username'),
              validator: FormBuilderValidators.required(context,
                  errorText: 'Username is required'),
            ),
            FormBuilderTextField(
              name: 'password',
              decoration: InputDecoration(labelText: 'Password'),
              validator: FormBuilderValidators.required(context,
                  errorText: 'Password is required'),
            ),
            VelocityX.mt4,
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.saveAndValidate()) {
                  // 유효성 검사 통과 시 처리 로직
                }
              },
              child: 'Submit'.text.make(),
            ),
          ],
        ),
      ),
    );
  }
}

구현된 폼 위젯 내에는 사용자 이름과 비밀번호를 입력하는 두 개의 폼 필드가 포함되어 있습니다. 또한, 제출 버튼을 눌렀을 때 유효성 검사를 수행하고, 통과했을 경우 처리 로직을 수행하는 코드 또한 포함되어 있습니다.

3. 유효성 검사 결과 표시

유효성 검사 결과에 따라 사용자에게 적절한 메시지를 표시해야 합니다. 이를 위해 flutter의 SnackBar나 경고 다이얼로그를 사용할 수 있습니다. 여기서는 SnackBar를 사용하는 예제를 제시합니다.

if (_formKey.currentState!.saveAndValidate()) {
  // 유효성 검사 통과 시 처리 로직
} else {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: '유효하지 않은 값이 있습니다.'.text.make(),
    ),
  );
}

위 코드에서는 만약 유효성 검사에 실패했을 경우, ScaffoldMessenger를 통해 SnackBar를 표시하여 사용자에게 메시지를 전달합니다.

이렇게 하여 VelocityX를 활용하여 flutter 앱의 폼 유효성 검사 기능을 간단하게 구현할 수 있습니다. VelocityX의 간결한 구문과 flutter_form_builder의 폼 관련 편의 기능을 통해, 앱 개발 과정을 더욱 빠르고 즐겁게 진행할 수 있습니다.

참고 문헌:

© 2018 Colin. All rights reserved.