Как проверить форму с помощью Flutter BLoC?

Одной из неотъемлемых частей многих приложений является валидация форм. Разработчики мобильных приложений всегда имеют дело с формами, потому что важно показывать соответствующие предупреждения пользователям, когда они неправильно заполняют форму.

Разработчики должны выполнять эту задачу надлежащим образом, и для этого им необходимо написать специальную логику валидации. Здесь вы узнаете, как выполнить валидацию формы с помощью 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.

Оцените статью
devanswers.ru
Добавить комментарий