Flutter BLoC 库中带验证的文本字段
Text fields with validation in the Flutter BLoC library
我正在尝试学习 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: 'you@example.com',
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 库执行此操作?特别是,我对如何仅在验证两个字段时才激活提交按钮感兴趣。
我正在尝试学习 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: 'you@example.com',
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 库执行此操作?特别是,我对如何仅在验证两个字段时才激活提交按钮感兴趣。