Одной из неотъемлемых частей многих приложений является валидация форм. Разработчики мобильных приложений всегда имеют дело с формами, потому что важно показывать соответствующие предупреждения пользователям, когда они неправильно заполняют форму.
Разработчики должны выполнять эту задачу надлежащим образом, и для этого им необходимо написать специальную логику валидации. Здесь вы узнаете, как выполнить валидацию формы с помощью flutter Bloc. Вы столкнулись с трудностями при реализации этого шага и ищете эксперта-разработчика для правильного выполнения процесса валидации формы в вашем бизнес-приложении? Тогда наймите разработчика Flutter от bosctechlabs.com уже сегодня.
Что означает Flutter Bloc?
Flutter Bloc — это управление состоянием во Flutter. Вы можете использовать его для обработки всех состояний, которые вы хотите выполнить в приложениях Flutter. Это лучший и самый простой способ управления состояниями. Он позволяет вам без усилий добавлять любые изменения в приложение flutter.
Независимо от вашего уровня, вы можете быстро освоить концепцию и добавить эту зависимость в свой проект. Google создал Bloc, который является не чем иным, как паттерном проектирования, помогающим отделить бизнес-логику от слоя осознания. Кроме того, он позволяет разработчику эффективно использовать код.
Flutter Bloc имеет несколько виджетов, таких как Bloc Builder, Bloc Selector, Bloc provider, MultiBlocprovider, Bloc Listener и Multi Bloc Listener. Каждый виджет выполняет определенное действие, поэтому необходимо использовать тот, который подходит для вашего проекта Flutter.
Как сделать валидацию формы во Flutter
Flutter SDK предоставляет готовые виджеты и функциональные возможности для облегчения жизни пользователя при проверке формы. Для валидации формы существует два различных подхода: виджет формы и пакет провайдера. Вот шаги, которые необходимо выполнить, чтобы запустить валидацию формы во Flutter. Убедитесь, что вы правильно выполнили все шаги, чтобы получить желаемый результат.
- Создайте форму во Flutter; например, создайте простую страницу входа в систему, используя такие поля, как email, пароль, номер телефона и имя.
- Настройте форму на валидацию
- Валидация ввода и форматоры ввода
- Доступ к методам Regex и методам расширения Dart в проекте flutter
- Вам нужно создать поля ввода, необходимые для формы.
- Создайте пользовательское поле формы.
- Выполнить валидацию формы с помощью провайдера, Bloc или других методов.
Здесь вы подробно узнаете о Bloc, потому что это лучший способ валидации формы. Библиотека bloc создает пакет Flutter для валидации полей. Он обычно называется form_bloc.
Как выполнить валидацию формы с помощью Flutter Bloc
Как только вы реализуете валидацию формы с помощью flutter BLoC, вам нужно добавить зависимость в файл pubspec.ymal, чтобы получить все свойства Bloc. В результате вы сможете эффективно использовать его для управления состоянием.
dependencies:
flutter:
sdk: Flutter
cupertino_icons: ^1.0.2
rxdart: ^0.27.3
flutter_bloc: ^8.0.1
Здесь используются две зависимости rxdart и flutter_bloc. RxDart расширяет возможности контроллеров потоков и потоков Dart. Flutter_bloc — это использование Bloc Provider для рендеринга счетчика-кубита на счетчик-страницу и последующей реакции на изменения состояния с помощью BlocBuilder.
Создайте класс cubit (login_bloc_cubit.dart) для приложения, который представляет собой абстрактный класс Cubit extends Bloc-base. Затем создайте класс с именем LoginScreenCubit(). После этого определите конструктор аргументов и все контроллеры, которые вы использовали. Вот как это выглядит!
LoginScreenCubit() : super(LoginInitial());
//define controllers
final _userNameController = BehaviorSubject();
final _passwordController = BehaviorSubject();
final _phonenoController = BehaviorSubject();
Вы можете получать данные с помощью определенных и потоковых контроллеров, как показано ниже.
Stream get userNameStream => _userNameController.stream;
Stream get passwordStream => _passwordController.stream;
Stream get phonenoStream => _phonenoController.stream;
Теперь пришло время создать метод для очистки данных. Для этого вы можете использовать следующий код.
void dispose() {
updateUserName('');
updatePassword('');
updatePhoneNumber('');
}
Затем добавьте методы для валидации. Это один из важнейших шагов во всем проекте, в котором вы можете проверить значение пользователей.
//validation of UserName
voidupdateUserName(String userName) {
if (userName.length< 3) {
_userNameController.sink.addError("Please enter at least 3 words");
} else {
_userNameController.sink.add(userName);
}
}
//validation of Password
void updatePassword(String password) {
if (password.length< 4) {
_passwordController.sink.addError("Please enter more then 4 words");
} else {
_passwordController.sink.add(password);
}
}
//validation of Phone Number
void updatePhoneNumber(String phoneNo) {
if (phoneNo.length == 10) {
_phonenoController.sink.add(phoneNo);
}
else {
_phonenoController.sink.addError("Please enter valid Phone Number");
}
}
Затем создайте класс провайдера (bloc_provider.dart), который передает все провайдеры, используемые в приложении Flutter.
ListblocProviders = [
BlocProvider(create: (context) =>LoginPageCubit()),
];
Далее необходимо обернуть MaterialApp() с MultiBlocProvider(), который вы определили уже в bloc_provider.dart в main.
MultiBlocProvider(
providers: blocProviders,
child: constMaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
),
);
Затем создайте класс с именем «login_bloc_state.dart, в котором определите LoginBloc{}, а затем LoginInitial, который расширяется до LoginBloc{}.
abstract class LoginBloc {}
classLoginInitial extends LoginBloc {}
Наконец, в LoginScreen(login_screen.dart) необходимо определить LoginScreenCubit и добавить initiState(){}. В нем вы можете добавить WidgetsBinding.instance и получить доступ к методу dispose должным образом.
LoginScreenCubit? _loginScreenCubit;
@override
void initState() {
WidgetsBinding.instance?.addPostFrameCallback((_) {
_loginScreenCubit?.dispose();
});
super.initState();
}
Наконец, необходимо добавить BlocProvider в _loginScreenCubit. Он поможет вам получить правильный вывод формы входа в систему с такими значениями, как имя пользователя, пароль и номер телефона.
_loginScreenCubit = BlocProvider.of(
context,
listen: false,
);
Создайте UI и обратитесь к StreamBuilder для текстового поля, чтобы правильно обновлять данные в части UI. Вот код, который необходимо использовать.
StreamBuilder(
stream: _loginScreenCubit?.passwordStream,
builder: (context, snapshot) {
returnTextField(
onChanged: (text) {
_loginScreenCubit?.updatePassword(text);
},
decoration: constInputDecoration(
labelText: 'Password',
),
keyboardType: TextInputType.text);
}),
Когда мы запустим приложение, мы получим экранное изображение, как показано ниже.
Для кнопки Bottom Button мы также используем StreamBuilder. В нем мы передаем _loginScreenCubit в поток и cheBloc Widgetsck, проверяем, подтвердились данные или нет. После этого мы возвращаем GestureDetector() и применяем условие, что если данные обновлены, то этот экран переходит к следующему экрану, иначе кнопка входа отключается. Если snapshot.data истинен, то цвет кнопки будет тиловым, в противном случае — серым. Ознакомьтесь с нашим руководством по созданию плавающей кнопки действия в FLutter.
_bottomButton() {
return StreamBuilder(
stream: _loginScreenCubit?.validateForm,
builder: (context, snapshot) {
return GestureDetector(
onTap: () {
if (snapshot.hasData) {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Home1()));
}
},
child: Container(
decoration: BoxDecoration(
color: snapshot.hasData ? Colors.teal : Colors.grey,
borderRadius: BorderRadius.circular(30)),
height: 70,
width: MediaQuery.of(context).size.width,
child: const Center(
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 27),
),
),
),
);
},
);
}
Заключение
Этот блог показал, как выполнить валидацию формы во Flutter с помощью Bloc. Кроме того, существует множество методов, позволяющих сделать то же самое. Будет полезно, если вы используете правильную технику, подходящую для вашего проекта Flutter.