Flutter Diaries — Leaf Mobile App to SLIIT Codefest

Last year we (ICT Club of Gamini Dissanayake National School) competed on Codefest organized by SLIIT. We were the 1st Runners up in School Senior Category. The product we developed for the competition was LEAF - Learn Earn And Fun, a trivia mobile app that awards you with Credits.

The LEAF app’s backend was powered by Nest.js with MongoDB database (read the article from our backend developer) and the frontend was developed with Flutter.

Flutter is Google’s UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase (web result😋).

LEAF Android App

The main flow of LEAF app was
Login/Sign Up -> Main Menu -> MCQ Screen -> Result Screen

So we made a prototype of the complete app having every screen required using Adobe XD

Adobe XD — not the Actual App

Thanks to XD, we got all the required assets separately when we export our designs.

Then the Widget Wizards started to spell 🧙

We had 2 laptops for front-end development with different specs. Only one laptop had enough power to run Android Studio, Few Chrome Tabs and the Emulator at the same time. Thanks to Flutter’s Visual Studio Code support the other laptop with low specs also helped.

After 2 Days of Coding, mostly debugging 😊, we built the first release version of the LEAF app. Codemagic (CI/CD for Flutter and mobile app projects) helped us a lot in the process ❤.

Communication between front-end and back-end was done through REST APIs. Flutter’s http package made it simple. The cookbook is here.

The buttons are loaded with Images/Assets. All the backgrounds also loaded with image assets.

Thanks to flutter, we didn't spend our time in stack-overflows because everything was very simple. Almost every content of the app used default flutter methodologies. Even state management was done through State-full widgets. We planned the app to best work with state-full widgets at the early stages.

As all the widgets were planned before the development with Adobe XD, we were aware of developer nightmares 😎.

The Leaf App will available to the public in late 2k21.