Flutter Puzzle Hack

The Flutter Puzzle Hack is a coding challenge (hackathon) that was announced late last year. I believe it is an annual competition to see what creative apps people can come up with using Flutter. Each year, there is a different theme. This year it was the puzzle challenge while last year it was the clocks challenge. Accompanying these challenges is a myriad of prizes worth well over $50,000.

I came across this challenge sometime towards the end of January and with the deadline for submissions being 14th March — initially it was 28th February— I psyched myself to participate. Let it be known, I am not aiming for the top dollars, I can’t chill with the big boys just yet. What I am aiming for here is to practice my skills and get a certificate of participation while at it. So fingers crossed!

The internet is a beautiful place. There were tons of material, resources and docs to reference for this particular project. Also, the challenge itself provided a sample code for the implementation of the puzzle logic. For anyone interested in viewing the sample code, you can find it here.

Initially, I had such grandiose ideas on how I was going to re-create this puzzle. Talk about animations, transitions, sounds, different galaxies and complexity levels, haptics — you get my drift? But…what skills? 😂 Which ones? Dreaming is free but the skills and experience come separately.

So with that said, my application is basic. Basic as basic can get. It does just what it needs to do, nothing more. i.e. have a 4x4 grid with shuffled numbers generated between 1–15, a timer, moves and reset button. Actually, let me give myself some credit here… I added music too (albeit after struggling for almost 1 day). So, not that basic right?

Here are the snippets of code that transformed my application 😂
For the music, I added the assets_audio_player dependency on pubspec.yaml

dependencies:
  flutter:
  assets_audio_player: ^3.0.4+1

Then you will need to import the package to the respective .dart file

import 'package:assets_audio_player/assets_audio_player.dart';

Then the functionality… Create a button and assign it a method when pressed. This is the method called when the music icon button at the top left (see cover image) is pressed.

void toggleMusic() {
  if (isPlaying) {
    _assetsAudioPlayer.stop();
    isPlaying = false;
  } else {
    _assetsAudioPlayer.open(
      Playlist(
        audios: [
          Audio("assets/audios/background_music.mp3"),
        ],
      ),
      loopMode: LoopMode.playlist,
      autoStart: true,
      showNotification: true,
    );

    isPlaying = true;
  }
}

I downloaded the audio from this site. It offers a variety of free music that one can use in their apps/games. The loopMode allows the one song in the playlist to continue looping as long as the music is the isPlaying = true.

Bug alert! So, just as I am writing this, I have noticed that the music continues playing even if the app is no longer in the foreground. *Adds to the technical debt list.*

All in all, I’m glad I managed to do finish the task and submit it. (Though I wasn’t able to host the app where it can be easily tested). Check out a live demo of the app below.

Not me struggling to solve my own puzzle :D

PS. It’s not much, but it’s honest work lol.

As always, thank you for reading ❤