provider_mvc 0.0.11

Flutter Provider MVC Implementation that make state management easier.

provider_mvc

Flutter Provider MVC Implementation.

Getting Started

For more information see this Flutter Provider MVC Implementation

Example

Let's see an example of MVC app.

The app contains 3 sliders each one represent a primary color (Red/Green/Blue) and every time a slider value changed the background color should reflect the sliders colors merge. Also the app has a reset fab.

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).

File (value.dart)

class Value {
    int value = 0;
}

Step 2

Controller class definition:

File(slider_controller.dart)

import 'package:provider_mvc/controller.dart';
import '../models/Value.dart';

class SliderController extends Controller {
    final Value _value = Value();

    SliderController(String tag) : super(tag: tag);

    set value(int v) {
        _value.value = v;
        refresh();
    }

    int get value => _value.value;
}

File(home_controller.dart)

import 'package:flutter/material.dart';
import 'package:provider_mvc/controller.dart';

class HomeController extends Controller {
    Color _bg = Colors.black;

    set bg(Color c) {
        _bg = c;
        refresh();
    }

    Color get bg => _bg;
}

Step 3

View class definition.

File(slider_view.dart)

import 'package:flutter/material.dart';
import '../controllers/slider_controller.dart';
import '../controllers/home_controller.dart';
import 'package:provider_mvc/controller.dart';
import 'package:provider_mvc/view.dart';

class SliderView extends View<SliderController> {
    final Color _color;

    SliderView(this._color);

    @override
    Widget builder(BuildContext context, SliderController controller, Widget widget) {
        return Slider(
            activeColor: _color,
            value: controller.value.toDouble(),
            min: 0,
            max: 255,
            divisions: 256,
            label: '${controller.value}',
            onChanged: (value) {
                controller.value = value.toInt();
                Controller.of<HomeController>().single.bg = Color.fromARGB(255,
                    Controller.find<SliderController>('RED').single.value,
                    Controller.find<SliderController>('GREEN').single.value,
                    Controller.find<SliderController>('BLUE').single.value);
            }
        );
    }

    @override
    SliderController create(BuildContext context) {
        String tag;

        if (_color == Colors.red) tag = 'RED';
        if (_color == Colors.green) tag = 'GREEN';
        if (_color == Colors.blue) tag = 'BLUE';

        if (tag == null) throw Exception('Only RED/GREEN/BLUE colors allowed!');

        return Controller.put<SliderController>(SliderController(tag));
    }
}

File(home_screen.dart)

import 'package:flutter/material.dart';
import 'package:provider_mvc/controller.dart';
import '../controllers/slider_controller.dart';
import '../controllers/home_controller.dart';
import 'package:provider_mvc/view.dart';
import '../views/slider_view.dart';

class HomeScreen extends View<HomeController> {
    @override
    Widget builder(BuildContext context, HomeController controller, Widget widget) {
        return Scaffold(
            backgroundColor: controller.bg,
            body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                    SliderView(Colors.red),
                    SliderView(Colors.green),
                    SliderView(Colors.blue),
                ],
            ),
            ),
            floatingActionButton: FloatingActionButton(
                onPressed: () {
                    Controller.of<SliderController>().forEach((ctrl) => ctrl.value = 0);
                    controller.bg = Colors.black;
                },
                child: Icon(Icons.refresh),
            ),
        );
    }

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

Step 4

The main class.

File(main.dart)

import 'package:flutter/material.dart';
import './screens/home_screen.dart';

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

class MainApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) => MaterialApp(
        home: HomeScreen(),
        debugShowCheckedModeBanner: false,
    );
}