From Design to Code with Flutter

Etornam Sunu Bright
3 min readFeb 9, 2019
picture from irekasoft.com blog

I’ve been experimenting Flutter.io a lot these days looking primarily, on trying different UIs and looking at their performance use-cases. So far, I’ll admit that Flutter is AWESOME. In this short post, I’ll share how I designed UI posted on LinkedIn describing a redesign of GhanaPost app. The interesting aspect for me is using Flutter to accomplish the challenge.

Redesign by Joshua Graham on LinkedIn

The design posted on LinkedIn looks clean and simple compared with the original app designed contracted by the Government on behalf of the nation. For my design challenge, I decided to do that during the weekend, hahaha. Weekend hack.

Yesterday (Thursday 7th January 2019), I wanted to just write a few lines of code on the redesign but before I knew it, I was done implementing the design😂😂😂. It was really a surprise to me since I initially thought it may take some time since I know implementing something like that in Android java/kotlin will take a huge effort to get all done.

Implementation of the redesign in Flutter

Lesson Learnt

I come from Android Java/Kotlin app development background and knowing the stress developers like me go through to implement some basic features and design which Flutter takes care of is pretty exciting to me.

Although everything in Flutter is a widget, you can just nest any type of widget into another. Some widgets have distinct properties have will prevent that and will return an error when you try to build. For example, I tried to nest a ListView.builder() widget inside a ListView() widget and got some error suggesting I wrap it in a Container() widget which I did and also returned more errors. I later settled on the Column() widget which worked well.

Conclusion

Flutter is still young (Flutter 1.0) but the kind of apps I see people developing with flutter is AMAZING. I’ll advise any Developer who hasn’t tried Flutter yet to take the step to greatness and you won’t regret it.

Signing off here. Peace!!!

Oh!, before i sign off, his reaction was priceless

Post on LinkedIn

Source code for the redesign

--

--

Etornam Sunu Bright

Mobile and Backend engineering. Flutter Africa Community Co-organizer 🌍.