Classic sliding block puzzles using Flutter

Overview

Inspiration

My project was inspired by the mechanic sliding block puzzles. I was novice in Flutter/Dart and I wanted to challenge myself by building a game using Flutter that lives up to user’s experiences and expectations.

What it does

One can choose between three well-known classic sliding block puzzles and play the selected puzzle. One can touch and slide or use the mouse to click and drag a complex-shaped block to an empty space. Animations and sounds are used in order to improve the user's experience. The difficulty of the game can be recognized at a glance in the start section by just reading the number of the moves necessary for the optimal solution (green number). For some puzzles one can also animate (unlock) the solution. The ability to undo/redo moves enchances the gaming experience so that every gamer can enjoy the game. The game can be used with Desktop Web Browsers (Edge, Chrome) and also it works as a standalone Windows Application.

How I built it

The project is an extended/modified version of the orifginal slide_puzzle project. Some classes were designed to model the classical complex-shaped sliding block puzzles. Three exemplary puzzle-descriptions were realized for testing the applicability of the design. It is very easy to extend the game with new puzzle-descriptions.
The extension makes intensive use of the flutter_bloc package, also uses events (ex. for the animation of the solution of the selected puzzle). For realizing the Undo/Redo support the ReplayBloc Package was used. For the selection of the sliding block puzzle the carousel_slider package was used. In order to improve the user's experience some freely available Lottie-Animations were also used with the lottie package. Using the LottieDelegates some animations were also dynamically parametrized.

Challenges I ran into

Sometimes there were some ugly messages in the web-console: WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost main.dart.js:41353
WARNING: Falling back to CPU-only rendering. Failed to initialize WebGL context.

The sound for the standalone Windows Application doesn't work with the original settings/solution.

Accomplishments that I am proud of

I am pleased to report that in ca. 4 weeks I was able to realize a usefull application using Flutter/Dart and the Android Studio. Realizing features like

dynamically parametrized Lottie-Animations using LottieDelegates,
IconButtons with Lottie-Animation
undo/redo functionality with ReplayBloc package
using blocks/events a graphical animation of the solution for a puzzle
carousel with animated content for the puzzle selection

I gained some insight into Flutter development/packages.

What I learned

I personally have made great experiences with Flutter/Dart/Android Studio, and I am much more satisfied with the tool support as in my earlier experiments with Angular/Typescript and Visual Studio.
I also learned from the original design a set of best practices for realizing responsive layout designs.