Picture Scramble

What it does

It is a slider puzzle. On the left side there is actual scrambled puzzle and right side is the reference/final image after solving. Clicking any tile on the reference tile will show where it lies on the scrambled puzzle. Once the first tile is moved, timer starts to identify how long did it take to complete the puzzle along with the number of moves taken. Finally, after the completion a summary is given on the performance stats and a link to share the game with someone else.

How we built it

Its build purely in flutter. No 3rd party library integrations are done. Flutter animations are used to slide tiles in each direction and identifying a reference tile.

Challenges we ran into

Challenges faced were mainly due to Animations, making sure that we don't have two controllers in the same widget and maintain state of each tile and moving them to a destination along with animation.

Accomplishments that we're proud of

Proud of having to complete whole code by myself and keep at it even after failing multiple times and trying everything without referring others code.

What we learned

• Web deployment.
• Animations in Flutter.
• How to solve a 15 tile puzzle.

What's next for Picture Scramble

• Should have an auto-solve button which will solve the remaining part of the puzzle by itself.
• Changing the puzzle size between 3x3, 4x4, 5x5.
• Can change the picture in puzzle by uploading a photo from their own gallaries.

Built With

• dart
• flutter