pub package

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/material.dart';
import 'package:mvvm/mvvm.dart';

/// ViewModel
class MyHomePageViewModel extends ViewModel {
  final timer$ = BindableProperty.$tick(
      duration: const Duration(milliseconds: 10), autostart: true, initial: 0);

  @override
  init() {
    registerProperty(#counter, BindableProperty.$value(initial: 0));
  }

  void incrementCounter() {
    updateValue<int>(#counter, (value) => value + 1);
  }
}

/// View
class MyHomePage extends View<MyHomePageViewModel> {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);

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

  pad(int value) => '$value'.padLeft(2, '0');

  @override
  Widget build(BuildContext context, MyHomePageViewModel model) {    
    return Scaffold(
        appBar: AppBar(title: Text(title)),
        body: Center(
            child:
                Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          $watch<int>(model.timer$,
              builder: (context, value, child) =>
                  Text('${pad(value ~/ 100)}.${pad(value % 100)}')),
          const Text('You have pushed the button this many times:'),
          model.$watchFor<int>(#counter,
              builder: (context, value, child) =>
                  Text('$value', style: Theme.of(context).textTheme.headline4))
        ])),
        floatingActionButton: FloatingActionButton(
            onPressed: model.incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add)));
  }
}

/// run
void main() => runApp(MaterialApp(
      title: 'Flutter MVVM Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter MVVM Demo Home Page'),
    ));

Examples

APIs

Documentation

BindableProperty

  • $value
  • $adaptive
  • $async
  • $custom
  • $periodic
  • $tick
  • $merge
  • $mergeMap
  • $transform
  • $filter

WidgetBuilder

  • $watch
  • $watchFor
  • $any
  • $anyFor
  • $anyMap
  • $anyMapFor
  • $cond
  • $condFor
  • $if
  • $ifFor
  • $switch
  • $switchFor
  • $select
  • $build

ViewModel

  • registerProperty
  • getProperty
  • requireProperty
  • getPropertyOf
  • requirePropertyOf
  • getProperties
  • requireProperties
  • getValue
  • requireValue
  • setValue
  • setValues
  • updateValue
  • notify

View

  • createViewModel
  • build
  • didChangeDependencies
  • activate
  • deactivate
  • didUpdateWidget

ViewBuildContext

  • setState
  • model

License

MIT

Libraries

mvvm
yichen d.unicreators@gmail.com