Skip to content

micromuseum.cc: building a universal mobile app with Flutter

I recently started to work on a new project called micromuseum.cc. This is about creating a tiny replica of a museum exhibition which is accessible to people with disabilities built using open source software, models and hardware.

The project uses an NFC-RFID board to read RFID tags that trigger different actions in the exhibition.

For this project we need an App allowing to program the micromuseum base station, update the firmware and bind multimedia content to each RFID card. The micromuseum base station core is an ESP32 board, additionally the base station includes an RFID reader, a multimedia board and several LEDs, and there is a provision that other addons could be added in the future, working with an updated firmware.

This is a log of all aspects of the application development, take it as an example of all you need to think about when building - professionally - a mobile app. Feel free to skip what you already know, some things might be obvious for expert developers but not so obvious for beginner. I also think reading this material makes sense as a gentle introduction to Flutter.

Core requirements

The app should be able to:

  • Communicate via WiFI to the micromuseum base station
  • Access the phone’s NFC hardware, scanning for sensors
  • Check automatically for firmware updates and upload the firmware to the base station
  • Run on iOS and Android with a good performance. This includes easily passing the review processes in the major stores.

Which framework to use?

The obvious response being an old-school mobile developer could be to directly code the app separately using the native SDK from Apple and Google. Of course this is an option worth considering, unless you don’t have that much time to work on this specific aspect of the project, and this also include future work needed for upgrades etc.

The idea of having a hybrid app, able to run on different platforms and also written in a ”leaner" programming environment brings to the table React Native, Nativebase, and several other options.

But this time I’m going towards a more unconventional solution.

Flutter

Flutter works like a vm running Dart code while you develop on Android and iOS. But when you decide to ship your app, all your code is compiled natively into a c/c++ app. This means you don’t need to worry too much about performance, as all the widgets are really native and not run inside a browser view.

Flutter also solves elegantly the integration of native code for custom functionality, in my case the NFC services. Using a message passing bus, you basically can write native code for both platforms and interact with the app using a thin layer abstracting out the platform specific aspects.

Everything Flutter looks fantastic, including the documentation. Yes, you need to learn Dart, but looks much like a modern Javascript. So at least those coming from ES6 should feel at home pretty soon. In both cases I feel that being Google projects, and used mostly internally, the Dart-Flutter pair feels very robust and tidy. The Flutter community is also growing fast, so I can take this bet.

Starting a quick mockup for the app in Flutter - actually that was my first flutter project - I found out they implemented all the things that you could expect from a “modern” frontend dev environment, including routing, easy reusing of components, javascript stylesheets, class-based components, and so on.

It’s also really easy to include external packages, and there’s a ton of them right now in pub.dartlang.org. Basically pub is the pip for Dart. Or maybe the npm.

I also found out the the state management side is not really well settled. Google devs propose to use a model called BLoC, aka Business Logic Component. This is a stream-based model, so you manage the state pushing updates to a stream’s sink while components can subscribe to events coming from the stream.

The alternative is Redux. This is the standard React framework, so possibly is more documented / stable. Or might be worth exploring the possibility of managing the state using Streams only with a custom solution.

Some links where State management in flutter is discussed:

Learn more