Skip to content

micromuseum.cc: building the widgets

Structuring the app

I started creating an empty flutter app, using the SDK downloaded from https://flutter.io. 

flutter create —org com.fabctory mm_mobile
All the details on building a basic app are in the Flutter getting started. https://flutter.io/docs/get-started/codelab

Before creating the screens I think it’s useful to structure the app in a way that can be easily managed while the app grows. Flutter just expects all the code to reside in a lib/ folder

I found this example ( https://github.com/nisrulz/flutter-examples/tree/master/handling_routes ) very useful as a starting point.

So the lib folder now becomes:

lib/
screens/
…
main.dart
Based on which solution you choose for state management, you can create other folders in this hierarchy

The screens/ folder contains all the different screens as defined in the XD Mockup.

Think in widgets

As the examples show, the basic idea is that everything in flutter is a widget. What you need to know about widgets is that they render something on screen, can have state, contain other widgets, and are rebuilt dynamically every time the state changes.

Thinking in terms of widgets is also mandatory for designing the UI. The process in this case is to break all the (possibly reusable) pieces of an app GUI and turning them into independent widgets that we can go an use as black-boxes. “Loose coupling" is the keyword here, but it basically means try to keep things separate as much as you can. Nothing new if you come from React, Vue et al.

Using a simple tool like Preview app I can start annotate each screen, by highlighting and giving names to the widgets. Where Flutter provides a widget, I just reuse that, otherwise make a custom widget hierarchy myself.

I’m also going to omit basic widgets like Image and Text as well as all the other layout-specific classes, like Row, Column, Grid, unless useful for the specific screen.

Welcome Tour screens

Components:
* Carousel:
    * [ CarouselPage, … ]
        * Image, Text
    * DotsIndicator
* FlatButton

Reused for:

  • All welcome screens

NOTE: the last one should rename the skip button to a continue button

Find base station

Components:
* ScanDialog:
    * Column
        * Widget: image
        * Widget: title
        * Widget: widget

I’m defining this screen in order to be reused for all “scanning tasks”. This makes the app more consistent to the user and saves a lot of time.

It’s common for apps to have a number of “jolly” screens that are reused over and over, this usually applies to error messages, settings and preferences, progress / activity indicators.

It will be easy to extend the ScanDialog for finding a base or scanning a tag, ie. BaseScanDialog, TagScanDialog, FirmwareUpdateCheckDialog, etc.