Dash puzzle

the first animation (initial step) :before shuffling
the first animation(final step) :after shuffling
app responsive to the screen's width

Inspiration

Learning & discovering new challenges that push me to the limit are always inspiring me.

What it does

After shuffling. the player should put puzzle pieces (boxes) in order according to their index. the pieces move by exchange there position with the missed piece after tapping.

Each box has a piece of flutter Logo and when the player win the game and all boxes in their right position,the result will be a complete flutter Logo.

All game statistics (Tils, Moves ...) are recorded and the app is responsive to the screen width including the size of puzzle pieces.

How we built it.

1)- the main objective

The main objective is to exploiting flutter rendering algorithm, which increase the performance by moving puzzle pieces without rebuild or repaint all pieces.

Other features was added by exploring this algorithm like :

1-controlling the size of the puzzle pieces and the plan according to the screen width;

2-In the first animation (shuffle animation) .we don't repaint all puzzles during this animation;

2)- additional features

1)- painting flutter logo:

-when the puzzles pieces are in there ideal position and complete flutter logo will be shown.

Flutter Logo is painted by lines that has start and end. The intersection ( between the puzzle piece sides and this lines ) is added to map (the key is index puzzle piece and the value is a list of two offset of the intersection the represente the start point and the end point ).

2)- Move animation :

-it's depend on taping and it's composed of two part. The first part is when it's 40% of the animation , the box will double his size from his offset to the next position, then the size decrease ( for the second part ) intitle the piece take the next position.

3)- shuffle animation :

-animate the appearance of puzzle pieces in their random position is according to a curved line of 45 degree ,that pass from (0,0) to the end ( Offset(500,500) ).

-The distance of puzzles from the the topLeft and bottumRight accoding to the painting line are calculated and transformed to parcentage. this two parcentage represente the start and the end of painting of each box.

-Each puzzle start painting when the percentage of the animation between the parcentage of the topLeft and the BottumRight, which make it synchronised with other boxes

Challenges we ran into

there is two challenges, which are:

-synchronise the appearance in the shuffle animation between boxes.

-split in boxes the flutter logo according to the index of puzzle pieces.

Accomplishments that we're proud of

Making the repinting in the shuffle animation only for the boxes that curved line pass on them. which is accomplishment that show the power of flutter and this gives a lot of gain for the performance.

What we learned

i discovered the power of flutter algorithms. Also i learned the hottests, how the size and geometrie goes and other features related to the rendering algorithm

What's next for Dash puzzle

1)-For Dash puzzle:

-Adding the ability to choose the number row*Column (4 in this case).

-Add more paints ( Dart Logo, Firebase Logo..).

-Improve the painting of flutter logo.

2)-After Dash puzzle:

i'm going to create my first app by flutter. which is a multi platform app for drugs. because i'am pharmacist and i know what i could for facilitate the work of doctors for geting the optimol drugs in the market in fast and efficient why. It will be an app that combine some purposes together which are professional & charity & education.