Utopic Slide Puzzle

The project tries to make the simple slide puzzle harder by adding different difficulties level by level.

Comment

Inspiration

When I tried to play the slide puzzle first time I thought that it becomes boring after 2nd or 3rd puzzle solving. So I decided to make it harder and interesting by adding additional rules to it.

What it does

  • 2 default levels and 4 unique ones that I came up with
  • Possibility to upload custom image on the puzzle with image level
  • Custom splash screens for Android, iOS and Web (different depending on system’s dark mode enabled)
  • Dark mode appearance support
  • Main menu that pauses the puzzle solving stopwatch
  • Different design depends on screen size

How I built it

With love 💗 Well, obviously I’ve used Flutter with Firebase for the web hosting and GitHub actions for CI/CD. BLoC as the main state management system. Beamer package for navigation 2.0 handling (Not so useful for only one location with the puzzle). Uses Lottie files for animations and Flutter Intl package and VScode extension to work with localisations.

Challenges we ran into

I’ve faced a challenge when trying to allow a user to upload a custom image from his device. The problem was with the decoding picked image. At the start I found this package: https://pub.dev/packages/image. But it freezes the whole app for 3 or 4 while doing the decoding. The isolates for Flutter web don’t work. But I really wanted to get rid of this bad UX. Then I figured out that dart:ui library can be used for that purpose 🤦 and then just draw parts of an image to the puzzle tiles.

Accomplishments that we're proud of

  • The app uses number 16 as the with Baker-Miller pink as the background color to make a user keep calm because the puzzle can be very complicated to solve. Also it looks like the 16th tile in the puzzle so you feel like you missed it while the puzzle isn’t solved.
  • The app has a dark mode appearance in case a player wants to play the game before going to sleep, for instance.
  • If a user moves the same tile 6 times - the app suggests solving it for him/her.
  • When a user solves a level a fullscreen congratulations confetti animation appears (different ones depending on screen aspect ratio).
  • Smooth animations between levels, for puzzle shuffling, tile movements etc.

What I learned

  • How to work with a response layout in Flutter
  • How to use GitHub actions

What's next for Utopic Slide Puzzle

I would like to add a few more levels and authorization to share the user’s progress across devices and publish it on Play Market and App Store.

Share this project:

Updates