Skip to content

[Functional reactive programming (FRP)]πŸ’§ πŸ’§ πŸ’§ [Pure RxDart] Validation login form by using the BLoC pattern with RxDart - A new Flutter project featuring a faked authentication interface to demonstrate validation. Implemented with BloC pattern.

License

Notifications You must be signed in to change notification settings

hoc081098/flutter_validation_login_form_BLoC_pattern_RxDart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

24 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

flutter_validation_login_form_BLoC_pattern_RxDart

Sample Mobile Validation using rxdart and BLoC pattern

Screenshot

Video demo

Cannot load image

BLoC

1. Create stream controllers to receive input: email, password, submit

// Stream controllers final emailS = BehaviorSubject.seeded(''); final passwordS = BehaviorSubject.seeded(''); final isLoadingS = BehaviorSubject.seeded(false); final submitLoginS = StreamController<void>(); final subjects = [emailS, passwordS, isLoadingS, submitLoginS];

2. Map email text and password text to set of errors

// Email error and password error stream final emailError$ = emailS.map(validator.validateEmail).distinct().share(); final passwordError$ = passwordS.map(validator.validatePassword).distinct().share();

3. Combine email errors stream and password errors stream to valid stream

// Submit stream final submit$ = submitLoginS.stream .throttleTime(const Duration(milliseconds: 500)) .withLatestFrom<bool, bool>( Rx.combineLatest<Set<ValidationError>, bool>( [emailError$, passwordError$], (listOfSets) => listOfSets.every((errorsSet) => errorsSet.isEmpty), ), (_, isValid) => isValid, ) .share();

4. Perform login effect based on submit stream

// Message stream final message$ = Rx.merge( [ submit$ .where((isValid) => isValid) .withLatestFrom2( emailS, passwordS, (_, email, password) => Credential( email: email, password: password, ), ) .exhaustMap( (credential) => interactor.performLogin( credential, isLoadingS, ), ), submit$ .where((isValid) => !isValid) .map((_) => const InvalidInformationMessage()), ], ).publish();

That's all :)

Getting Started

For help getting started with Flutter, view our online documentation.

About

[Functional reactive programming (FRP)]πŸ’§ πŸ’§ πŸ’§ [Pure RxDart] Validation login form by using the BLoC pattern with RxDart - A new Flutter project featuring a faked authentication interface to demonstrate validation. Implemented with BloC pattern.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •