Making sense of random movements

Steven Barnett

My First Flutter App

Part 3

Google Flutter - take 3

My first go at a flutter app produced a reasonably useful app considering the minute amount of knowledge I started with. My second go introduced multiple pages to make the app more usable and to make the internal widget tree easier to navigate. And so, to my third go...

The app - a recap

Many years ago, I wrote a system for analysing management training competencies against the then management standards. I wrote it in a combination of JavaScript and Flash and in a bright mixture of garish orange and lime green (don't ask!).

The idea is simple, ask the minimum number of questions you have to in order to determine which of the Management Standards apply to the user and present them with a report of what they should know or be studying and how we arrived at that conclusion.

Thanks To

  • Maximillian Schwartzmuller
  • Academind
  • Udemy

Version 3 enhancements

This change was the scary one. It's the one I've been avoiding for a while so it's the one I absolutely need to get done before I avoid it to the point of not doing it.

So, what have I added for version 3 that is so scary...

Start-up

Ok, lets start with the simple one first. The startup splash screen in V2 was a bit of a bodge and, as I found out in debugging, was majorly broken if startup tasks didn't complete in the 750ms I gave it. That's now fixed and a task can take as long as it needs to to be completed. More importantly, it lets me debug properly.

Questionnaire and Analysis Loading

Scary, part 1. The questionnaire and the analysis text was previously hard coded into the program, making the code to populate the internal structures childs play but not realistic. A better system would be to load them from a file.

So, the questionnaire and the analysis are now loaded from a json file. The file is still part of my app bundle, but the hard but is reading the file, extracting the JSON and parsing it into objects. That's now done so, if I wanted to move the questionnaire file to the net and load it from there, it's trivial.

Scary - styling the app

From the screen shots and videos I have posted so far, it is kind of obvious that the app looks and feels like an Android app. Nice if you have an Android device, less so if you're primarily iOS. I need to make it look and work more like an iOS device. After all, that's the promise of Flutter - cross platform using platform specific styles.

What a nightmare!

First pass was to use the flutter_platform_widgets package. That very quickly gave me an app that worked and changed it's style depending on the device it was running on. It also gave me a crash on iOS Important to note, this is not a failing of the package and their support were brilliant in telling me how to work round what is, in fact, a Flutter bug.

However, that didn't feel satisfying and didn't help with my learning. It was great for helping me focus on what had to change though. So, I set about re-coding the app to become platform aware and to adjust the look and feel between Android and iOS the hard way - manually. I certainly learnt a lot doing this and feel it was totally worth the work involved.

Ignoring the splash screen which looks the same on both systems, I re-styled the question/answer page.

If you cancel the questionnaire part way through, you're going to be asked to confirm that's what you want to do. Android and iOS prompts are very different styles:

The nightmare screen was the results screen. Why? because it has tabs at the bottom to select between the profile and the questions and that mechanism is very different between Android and iOS. The library I had used made all that transparent and is definitely the way to go to simplify things. However, a lot of googling got me to a profile display:

Clicking on the Question Summary tab then gets me to the questions and answers display:

It's a big step forward for the app. Oddly enough, I find I don't particularly like the flat style of iOS, but it's lot closer to what I would produce with Swift/XCode and considerably closer to what an iOS user would expect to see and would be intuitively be able to use.

Next...

I continue through the course and will probably revisit this app as I go along. I'm less un-happy with the data model than I was but think there is amore I can do to fix that. I have ended up with fewer StateFul widgets as part of this set of changes, but I've done a section of the course on using the Provider package to better manage my data. I'm also going to need to be able to output the report to print or PDF (not a clue where to start).

Testimonials

Don't take my word for my abilities, take alook at other peoples opinions about me.