mvvm 0.4.0

A Flutter MVVM. It uses property-based data binding to establish a connection between the ViewModel and the View, and drives the View changes through the ViewModel.

A Flutter MVVM (Model-View-ViewModel) implementation. It uses property-based data binding to establish a connection between the ViewModel and the View, and drives the View changes through the ViewModel.

一个 Flutter 的 MVVM(Model-View-ViewModel) 实现。 它使用基于属性 (property) 的数据绑定在视图模型 (ViewModel) 与视图 (View) 之间建立关联，并通过视图模型 (ViewModel) 驱动视图 (View) 变化。

import 'package:flutter/widgets.dart';
import 'package:mvvm/mvvm.dart';
import 'dart:async';

// ViewModel
class Demo1ViewModel extends ViewModel {
  late final timer$ = BindableProperty.$tick(
      duration: const Duration(milliseconds: 10),
      onTick: (tick) =>
          tick % 100 == 0 ? setValue<String>(#text, "${tick ~/ 100}") : null,
      statusChanged: (_) => setValue<bool>(#started, _.started),
      autostart: true,
      initial: 0);

  Demo1ViewModel() {
    registerProperty(#started, BindableProperty.$value(initial: false));
    registerProperty(#text, BindableProperty.$value(initial: "-"));
  }
}

// View
class Demo1View extends View<Demo1ViewModel> {
  format(int value) => "${value % 100}";

  @override
  Demo1ViewModel createViewModel() => Demo1ViewModel();

  @override
  Widget build(ViewBuildContext context, Demo1ViewModel model) {
    return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      $watch<int>(model.timer$,
          builder: (context, value, child) =>
              Text(format(value), textDirection: TextDirection.ltr)),
      context.$watchFor<String>(#text,
          builder: (context, value, child) => Text(
                value,
                textDirection: TextDirection.ltr,
                style: TextStyle(fontSize: 24),
              )),
      const SizedBox(height: 20),
      GestureDetector(
          onTap: model.timer$.toggle,
          child: context.$watchFor<bool>(#started,
              builder: (context, value, child) => Text(value ? "STOP" : "START",
                  textDirection: TextDirection.ltr)))
    ]);
  }
}

// run
void main() => runApp(Demo1View());

[▶️ https://www.bilibili.com/video/BV18r4y1Y7dP](https://www.bilibili.com/video/BV18r4y1Y7dP)

Example

• Login
• Bindable
• Timer

APIs

Documentation

License

MIT