[flutter] 플러터 프로바이더를 이용한 유효성 검사 예시

14 Dec 2023

flutter

1. 의존성 추가

먼저, 필요한 의존성을 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

2. 데이터 모델 생성

다음으로, 유효성 검사를 위한 데이터 모델을 생성합니다. 예를 들어, 사용자가 입력해야 하는 이름과 이메일을 가진 사용자 모델을 만들어보겠습니다.

class User {
  String name;
  String email;

  User({required this.name, required this.email});
}

3. 프로바이더 생성

이제 이 데이터 모델을 사용하여 프로바이더를 만들어 유효성 검사를 수행할 수 있도록 합니다.

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

class UserProvider extends ChangeNotifier {
  User _user = User(name: '', email: '');

  User get user => _user;

  void updateName(String newName) {
    _user.name = newName;
    notifyListeners();
  }

  void updateEmail(String newEmail) {
    _user.email = newEmail;
    notifyListeners();
  }

  bool isValidUser() {
    return _user.name.isNotEmpty && _user.email.isNotEmpty;
  }
}

4. UI 구현

마지막으로, 프로바이더를 사용하여 UI를 구현합니다.

class MyForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<UserProvider>(
      create: (context) => UserProvider(),
      child: Consumer<UserProvider>(
        builder: (context, userProvider, _) => Form(
          child: Column(
            children: [
              TextFormField(
                onChanged: (value) => userProvider.updateName(value),
                decoration: InputDecoration(labelText: '이름'),
              ),
              TextFormField(
                onChanged: (value) => userProvider.updateEmail(value),
                decoration: InputDecoration(labelText: '이메일'),
              ),
              ElevatedButton(
                onPressed: () {
                  if (userProvider.isValidUser()) {
                    // 유효한 경우의 로직 구현
                  } else {
                    // 유효하지 않은 경우의 로직 구현
                  }
                },
                child: Text('제출'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예시에서는 프로바이더를 사용하여 사용자의 이름과 이메일을 입력하는 폼을 구현하고, 유효성 검사를 수행하여 적절한 동작을 할 수 있도록 했습니다.

이제 플러터 프로바이더를 이용한 유효성 검사 예시에 대해 알아보았습니다. 프로바이더를 활용하면 앱의 상태 관리와 유효성 검사를 깔끔하게 처리할 수 있습니다.