Flutter Puzzle Hack

Home

Inspiration

My inspiration was seeing that others had already created puzzles but I saw that they were not complex, so I said I must be able to do something better and win.

What it does

It is an individual and online game puzzle, you can select mixed, numbers or images, you can also see the opponent in real time

It was built from scratch, a Stack and the AnimatedPosition widget were used, to give it animation when the puzzle is moved. then we created a function that will generate items depending on the level of the game, then a function was created to divide images, from the beginning I wanted not to use packages and finally I achieved it by dividing with the canvas.

Then the respective functions were created to do the synchronization in real time and challenge other opponents.

It was quite simple because I have experience in firebase real time,

we need an option that challenges could be sent an id was created for each user when entering.

The id is sent to the server when he enters the application and if the user leaves the application that id is removed to show that he is not online, for the web we had to use dart:html.

I ran into some drawbacks.

I didn't know about the option to split images without a package. I searched StakOverFlow and found a suggestion to split images with the canvas. I did some research and finally got it.
I did not find a way to put an alias when importing the conditional library from import 'dart:io' if (dart.library.html) 'dart:html' as html; . I needed a way to add an alias to each one if dart:io was imported the alias of ui and for dart:html the alias of html,

why did i need this? I needed it to be able to detect when the browser tab was minimized or closed to remove the user from being online.

Another inconvenience I found is when measuring width and height on mobile in browser and desktop browser. As a solution, I had to set different conditionals for the browser on mobile devices and the browser on desktop.

Accomplishments that we're proud of

My proudest achievement is:

Learn to split images without using libraries including that you can choose the position of which part to crop.
To be able to synchronize the data in real time between each user and to show it online or offline, although I had experience with firebase I had not done that type of project

What we learned

Learned to divide images, we learned to use some types of functions so that the image does not flicker when making updates setState((){}),

you have learned to do translations since there is no room for translations of an application this function in English and Spanish.

All the animation widgets I used were already familiar to me.

I learned that there is a widget (FittedBox) that adapts the child content depending on the available space

What's next for Flutter Puzzle Hack

At the moment I think the project is finished.

Making some changes would improve when detecting that our connection. Another option would be to improve that it is possible to split images on mobile devices in the browser, I tried to find the error but flutter did not show me the problem that caused it, only the function that caused the problem