Using combineLatest to enable/disable a button, but button gets enabled even if some stream contains an error - dart

Question

Want to enable/disable a button based on user input. If all text input matches a certain condition, only then enable the "insert" button.
Normally button gets only enabled, if all the input field is correct. But if one or more incorrect, and user moves to another input field, and change it to correct/incorrect, button gets enabled, even if some field has wrong input. Check image:
Code for login bloc:
import 'package:rxdart/rxdart.dart';
class LoginScreenBloc {
final _firstCtrl = BehaviorSubject<String>();
final _lastCtrl = BehaviorSubject<String>();
final _userNameCtrl = BehaviorSubject<String>();
final _passwordCtrl = BehaviorSubject<String>();
Function(String) get changeFirst => _firstCtrl.sink.add;
Function(String) get changeLast => _lastCtrl.sink.add;
Function(String) get changeUser => _userNameCtrl.sink.add;
Function(String) get changePass => _passwordCtrl.sink.add;
final fieldSize = StreamTransformer<String, String>.fromHandlers(
handleData: (value, sink) {
if (value.length > 3) {
sink.add(value);
} else {
sink.addError("Can't be Empty!");
}
},
);
Stream<String> get firstname => _firstCtrl.stream.transform(fieldSize);
Stream<String> get lastname => _lastCtrl.stream.transform(fieldSize);
Stream<String> get username => _userNameCtrl.stream.transform(fieldSize);
Stream<String> get password => _passwordCtrl.stream.transform(fieldSize);
void insertValue() {
print("${_firstCtrl.value}");
print("${_lastCtrl.value}");
print("${_userNameCtrl.value}");
print("${_passwordCtrl.value}");
}
Stream<bool> get insertButton {
return CombineLatestStream(
[firstname, lastname, username, password],
(values) {
return true;
},
);
}
dispose() {
_firstCtrl.close();
_lastCtrl.close();
_userNameCtrl.close();
_passwordCtrl.close();
}
}
Code for the button:
Widget insertValue(BuildContext context, LoginScreenBloc bloc) {
return StreamBuilder<Object>(
stream: bloc.insertButton,
builder: (context, snapshot) {
return RaisedButton(
child: Text("Insert"),
onPressed: snapshot.hasData ? bloc.insertValue : null,
);
},
);
}

Answer 1

try to used opacity connect for button enable and put the condition for click and visiblity.. like this way..
Container(
child: Opacity(opacity: isValid ? 1.0 : 0.7,
child: RaisedButton(
color: Colors.red,
onPressed: _loginPressed,
child: Text('Sign In',
style: TextStyle(fontSize: 15.0, color: Colors.white)),
),
),
),

Answer 2

Something Similar you can find here
Stream<bool> get insertButton {
return CombineLatestStream(
[firstname, lastname, username, password],
(values) {
for(String i in values) {
if(i.length < 3) return false;
}
return true;
},
);
}
combineLatest only checks for event. It doesn't takes care of the error which gets out from the stream.

Answer 3

I found a solution that worked for me.
I had the same issue while building a login form.
This is my code:
class LoginFormManager with FormValidatorMixin {
final _email = BehaviorSubject<String>();
Stream<String> get email$ => _email.stream.transform(emailValidator);
Function(String) get setEmail => _email.sink.add;
final _password = BehaviorSubject<String>();
Stream<String> get password$ => _password.stream.transform(passwordValidator);
Function(String) get setPassword => _password.sink.add;
Stream<bool> get isFormValid$ =>
CombineLatestStream.combine2<String, String, bool>(email$, password$,
(email, password) {
if (email == _email.value && password == _password.value) {
return true;
} else
return false;
});
void submit() {
print(_email.value);
print(_password.value);
}
void dispose() {
_email.close();
_password.close();
}
}
The subjects _email and the _password store the last value received including errors.
The email$ and password$ streams only send data when the input received from the user passes the validators.
So in my case I just had to check if the email and password$ sent by email$ and password$ match the last value stored in the subjects of the _email and the _password.