Provider MVC

Flutter Provider MVC Implementation.

Getting Started

This project is the base of the Flutter package provider_mvc

For more information see this article Flutter Provider MVC Implementation

Examples

Let's see some examples of MVC app.

Counter App

As a default example, we developed our version of the famous flutter counter app.

image

Step 1

Model class definition. Because our app is too basic we can even skip model declaration but for pedagogical reasons we will create one. The model can be an easy PODO (Plain Old Dart Object).

class Value {
    int value = 0;
}

Step 2

Controller class definition:

class CounterController extends Controller {
  final Value _count = Value();

  //Optional constructor to create a tagged CounterController objects
  //CounterController({String tag}) : super(tag: tag);

  int get count => _count.value;

  /*set count(int v) {
    _count.value = v;
    update();
  }*/

  void reset() {
    _count.value = 0;
    update();
  }

  void increment() {
    _count.value++;
    update();
  }
}

Step 3

View class definition.

class CounterView extends View<CounterController> {
  @override
  Widget builder(
          BuildContext context, CounterController controller, Widget widget) =>
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '${controller.count}',
            style: Theme.of(context).textTheme.headline4,
          ),
          RaisedButton(
            child: Text("Reset"),
            onPressed: controller.reset,
          )
        ],
      );

  @override
  CounterController create(BuildContext context) =>
      Controller.put<CounterController>(CounterController());

  CounterController get controller =>
      Controller.of<CounterController>()?.single;
}

Step 4

The main class.

void main() => runApp(CounterApp());

class CounterApp extends StatelessWidget {
  final _counter = CounterView();

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Demo Home Page'),
          ),
          body: Center(
            child: _counter,
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => _counter.controller?.increment(),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        ),
      );
}

Other examples

BG Color App

image

Bulbs App

image

Movie List App

image

Github Portfolio App

image

Project Management Board App

image

Libraries

controller
view