Skip to content
Mark G edited this page Jun 10, 2021 · 4 revisions

Introduction

The module is known as a feature, such: Login, Forget Password... and it's located at lib/module.

Each module contains: View, Interactor, Presenter & Router follow the definition of VIPER architecture and Module.

What is Module?

Module is a StatelessWidget with 3 missions

  • Create instance for View, Interactor, Presenter & Router
  • Connect between parts

  • Contain UI of this module
// HomeModule, a subclass of Module class
@override
Widget build(BuildContext context) {
  return const HomeViewImpl();
}

// App.dart
@override
Widget build(BuildContext context) {
  return HomeModule()
}

How to create a module

View

It requires 3 parts

// Delegate
abstract class AViewDelegate {
  void aButtonDidTap()

  void aTextFieldDidChange(String text)
}

// Interface
abstract class AView extends View<AViewDelegate> {
  static const viewKey = Key("view");

  void toggleAButtonHidden(bool isHidden);
}

// Implements
class AViewImpl extends StatefulWidget {
  const AViewImpl() : super(key: AView.viewKey);

  @override
  _AViewImplState createState() => _AViewImplState();
}

class _AViewImplState
    extends ViewState<AViewImpl, AModule, AViewDelegate>
    implements AView {
}

How's UI updated?

By adding event into BehaviourSubject each time a View Interface function is called, we listen to this subject to update the UI

// _AViewImplState
final aButtonHidden = BehaviourSubject<bool>()

void toggleAButtonHidden(bool isHidden) {
  aButtonHidden.add(isHidden)     
}

@override
Widget build(BuildContext context) {
  return Center(
     child: StreamSelector<bool>(
        stream: aButtonHidden,
        builder: (context, isHidden, child) => isHidden ? SizedBox().shrink() : Button("a button")
    )
  );
}
Clone this wiki locally