Одной из неотъемлемых частей многих приложений является проверка формы. Разработчики мобильных приложений всегда имеют дело с формами, потому что важно показывать пользователям соответствующие предупреждения всякий раз, когда они неправильно заполняют форму.
Разработчики должны выполнить эту задачу надлежащим образом, и для этого им необходимо написать определенную логику проверки. Здесь вы узнаете, как выполнить проверку формы с помощью flutter Bloc. Возникли ли у вас какие-либо проблемы при реализации этого шага и поиске опытного разработчика для правильного выполнения процесса проверки формы в вашем бизнес-приложении? Тогда наймите разработчика Flutter из bosctechlabs.com уже сегодня.
Что означает Флаттер Блок?
Flutter Bloc — это управление состоянием во Flutter. Вы можете получить к нему доступ, чтобы обрабатывать все состояния, которые вы хотите выполнить в приложениях флаттера. Это также действует как лучший и самый простой способ управления состоянием. Это позволяет вам без особых усилий добавлять любые изменения в приложение флаттера.
Независимо от вашего уровня, вы можете быстро изучить концепцию и добавить эту зависимость в свой проект. Google создал Bloc, который представляет собой не что иное, как шаблон проектирования, помогающий отделить бизнес-логику от уровня осведомленности. Кроме того, он позволяет разработчику эффективно использовать код.
Flutter Bloc имеет несколько виджетов, таких как Bloc Builder, Bloc Selector, Bloc provider, MultiBlocProvider, Bloc Listener и Multi Bloc Listener. Каждый виджет выполняет определенное действие, поэтому вы должны использовать тот, который подходит для вашего проекта Flutter.
Как сделать проверку формы во Flutter
Flutter SDK предоставляет готовый виджет и функциональные возможности, чтобы упростить жизнь пользователя при доступе к проверке формы. Для проверки формы существуют два разных подхода: виджет формы и пакет провайдера. Вот шаги, которые нужно выполнить, чтобы начать проверку формы во Flutter. Убедитесь, что вы правильно выполняете каждый шаг, чтобы получить желаемый результат.
- Создайте форму во Flutter; например, создайте простую страницу входа, используя такие поля, как адрес электронной почты, пароль, номер телефона и имя.
- Настройте форму для проверки
- Проверка ввода и средства форматирования ввода
- Доступ к методам Regex и методам расширения Dart в проекте флаттера
- Вам необходимо создать поля ввода, необходимые для формы.
- Сделать произвольное поле формы.
- Выполните проверку формы с помощью провайдера, блока или других методов.
Здесь вы подробно узнаете о блоке, потому что это лучший способ проверить форму. Библиотека блоков отображает пакет Flutter для проверки полей. Его обычно называют form_bloc.
Как выполнить проверку формы с помощью блока флаттера
Как только вы реализуете проверку формы с помощью flutter BLoC, вам нужно добавить зависимость в файл pubspec.ymal, чтобы получить все свойства блока. В результате вы можете эффективно использовать его для управления состоянием.
зависимости:
порхать:
SDK: флаттер
купертино_icons: ^ 1.0.2
rxdart: ^0.27.3
флаттер_блок: ^ 8.0.1
Здесь используются две зависимости rxdart и flutter_bloc. RxDart расширяет возможности контроллеров Stream и Dart Streams. Flutter_bloc — это использование Bloc Provider для рендеринга Counter-cubit на Counter-page и последующей реакции на изменения состояния с помощью BlocBuilder.
Создайте класс cubit (login_bloc_cubit.dart) для приложения, которое является абстрактным классом. Cubit расширяет базу блоков. Затем создайте класс с именем LoginScreenCubit(). После этого определите конструктор аргументов и все используемые вами контроллеры. Вот как это выглядит!
ЛогинЭкранКубит() : супер(ЛогинИнициал());
// определяем контроллеры
окончательный _userNameController = BehaviorSubject();
окончательный _passwordController = BehaviorSubject();
окончательный _phonenoController = BehaviorSubject();
Вы можете получить данные с помощью определенных и потоковых контроллеров, как указано ниже.
Stream get userNameStream =› _userNameController.stream;
Поток получить парольStream => _passwordController.stream;
Поток get phonenoStream =› _phonenoController.stream;
Теперь пришло время создать метод для очистки данных. Для этого вы можете использовать следующий код.
void dispose() {
обновитьИмяПользователя('');
обновить пароль ('');
обновитьНомерТелефона('');
}
Затем добавьте методы проверки. Это один из жизненно важных шагов во всем проекте, на котором вы можете проверить ценность пользователей.
//проверка имени пользователя
voidupdateUserName (строка имя_пользователя) {
if (userName.length‹ 3) {
_userNameController.sink.addError("Пожалуйста, введите не менее 3 слов");
} еще {
_userNameController.sink.add (имя пользователя);
}
}
//проверка пароля
void updatePassword (строковый пароль) {
if (password.length‹ 4) {
_passwordController.sink.addError("Пожалуйста, введите более 4 слов");
} еще {
_passwordController.sink.add(пароль);
}
}
//проверка номера телефона
void updatePhoneNumber(String phoneNo) {
if (phoneNo.length == 10) {
_phonenoController.sink.add(номер телефона);
}
еще {
_phonenoController.sink.addError("Пожалуйста, введите действительный номер телефона");
}
}
Затем создайте класс провайдера (bloc_provider.dart), который передает всех провайдеров, используемых в приложении Flutter.
Списокблокпровидерс = [
BlocProvider(создать: (контекст) =>LoginPageCubit()),
];
Затем вам нужно обернуть MaterialApp() с помощью MultiBlocProvider(), который вы уже определили в bloc_provider.dart в main.
Мультиблокпровайдер(
провайдеры: blockProviders,
ребенок: constMaterialApp(
debugShowCheckedModeBanner: false,
домашняя страница: ЛогинЭкран(),
),
);
Затем создайте класс с именем «login_bloc_state.dart», в котором вам нужно определить LoginBloc{}, а затем LoginInitial, который расширяется до LoginBloc{}.
абстрактный класс LoginBloc {}
classLoginInitial расширяет LoginBloc {}
Наконец, в LoginScreen(login_screen.dart) вы должны определить LoginScreenCubit и добавить initiState(){}. При этом вы можете добавить WidgetsBinding.instance и правильно получить доступ к методу dispose.
ЛогинЭкранCubit? _логинЭкранКубит;
@переопределить
void initState() {
WidgetsBinding.instance?.addPostFrameCallback((_) {
_loginScreenCubit?.dispose();
});
супер.initState();
}
Наконец, вам нужно добавить BlocProvider в _loginScreenCubit. Это поможет вам получить правильный вывод формы входа с такими значениями, как имя пользователя, пароль и номер телефона.
_loginScreenCubit = BlocProvider.of(
контекст,
слушать: ложь,
);
Создайте пользовательский интерфейс и получите доступ к StreamBuilder для текстового поля для обновления данных в части пользовательского интерфейса должным образом. Вот код для использования.
StreamBuilder(
поток: _loginScreenCubit?.passwordStream,
строитель: (контекст, снимок) {
вернутьтекстовое поле(
onChanged: (текст) {
_loginScreenCubit?.updatePassword(текст);
},
украшение: constInputDecoration(
labelText: «Пароль»,
),
тип клавиатуры: TextInputType.text);
}),
Когда мы запускаем приложение, мы получаем вывод на экран, как показано ниже.
Для нижней кнопки мы также используем StreamBuilder. В этом мы передаем _loginScreenCubit в потоке и cheBloc Widgetsck, независимо от того, проверены данные или нет? после этого мы возвращаем GestureDetector() и применяем условие, что если данные обновляются, то этот экран переходит к следующему экрану, в противном случае кнопка входа в систему отключена. Когда снимок. данные верны, тогда цвет кнопки будет бирюзовым, в противном случае он будет серым. Ознакомьтесь с нашим руководством по созданию плавающей кнопки действия во FLutter.
_нижняя кнопка () {
возврат StreamBuilder(
поток: _loginScreenCubit?.validateForm,
строитель: (контекст, снимок) {
возврат Детектор жестов(
onTap: () {
if (snapshot.hasData) {
Навигатор.push(
контекст, MaterialPageRoute(builder: (context) => Home1()));
}
},
ребенок: Контейнер(
украшение: BoxDecoration(
цвет: snapshot.hasData ? Цвета.бирюзовый : Цвета.серый,
borderRadius: BorderRadius.circular(30)),
рост: 70,
ширина: MediaQuery.of(context).size.width,
дочерний элемент: константный центр (
ребенок: Текст(
'Авторизоваться',
стиль: TextStyle(
цвет: Цвета.белый,
fontWeight: FontWeight.bold,
размер шрифта: 27),
),
),
),
);
},
);
}
Заключение
В этом блоге показано, как выполнить проверку формы во Flutter с помощью Bloc. Кроме того, существует множество методов для выполнения одних и тех же действий. Было бы полезно, если бы вы использовали правильную технику, подходящую для вашего проекта Flutter.
