Flutter BLoC库中具有验证的文本字段

Question

我正试图在Flutter中学习BLoC模式，但我就是不明白。我遵循了一个关于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: '[e-mail]',
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库做到这一点的示例？特别是，我感兴趣的是如何只有在两个字段都经过验证后才能激活提交按钮。

Answer 1

您可以在此处使用rxdart包。Rxdart为Dart Streams和StreamControllers添加了额外的功能。其中之一是combineLatest2()，它基本上组合了两个流的值并作为单个流值发射。

您可以从这个链接中阅读更多关于combineLatest2()方法的信息。

示例：

Stream<bool> get isValid => Rx.combineLatest2(getEmail, getPassword, (a,b) => true);