Текстовые поля с проверкой в ​​библиотеке Flutter BLoC

Я пытаюсь изучить шаблон BLoC во Flutter, но не понимаю. Я следил за учебником по Udemy, из которого сгенерировал следующий код для простой формы входа:

BLoC Class

import 'dart:async';

import 'package:login_bloc/src/blocs/validators.dart';

class LoginBloc extends Validators {
  final _email = StreamController<String>();
  final _password = StreamController<String>();

  // Return Stream data
  // Streams are run thru validator first
  Stream<String> get getEmail => _email.stream.transform(validateEmail);
  Stream<String> get getPassword => _password.stream.transform(validatePassword);

  // Change data on stream
  Function(String) get changeEmail => _email.sink.add;
  Function(String) get changePassword => _password.sink.add;

  // Named by convention. Quiets Dart warning.
  dispose() {
    _email.close();
    _password.close();
  }
}

UI Class

import 'package:flutter/material.dart';
import 'package:login_bloc/src/blocs/login_bloc.dart';
import 'package:login_bloc/src/providers/provider.dart';

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final loginBloc = Provider.of(context);
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: SafeArea(
        child: Column(
          children: <Widget>[
            emailField(loginBloc),
            passwordField(loginBloc),
            SizedBox(height: 10.0),
            submitButton(),
          ],
        ),
      ),
    );
  }

  Widget emailField(LoginBloc loginBloc) {
    return StreamBuilder<Object>(
        stream: loginBloc.getEmail,
        builder: (context, snapshot) {
          return TextField(
            keyboardType: TextInputType.emailAddress,
            decoration: InputDecoration(
              hintText: '[email protected]',
              labelText: 'Email Address',
              errorText: snapshot.error,
            ),
            onChanged: loginBloc.changeEmail,
          );
        });
  }

  Widget passwordField(LoginBloc loginBloc) {
    return StreamBuilder<Object>(
        stream: loginBloc.getPassword,
        builder: (context, snapshot) {
          return TextField(
            obscureText: true,
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
              labelText: 'Password',
              errorText: snapshot.error,
            ),
            onChanged: loginBloc.changePassword,
          );
        });
  }

  Widget submitButton() {
    return RaisedButton(
      child: Text(
        'Login',
        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
      ),
      color: Colors.blue,
      onPressed: () => {},
    );
  }
}

Валидаторы очень просты: в основном электронная почта должна содержать знак «@», а пароль должен содержать более 4 символов. В этом есть смысл, когда я продолжаю следовать, но как только я пытаюсь реализовать самостоятельно, все становится нечетким. Итак, в рамках своего обучения я хотел попробовать преобразовать эту простую форму входа в систему для использования библиотек BLoC и Flutter_BLoC, думая, что это отвлечет от некоторых сложностей и будет легче для понимания.

После серьезной работы я все еще не могу понять, как указать, какое состояние я пытаюсь удерживать, и какие события я пытаюсь передать. У меня закончились учебники для просмотра на YouTube, и почти все они используют приложение счетчика в качестве примера с одним типом переменной INT. Это также усложняется тем фактом, что в библиотеке только что был ОГРОМНЫЙ капитальный ремонт, и почти все руководства теперь устарели.

Есть ли какие-нибудь примеры того, как это сделать с помощью библиотеки v6? В частности, меня интересует, как активировать кнопку отправки только тогда, когда оба поля были проверены.


person ConleeC    schedule 09.08.2020    source источник


Ответы (1)


Вы можете использовать пакет rxdart, который можно найти здесь. Rxdart добавляет дополнительные возможности в Dart Streams и StreamControllers. Один из них - combineLatest2(), который в основном объединяет значение двух потоков и выводится как одно значение потока.

Вы можете узнать больше о combineLatest2() методе по этой ссылке.

Пример:

Stream<bool> get isValid => Rx.combineLatest2(getEmail, getPassword, (a,b) => true);
person Mhark Batoctoy    schedule 17.09.2020