What is the MVC Design Pattern?

The Model View Controller (MVC) design pattern is more of an architectural pattern that separates your applications Data (Model) from its interface (View) and from the Logic (Controller).

Let's have a review on the initial flutter boilerplate that you see when you create a new flutter project, this project has just one functionality which is to increment a number, and don't forget this happens whenever the floating-point button is touched.

In this article, we are going to rewrite the codes you see in the boilerplate using the MVC design

Let's look closely at the structure of our project folder to have a clear understanding too.

We can see that the structure is well organized such that the logic of our application lies in the controller folder, while the interface and models reside in the view and model folders.

Let's install the mvc_package

   dependencies:
        mvc_pattern:^3.4.1

After installing the mvc_package we can proceed with creating a controller in the controller folder to house the logic of our project

main_controller.dart

import 'package:mvc_pattern/mvc_pattern.dart';

class MainController extends ControllerMVC{
  int number = 0;
  GlobalKey<ScaffoldState> scaffoldKey;

  MainController(){
    this.scaffoldKey = new GlobalKey<ScaffoldState>();
  }
void incrementCounter(){
  setState((){
     number = number +=1;
  });

}

void decrementCounter(){
  if(number == 0){
    scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("Number cant go below zero"),));
  }else{
    setState((){
      number = number--;
    });
  }
}
}

The above class MainController class extends the ControllerMVC from the mvc_pattern package we installed

import 'package:car/src/controller/main_controller.dart';
import 'package:flutter/material.dart';
import 'package:mvc_pattern/mvc_pattern.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends StateMVC<MyHomePage> {
  MainController _con;
  _MyHomePageState():super(MainController()){
    _con=controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("MVC_SAMPLE"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${_con.number}',
              style: Theme.of(context).textTheme.display1,
            ),


          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _con.incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

If you look closely no button decrements the number, but I have implemented the decrement function in the controller, all you have to do is create a button for it and then reference it in the main.dart file.

📔 Flutter + MVC Design Pattern