Bazaar in MVC
By: Greg Perry
Tags: iOS App Development, Mobile App Development, Android App Development, Programming, Flutter

Google’s Provider Design Pattern converted to MVC Design Pattern

I turned to the website, flutterawesome.com, to find a sample app that I would then implement into it the MVC design pattern. e-Bazaar is a wonderful sample app provided by Bugudi Ramu highlighting an array of UI features available in Flutter. With his permission, I adapted the MVC pattern into this app just to see how it would turn out. This article will detail the experience. As it happens, some further functionality was introduced to highlight what features are available in the MVC framework that I used in my conversion — to a sample app originally designed to demonstrate Flutter’s user interface capabilities.

Merely An Exercise

This was merely an exercise. I found while developing apps using the MVC framework, I would draw in an innate bias. You see, while building an app from the ground up, I would have the tendency to ‘accommodate’ the code to work with the framework — I don’t want that to happen. And so, I began to seek out existing sample apps to see how and if the MVC framework could be implemented and yet result in the exact same app with regards to ‘look and feel’ and functionality. After all, this was a framework — it’s to be the foundation of any app and should work with any app. I found the sample app, e-Bazaar, to do just that.

Again, this exercise was no reflection on Bugudi Ramu’s own programming. His is a very good app. He intended it to only be a sample app. Further, he had no intention of applying any sort of pattern or structure to it. It was to reflect an interesting user interface alone. It was that that attracted me to it.

Admittedly, this article is little to do with the implementation of MVC to the e-Bazaar sample app and more about the MVC pattern interpretation itself — as it’s implemented by the library package, mvc_application. In fact, this article is not only to highlight the merits of using a design pattern in developing software or to demonstrate how the use of a design pattern accentuates attributes that accelerates software development. Attributes, for example, that allows for multiple developers to easily work on the project separately yet in parallel; that allows new developers to come in at any point in time and over time and easily get to work in developing and or later maintaining the app. This article is to also highlight the particular capabilities of the library package, mvc_application, as well. That’s because it already supplies the functions and features commonly found in every mobile app thus expediting the overall development with built-in capabilities.

I Like Screenshots. Click For Gists.

As always, I prefer using screenshots over gists to show concepts rather than just show code in my articles. I find them easier to work with. However, you can click/tap on them to get at the code in a gist or in Github if you must. Ironically, it’s better to read this article about mobile development on your computer than on your phone. Besides, we program on our computers; not on our phones. For now.

No Moving Pictures On Social Media

Further, there are a few gif files in this article demonstrating functions and features in ‘moving pictures.’ However, I’m told viewing such files is not possible when reading this article on platforms like Instagram, Facebook, etc. You’ll see empty square spaces where the gif files should be. Please, be aware of this. I would recommend reading this in a browser on medium.com.

Let’s begin.

MVC in its Code and in its Directories

In all the projects I’ve worked on that involved this MVC framework, I’ve arranged the directory structure itself to reflect the three components of the MVC design pattern:

model - the data, view - the interface, controller - the logic

Doing so organizes the source code into these three discernible roles allowing for other developers as well as myself to return to the project at a later time and readily determine where certain pieces of code reside and what it does.

Again, there was no intended directory structure in the original sample app. However, in the ‘MVC’ variation displayed below on the right, you can see the directories are presented with an intended structure. The ‘MVC’ variation is, of course, available for download on Github, bazaar.

Even if you’re not familiar with my past articles on the subject, you could possibly discern ‘the role’ of each Dart file listed below. What each does in the app and possibly even where in the app each file is to execute.

As an example, there’s a little red arrow displayed in the directory listing above. It’s pointing at a list of Dart files found in a directory labelled, view. Looking at the parent directory names staggered above that one, if you guessed these were the screens listed on a drawer widget found in the app’s home widget. You’d be right.

Note, during the design pattern integration, I made the effort to preserve as much as possible the existing code and the names of the Dart files from the original sample app and yet convey now the intended organization and structure.

Further, you can deduce there is a login screen for this app. Again, looking at the directories, you’ll find a folder named, login. In that folder, you’ll see the three folders with names associated with the MVC design pattern. Thus, you can see where the code for the data, for the screen, and for the logic is all located. As it happens, the directories are listed in alphabetical order and not conveniently in order of the design pattern’s abbreviation: MVC.