15 themes in one app? The story behind my Flutter Puzzle Hack submission.

It’s been quite a while since I wrote about Flutter on Medium (or actually code in it). But when I saw the recently announced Flutter Puzzle Hack I knew I want to participate. The idea is simple, build a slide-puzzle-like game with all the ideas you can come up with, whether it be making advanced animations or building a different game like Klotski while retaining the sliding mechanism. The end result is called the themed_puzzle and you can play it online at https://slide-puzzle-912f7.web.app/.

I don’t want to spend too much time modifying the game mechanism. Instead, I want to let people play the game with different themes. How many themes if you ask? Well, it is now 15 themes covering material, fluent, Cupertino, skeuomorphism, glassmorphism, etc. Being able to adapt to the UI of the underlying platform, or keeping the UI the same across all the platforms is exactly the power Flutter gives us.

Now let's take a look at what the original app looks like (developed by Very Good Ventures at https://github.com/VGVentures/slide_puzzle):

This simple theme is pretty basic but has all the components for a slide puzzle game. There is also the dashatar theme which uses images as the background of the tiles and more advanced animations. I’ll start from the simple theme and just leave the dashatar theme as is. Basically, I want to customize the simple theme to the extreme.

With the animated_styled_widget and responsive_property package, I can achieve my goal much more easily. The animated_styled_widget package gives you a super container widget that accepts a stylesheet similar to CSS and supports implicit and explicit animations. It also lets you customize UI components like buttons, switches, sliders, etc with multiple stylesheets. The responsive_property package lets you define responsive UI code at different granularities. You can have different widgets for different screen sizes or just different integer values like crossAxisCount in your GridView. Then, for a customized theme, I just need to design a list of stylesheets or responsive stylesheets if I need them.

Now let's see what I have designed:

Material

The first one is the material theme. It is pretty similar to the simple theme but adds shadows to the tiles. There are also animations when you hover or press the puzzle tiles or the buttons. If you look closely at the control panel at the top right corner, you can see there is a sun icon indicating that we are looking at a light theme. If you click on it, the app will smoothly transition to the dark material theme:

Material dark

The next is the fluent design which is Microsoft’s newest design language on Windows 11:

Fluent

Notice the acrylic effects on the tiles and the control panel. When you hover or press the tiles, there will also be a reveal focus effect that shows a visible border and glowing shadow set by fluent design. The style of the volume slider is also tuned to be the same as on Windows 11. We also have the dark fluent theme:

Fluent dark

Now comes the Cupertino theme and its dark version:

Cupertino theme

Cupertino dark

Then I designed the neumorphism theme which was very popular in 2020:

Neumorphism

And of course, the dark version:

Neumorphism dark

Another popular design trend is glassmorphism:

Glassmorphism

Glassmorphism dark

And also claymorphism:

Next are the themes I think are fun to implement and should be categorized into skeuomorphism.

Cyberpunk

Cyberpunk dark

Keyboard

Keyboard Dark

Wood

I couldn't think of two versions for the wood theme. I guess that's just the nature of skeuomorphism: beautiful to look at but hard to design.

If these screenshots get you interested enough, you should definitely try the app out at https://slide-puzzle-912f7.web.app/. The animations when you hover or press these tiles also took me a lot of time to develop just to make them behave more like real-world material. There will also be animations when you switch between different themes. Some of them will look very cool and some will look a bit janky since things like image background crossfades are not implemented in Flutter right now.

Other features of this app include:

1. Support both touch and keyboard inputs. You can use the arrow keys to control the tiles (provided by Very Good Ventures). Support sound effects that are also customized for different themes.
2. Support multi-language. Three languages (English, Spanish and Chinese) are supported right now.
3. The puzzle can have different and even non-square sizes and different difficulties.
4. You can solve the puzzle automatically by clicking the solve button. I combined the IDA* algorithm with partially rewinding the puzzle history in order to generate a solution in a short amount of time, which is especially important on the web since the asynchronous compute() method does not work at the moment.

I also want to highlight the extra features that I have implemented in order to achieve the visual effects I want. They include:

1. Crossfade/smooth transition between image, gradient, and colored background. The current implementation in Flutter will have artifacts during a background transition.
2. Inset shadows. This is also missing in FLutter for now but is crucial for implementing neumorphic or engraved effects.
3. Rounded rectangle border with sides of different widths and the ability to smoothly morph it into other shape borders. The implementation details of the morphing algorithm can be found at https://medium.com/p/30e0d33c60a7.
4. The ability to open a dialog that is positioned relative to another widget (or the whole screen). You can use this to implement drawers that can open in any direction or dropdown buttons in desktop UI.
5. Animated aurora gradient for the glassmorphism theme.
6. Smoothly animate any color, gradient, and image background.

And that's all for my Flutter Puzzle Hack submission, themed_puzzle. I am really impressed with how far Flutter has gone in just a few years. This app is truly cross-platform. I have tested it on the web, Android, Windows, and Linux and the performance is very impressive. It should also run on macOS and IOS without major issues. I don’t have to change a single line of code to adapt to all these different platforms and I think that is why I got interested in Flutter in the first place. I have also learned a lot about all the different UI design languages, the IDA* algorithm, and flutter_bloc which is the choice for state management in this project. All in all, the past month working on this project is a truly memorable time for me. I am really looking forward to what Flutter Hackathon will bring us in the next year. If you get some time, please consider voting for themed_puzzle on devpost. Thank you!