TL;DR;
This year (2020) we delivered our first Line Of Business app that's built with Flutter to one of our customers.
The launch of the app was a success. The app went live without issues and the app was accepted by the users with ease.
We thought this app is a great way to demonstrate our app craftmanship of Line of Business Apps to a broader audience. That is why we decided to put a demo version of this app in the play store, app store, and on the web.
You can download the app for your device, or even try it out in your browser.
The creation of the demo app
Although the customer was using the app successfully in production, it was not ready yet to serve as a demo app.
We needed to make the ‘demo’ experience better:
- Replace customer’s logos and icons
- Add iOS and Web as a target
- Internationalize the app
- Use the camera as a barcode scanner
- Mock the communication with the backend
- Final words and screenshots
Replace customer’s logo and icons
This was not the most fun part. Normally these assets are delivered to us by a designer, but now I had to figure it out by myself (again). Nothing too hard, but tedious as I remembered how it was in the past.
Add iOS and Web as a target
Now the fun started. Support for iOS was already there, or at least for the most part. Adding Web support was as easy as switching to Flutter’s beta branch.
The only major part that had to be rewritten for the web was the datastore. We like to have the power of SQL in our line of business apps, but SQL support on the web is just not there, or at least not in the way we like it. Because this application is not too difficult, we reworked the datastore from SQLite tables to hive tables. This took roughly 2 days but was straightforward and easy.
Internationalize the app
The original app was only in Dutch. To internationalize the app we used localizely. Localizely is an ide plugin that uses arb files for input and generates code that follows the same pattern to localize apps as the rest of the Flutter framework. Any literal string in the code can be easily extracted to the arb files by pressing ALT-ENTER.
After that, I created a Google sheet where I could import the English arb file (which is a JSON formatted file) and machine translate the texts to other languages. With the help of some Google sheet plugins, the result can be extracted as arb/JSON files again. This was a bit sensitive to errors, but it got the job done. For larger projects, I would recommend a more professional workflow than Google sheets.
Use the camera as a barcode scanner
The original app was designed for a Zebra TC57 touch computer.
This is a ruggedized Android device with a dedicated barcode scanner. The barcode scanner of this device performs excellently.
On other devices, we wanted to use the camera as a fallback option. This is where things got a bit complicated.
The opensource ZXING barcode scan library is abandoned. Any plugin based on that is not future-proof.
Commercial libraries are performing very well, but are very expensive and have a subscription model. You will have to pay for the number of users per year. This is far from ideal for a demo app.
We ended up implementing the barcode recognition with Google’s ML-Kit. At this time ML-Kit is still in beta, but there is a working Flutter sample from the firebase team. We used this sample as a starting point.
On Zebra devices, we normally enable ‘picklist mode’. When in picklist mode, the crosshairs projected on the target (red laser-lines) determine the barcode that is scanned. This makes it easier to scan the right barcode when more barcodes are visible at the same time. For example when barcodes are printed on a sheet of paper.
To make it easier for the user to scan the right barcode with the camera, the user can suspend the recognition by touching the screen You can then position the barcode under the square. When you release your finger, the barcode recognition is active and barcodes are scanned. A green square indicates that the recognition is suspended, a red square indicates that the recognition is active.
Because every type of phone has different camera characteristics like resolution and autofocus, the barcode scanning performance can be tweaked in the settings of the app.
I think that iPhone users will be most satisfied with the barcode scanning performance.
Mock the communication with the backend
The production app communicates with a backend to exchange data. Of course, the demo app has to be able to function without a backend. Therefore there is a setting ‘Demo mode’ in the app. For the demo app, this setting is enabled by default. When enabled, the communication functions inside the app are replaced with default reasonable responses. That’s why you can test the app without a backend.
Final words and screenshots
We had a really good time, building this app in Flutter. I had great plans of explaining every detail of it on this blog. Unfortunately, COVID-19 made this impossible. Thankfully not because of illness, but because of lack of time.
Thank you all for reading and trying out the demo.
For questions about the app, you can contact me.
If you want a quotation for your Line Of Business app, contact us here.
