Introduction

The second-annual international Flutter hackathon, organised by the global Flutter Community, took place over the weekend 27/28 June 2020.

The 48 hour app jam invites teams of up to five members to build an app using Flutter – Google’s UI toolkit for building natively compiled applications for mobile, web and desktop from a single codebase.

Theme

Teams were tasked to build their app within two broad themes: Saving the Planet – what we learned from the pandemic and/or Retro-Cyberpunk-Future.

Building a Team

A hackathon isn’t much fun on your own, so my first task was to reach out to a few contacts. As the hackathon was only a few days away (I’ve been busy and time has been flying by recently!) quite a few of the people I invited were already committed to family events, study or other engagements.

The first member to come onboard was Terry from the UK. Terry emphasised that he was mainly coming along for the hackathon experience, to find out what they’re like. Terry is a great personality to have around, a strong coordinator, researcher and handy with math too! The second on board was Jason, an animator, illustrator and game developer based in Canada. He’d be looking after the graphics and playing with Rive animation for the first time.

On the morning of the hackathon, just before it got started, I visited the Flutter Community Slack channel and posted a message in the Lobby channel to say we had a couple of places left on our team. I was contacted by five or six developers who were keen to join the team. We held short discussions to explain to one another our level of experience, speciality and so on. I wanted to ensure we had a range of skills so we could each work on our own areas of the app.

Eventually, we were joined by Rui in Portugal, an experienced front end web developer with Flutter experience, who’d be able to work on the UI side of things. Last but not least onboard was Arnaud, a fellow French citizen. Arnaud is a dev-ops engineer and had a similar level of Flutter experience to myself. He’d be working with me on the backend logic and database.

Once I’d set up a Slack channel for us to discuss the project, we organised a quick Zoom meeting so that we could all meet up and formally introduce ourselves. We immediately began ideating on the themes of the hackathon.

The ideas were mainly heading in the cyberpunk direction, although we did have one or two world saving ideas, too; like CoronaVaders, a retro remake of Space Invaders where the enemy is the virus. This, we suspected would be a common idea, so moved on. Other ideas began flowing around the idea of retro hardware or devices that we could emulate in a mobile app – Walkman, Dialphone, Newspaper, Ghettoblaster. We finally settled on a mobile app version of the retro CB Radio with a cyberpunk makeover.

In order to create a Github organisation and project repository we needed a name for our team and project. Through an improvised poll in Slack we quickly decided, democratically, what we would be called.

Team name Vote

The team name vote was unanimously selected – FlutterPuck. Inspired by the letters of our team members countries (Portugal, UK, Canada, France).

Project name vote

The project name was voted to be FlutterBand inspired by the full name of the CB – Citizen Band.

Project Deliverables

We would build an app which enables users to speak on one of a number of channels and any other user listening in on that channel would then hear the message. To make this more fun and challenging, we’d transform a user’s speech into text and then translate it into every listener’s native language and use our smartphone’s voice assistants to deliver the message, making the service totally anonymous, too.

App Workflow

We had great fun with the speech side of things. On most devices there are a range of variants of the native language to reflect regional and international dialects. For example on a UK smartphone there could be Scottish, Welsh, Caribbean, Australian, American, Indian and others. Each voice with it’s own character. Within our app, a voice is selected at random when delivering messages – this produced some fascinating results!

Working Together

Any member could call a Zoom meeting at any time if they were struggling with something or if ever the team direction was starting to wobble. These meetings breathed fresh life and energy into the team every time. We’d share a couple of jokes, share some pain but also pat one another on the back (virtually) for the great progress we were making. Not everyone turned up to every meeting; those working on design aspects would often ‘vanish’ for some time; much to the alarm of those working on the coding or coordinating side of things. But, they always came back, eventually, and always came back with the goods. So, the rest of us quickly got used to this and accepted different parts of the team would engage differently depending on their roles.

All code was manage via Git and Github, we’d send pull requests and review each other’s code before merging into the main branch.

FlutterBand – The App

Flutterband App

The final app, built in just 48 hours looked really good. We used Rive animations for the retro style display, channel changer and other knobs and switches as well as a cool Cyberpunk skin and a range of sound effects.

Video Demo

The final codeset is open source and available on our FlutterBand Github repository.

Final Round

The hackathon was foremostly an opportunity to meet people and have some fun with Flutter while learning some new stuff along the way. It was also a competition. The first round of voting started straight after the weekend. At this point we learned that there had been about 650 teams signed up for the event, of which about 250 completed a submission (it’s no easy task getting a working app together in just 48 hours!). We were delighted to be voted through to the final stage as this meant we could prolong the team spirit for an extra few days.

There were so many amazing apps that made it through to the final stage. And many of the ones that didn’t go through were incredibly well executed too.

Hack20 Top Three Winners

As participants and finalists our team members each received a certificate and $100 worth of CodeMagic credits.

Our Team:

*Mat Wright Twitter

*Terry Rees

*Arnaud GitHub

*Rui Lima GitHub Twitter

*Jason Rive

See you all next year!

Certificate of Completion

Comments

Leave a Reply