momentum mvc pattern

a super powerful mvc pattern flutter state management library inspired with mvc pattern with a very flexible dependency injection.

features mvc pattern

• very flexible dependency injection to easily instantiate any dependencies once and reuse multiple times across the app.
• persistence support for states and routing. use any storage provider.
• time travel (undo/redo) support in one line of code out of the box.
• optional equatable support. (improves time travel).
• immutable states/models. there’s only one way to rebuild a widget.
• you can reset a state or all of the states.
• skip rebuilds. widget specific.
• easy to use event system for sending events to the widgets. for showing dialogs/snackbars/alerts/navigation/etc.
• momentum doesn’t have any dependencies so it increases compatibility in other platforms.
• supports older versions of flutter.

core concepts

• momentum only uses setstate(...) under the hood.
• the method model.update(...) is the setstate of momentum.
• modular project structure because of the component system (momentumcontroller + momentummodel).
• everything can be reusable from widgets, services, data, state to logic.
• everything is in the widget tree.

preview

in this image the process was like this:

• open the app (home page).
• go to add new list page.
• input some data.
• close and terminate on task view.
• reopen the app again.

and magic happens! all the inputs were retained and not just that but also including the page where you left off. navigation history is also persisted which means pressing the system back button will navigate you to the correct previous page.

dark mode

this theming is done manually using momentum.

source code for this example app

this example app shows how powerful momentum is.

quick start

you only have to install one package and momentum doesn’t have any peer dependencies.

create

to get started, flutter create an app. name it however you want.

installing

1. add this to your package’s pubspec.yaml file:

   dependencies:
     momentum: ^1.1.6
   

   it is not recommended to use the one from github because the changes there are subject to breaking changes on future pushes to the repository.

2. you can install this package from the command-line:

   flutter pub get
   

   alternatively, your editor might support flutter pub get.

3. now in your dart code, you can use:

   import 'package:momentum/momentum.dart';
   

   you only have to import this one file alone and you’ll be able to use all momentum api.

counter app example

copy this example counter app code and run it:

import 'package:flutter/material.dart';
import 'package:momentum/momentum.dart';

void main() {
  runapp(
    momentum(
      controllers: [countercontroller()],
      child: myapp(),
    ),
  );
}

class myapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return materialapp(
      title: 'momentum state management',
      theme: themedata(primaryswatch: colors.blue),
      home: homewidget(),
    );
  }
}

class countercontroller extends momentumcontroller<countermodel> {
  @override
  countermodel init() {
    return countermodel(
      this,
      value: 0,
    );
  }

  void increment() {
    var value = model.value; // grab the current value
    model.update(value: value + 1); // update state (rebuild widgets)
    print(model.value); // new or updated value
  }
}

class countermodel extends momentummodel<countercontroller> {
  countermodel(
    countercontroller controller, {
    this.value,
  }) : super(controller);

  final int value;

  @override
  void update({
    int value,
  }) {
    countermodel(
      controller,
      value: value ?? this.value,
    ).updatemomentum();
  }
}

class homewidget extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text('momentum counter'),
      ),
      body: center(
        child: column(
          mainaxisalignment: mainaxisalignment.center,
          children: <widget>[
            text(
              'you have pushed the button this many times:',
            ),
            momentumbuilder(
              controllers: [countercontroller],
              builder: (context, snapshot) {
                var counter = snapshot<countermodel>();
                return text(
                  '${counter.value}',
                  style: theme.of(context).texttheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingactionbutton: momentumbuilder(
        controllers: [countercontroller],
        // we don't need to rebuild the increment button.
        dontrebuildif: (_, __) => true,
        builder: (context, snapshot) {
          var controller = snapshot<countermodel>().controller;
          return floatingactionbutton(
            onpressed: controller.increment,
            tooltip: 'increment',
            child: icon(icons.add),
          );
        },
      ),
    );
  }
}

• inside main() method momentum is set as the root widget of the app.
• the countercontroller is instantiated in controllers parameter.
• inside the countercontroller there is an increment() method that updates the value. it calls the method model.update(...) which will rebuild the widget.
• the countermodel is where the props are defined and currently has the value property.
• the homewidget uses momentumbuilder which is used for displaying the model properties to the screen. you can call model.update(...) to rebuild this widget.