Привет, коллеги!
Хочу поделиться своим опытом работы с формами во Flutter. Каждый из нас сталкивался с задачей создания сложных форм и хочу рассказать о подходе с использованием нового пакета form_model.
Почему form_model?
Он помогает отделить логику валидации от UI, что значительно упрощает поддержку кода.
Предоставляет гибкую систему валидации с возможностью создания кастомных валидаторов.
Хорошо интегрируется с BLoC (хотя, думаю, и с другими подходами к управлению состоянием тоже будет работать).
Справляется со сложными структурами форм без особых усилий.
Для начала добавим следующие зависимости в pubspec.yaml
form_model
flutter_bloc
freezed
Кастомные объекты
Для демонстрации работы со сложными типами данных создадим простой класс Address:
@freezed
class Address with _$Address {
const factory Address({
required String street,
required String city,
required String country,
}) = _Address;
}State Management
Для управления c состоянием я обычно использую подход с единым состоянием (single-state approach). Вот как выглядит мой класс StateStatus:
@freezed
class StateStatus with _$StateStatus {
const factory StateStatus() = PureStatus;
const factory StateStatus.loading() = LoadingStatus;
const factory StateStatus.success([dynamic data]) = SuccessStatus;
const factory StateStatus.error([String? message]) = ErrorStatus;
}Это позволяет представить четыре различных состояния формы: исходное, загрузка, успех и ошибка.
Теперь можем переходить к основному, к реализации самого блока
SignUpState
@freezed
class SignUpState with _$SignUpState {
const factory SignUpState({
@Default(StateStatus()) StateStatus status,
@Default(FormModel<String>(validators: [
RequiredValidator(),
EmailValidator(),
]))
FormModel email,
@Default(FormModel<String>(validators: [
RequiredValidator(),
PasswordLengthValidator(minLength: 8),
PasswordLowercaseValidator(),
PasswordUppercaseValidator(),
PasswordSpecialCharValidator(),
]))
FormModel password,
@Default(FormModel<String>(validators: [
RequiredValidator(),
StringConfirmPasswordMatchValidator(),
]))
FormModel confirmPassword,
@Default(FormModel<String>(validators: [
RequiredValidator(),
StringMinLengthValidator(minLength: 6),
CustomValidator(validator: _validateUsername),
]))
FormModel<String> username,
@Default(FormModel<Address>(validators: [
RequiredValidator(),
CustomValidator(validator: _validateStreet),
CustomValidator(validator: _validateCity),
CustomValidator(validator: _validateCountry),
]))
FormModel address,
@Default(FormModel<bool>(validators: [
BoolAgreeToTermsAndConditionsValidator(),
]))
FormModel<bool> agreeToTerms,
}) = _SignUpState;
}
String? _validateUsername(String? value) {
if (value == null) return null;
if (!value.startsWith('@')) {
return 'Username should start with @';
}
return null;
}
String? _validateStreet(Address? value) {
if (value == null) return null;
if (value.street.isEmpty) {
return 'Street is required';
}
return null;
}
String? _validateCity(Address? value) {
if (value == null) return null;
if (value.city.isEmpty) {
return 'City is required';
}
return null;
}
String? _validateCountry(Address? value) {
if (value == null) return null;
if (value.country.isEmpty) {
return 'Country is required';
}
return null;
}
Здесь определяем FormModel для каждого поля формы. Интересный момент: form_model позволяет комбинировать валидаторы, что дает возможность создавать сложные правила валидации, оставаясь при этом в рамках принципа единой ответственности.
Например, для пароля используется несколько валидаторов.
Каждый валидатор отвечает только за одну проверку, что упрощает тестирование и повторное использование кода.
SignUpEvent
@freezed
class SignUpEvent with _$SignUpEvent {
const factory SignUpEvent.emailChanged(String value) = _EmailChanged;
const factory SignUpEvent.passwordChanged(String value) = _PasswordChanged;
const factory SignUpEvent.confirmPasswordChanged(String value) = _ConfirmPasswordChanged;
const factory SignUpEvent.usernameChanged(String value) = _UsernameChanged;
const factory SignUpEvent.addressChanged(String value) = _AddressChanged;
const factory SignUpEvent.agreeToTermsChanged(bool value) = _AgreeToTermsChanged;
const factory SignUpEvent.submitted() = _Submitted;
}SignUpBloc
class SignUpBloc extends Bloc<SignUpEvent, SignUpState> {
SignUpBloc() : super(const SignUpState()) {
on<_EmailChanged>(_onEmailChanged);
on<_PasswordChanged>(_onPasswordChanged);
on<_ConfirmPasswordChanged>(_onConfirmPasswordChanged);
on<_UsernameChanged>(_onUsernameChanged);
on<_AddressChanged>(_onAddressChanged);
on<_AgreeToTermsChanged>(_onAgreeToTermsChanged);
on<_Submitted>(_onSubmitted);
}
void _onEmailChanged(_EmailChanged event, Emitter<SignUpState> emit) {
emit(state.copyWith(email: state.email.setValue(event.value)));
}
void _onPasswordChanged(_PasswordChanged event, Emitter<SignUpState> emit) {
emit(state.copyWith(
password: state.password.setValue(event.value),
confirmPassword: state.confirmPassword.replaceValidator(
predicate: (validator) => validator is StringConfirmPasswordMatchValidator,
newValidator: StringConfirmPasswordMatchValidator(matchingValue: event.value),
),
));
}
void _onConfirmPasswordChanged(_ConfirmPasswordChanged event, Emitter<SignUpState> emit) {
emit(state.copyWith(confirmPassword: state.confirmPassword.setValue(event.value)));
}
void _onUsernameChanged(_UsernameChanged event, Emitter<SignUpState> emit) {
emit(state.copyWith(username: state.username.setValue(event.value)));
}
void _onAddressChanged(_AddressChanged event, Emitter<SignUpState> emit) {
final parts = event.value
.split(',')
.map(
(e) => e.trim(),
)
.toList();
final address =
Address(street: parts[0], city: parts.length > 1 ? parts[1] : '', country: parts.length > 2 ? parts[2] : '');
emit(state.copyWith(address: state.address.setValue(address)));
}
void _onAgreeToTermsChanged(_AgreeToTermsChanged event, Emitter<SignUpState> emit) {
emit(state.copyWith(agreeToTerms: state.agreeToTerms.setValue(event.value)));
}
void _onSubmitted(_Submitted event, Emitter<SignUpState> emit) async {
emit(state.copyWith(
email: state.email.validate(),
password: state.password.validate(),
confirmPassword: state.confirmPassword.validate(),
username: state.username.validate(),
address: state.address.validate(),
agreeToTerms: state.agreeToTerms.validate(),
));
if (areAllFormModelsValid([
state.email,
state.password,
state.confirmPassword,
state.username,
state.address,
state.agreeToTerms,
])) {
emit(state.copyWith(status: const LoadingStatus()));
//do some logic here
await Future.delayed(const Duration(seconds: 2));
emit(state.copyWith(status: const SuccessStatus()));
}
}
}Здесь есть несколько интересных моментов:
Каждый FormModel возвращает новый экземпляр при изменении, что обеспечивает иммутабельность.
При изменении пароля обновляем также валидатор поля подтверждения пароля.
Для адреса разбиваем входную строку на части, создавая новый объект Address.
UI
class SignUpPage extends StatelessWidget {
const SignUpPage({super.key});
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => SignUpBloc(),
child: Builder(
builder: (context) {
final bloc = context.read<SignUpBloc>();
return BlocConsumer<SignUpBloc, SignUpState>(
listener: (context, state) {
// do something on success status
},
builder: (BuildContext context, SignUpState state) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 40),
TextField(
onChanged: (value) => bloc.add(SignUpEvent.emailChanged(value)),
decoration: InputDecoration(
labelText: 'Email',
errorText: state.email.error?.translatedMessage,
),
),
const SizedBox(height: 16),
TextField(
onChanged: (value) => bloc.add(SignUpEvent.passwordChanged(value)),
decoration: InputDecoration(
labelText: 'Password',
errorText: state.password.error?.translatedMessage,
),
obscureText: true,
),
const SizedBox(height: 16),
TextField(
onChanged: (value) => bloc.add(SignUpEvent.confirmPasswordChanged(value)),
decoration: InputDecoration(
labelText: 'Confirm Password',
errorText: state.confirmPassword.error?.translatedMessage,
),
obscureText: true,
),
const SizedBox(height: 16),
TextField(
onChanged: (value) => bloc.add(SignUpEvent.usernameChanged(value)),
decoration: InputDecoration(
labelText: 'Username @',
errorText: state.username.error?.translatedMessage,
),
),
const SizedBox(height: 16),
TextField(
onChanged: (value) => bloc.add(SignUpEvent.addressChanged(value)),
decoration: InputDecoration(
labelText: 'Address (street, city, country)',
errorText: state.address.error?.translatedMessage,
),
),
const SizedBox(height: 16),
CheckboxListTile(
value: state.agreeToTerms.value ?? false,
onChanged: (value) => bloc.add(
SignUpEvent.agreeToTermsChanged(value ?? false),
),
),
if (state.agreeToTerms.error != null)
Text(
state.agreeToTerms.error!.translatedMessage ?? '',
style: TextStyle(color: Theme.of(context).colorScheme.error),
),
const SizedBox(height: 32),
ElevatedButton(
onPressed: () => bloc.add(const SignUpEvent.submitted()),
child: state.status is LoadingStatus
? const SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(),
)
: const Text('Submit'),
)
],
),
),
),
);
},
);
},
),
);
}
}Запускаем валидацию только при отправке формы, а не при каждом вводе пользователя. Мне кажется, это обеспечивает лучший UX, но, конечно, это дело вкуса.
Заключение
Этот подход позволит создать довольно сложную форму, сохранив при этом код чистым и легко поддерживаемым. Приятным бонусом является встроенная поддержка локализации в form_model. Это значительно упрощает процесс добавления переводов для сообщений об ошибках валидации.
Конечно, это не единственный способ работы с формами во Flutter, но он весьма удобный. Комбинация form_model и BLoC обеспечит гибкость в валидации и управлении состоянием, а также облегчит интернационализацию.
Буду рад услышать ваше мнение и опыт работы с формами во Flutter. Какие подходы используете вы? Сталкивались ли вы с проблемами локализации валидационных сообщений, и как их решали?