mvvm 0.5.2 icon indicating copy to clipboard operation
mvvm: ^0.5.2 copied to clipboard

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.

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

29
likes
140
pub points
76%
popularity

Publisher

unverified uploader

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.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on mvvm