Mobile App with Flutter and Multiple CMS Backends

Objective

The goal of this project was to build a proof-of-concept for a no-code-required mobile application builder. 

Technology Selection

For the mobile side, Flutter was chosen to build a cross-platform app. For the backend, multiple CMS options (WordPress, Cockpit, and Strapi) were evaluated to compare their relative strengths and weaknesses . With the framework in place, any other CMS or REST API can be easily substituted.

Flutter Application

The Flutter application is built using the Bloc Library, and the initial version is heavily based on two of their examples: infinite scroll and the todo application. This initial proof-of-concept features a single list of posts fetched from the CMS API. Future iterations will include offline caching of content, dynamic menus, and themes.

Most of the code is the same regardless of which CMS backend is used. The code is broken out into separate files and sub-directories to improve readability and maintainability. The Post model contains the data for a single post. The PostListScreen and PostDetailsScreen display the list of posts or a single post, respectively. The PostBloc handles management of the current application state and changes the the state in response to events. Its main responsibility in this simple example is to to load the data from a pluggable PostsRepository.

The repository is responsible for the actual work of loading the data from the backend CMS and transforming it into the uniform Post model. There is a unique repository for each CMS as each has its own API layout and JSON response format. The repository adds annotations to the Post that are later used to display the data properly. The main differences are html vs markdown, and how images are resolved.