https://github.com/hoc081098/flutter_validation_login_form_bloc_pattern_rxdart

[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.
https://github.com/hoc081098/flutter_validation_login_form_bloc_pattern_rxdart

bloc-pattern flutter flutter-apps flutter-bloc flutter-bloc-pattern flutter-form flutter-material flutter-reactive flutter-reactive-form reactive-functional-programming reactive-programming reactive-streams reactivex rx rxdart

Last synced: about 1 year ago
JSON representation

[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.

• Host: GitHub
• URL: https://github.com/hoc081098/flutter_validation_login_form_bloc_pattern_rxdart
• Owner: hoc081098
• License: mit
• Created: 2018-07-04T15:19:46.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2025-04-26T15:46:14.000Z (about 1 year ago)
• Last Synced: 2025-04-26T16:36:56.314Z (about 1 year ago)
• Topics: bloc-pattern, flutter, flutter-apps, flutter-bloc, flutter-bloc-pattern, flutter-form, flutter-material, flutter-reactive, flutter-reactive-form, reactive-functional-programming, reactive-programming, reactive-streams, reactivex, rx, rxdart
• Language: Dart
• Homepage: https://pub.dartlang.org/packages/distinct_value_connectable_observable
• Size: 5.19 MB
• Stars: 50
• Watchers: 5
• Forks: 12
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# flutter_validation_login_form_BLoC_pattern_RxDart

Sample Mobile Validation using `rxdart` and `BLoC pattern`

# Screenshot

[Video demo](https://www.youtube.com/watch?v=i5gS2BToNZs&feature=youtu.be)







# BLoC

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

```dart

// Stream controllers

final emailS = BehaviorSubject.seeded('');

final passwordS = BehaviorSubject.seeded('');

final isLoadingS = BehaviorSubject.seeded(false);

final submitLoginS = StreamController();

final subjects = [emailS, passwordS, isLoadingS, submitLoginS];

```

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

```dart

// 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

```dart

// Submit stream

final submit$ = submitLoginS.stream

    .throttleTime(const Duration(milliseconds: 500))

    .withLatestFrom(

      Rx.combineLatest, bool>(

        [emailError$, passwordError$],

        (listOfSets) => listOfSets.every((errorsSet) => errorsSet.isEmpty),

      ),

      (_, isValid) => isValid,

    )

    .share();

```

### 4. Perform login effect based on submit stream

```dart

// 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](https://flutter.io/).