🎮📱TETRIS Game • Flutter Tutorial from Scratch

🥷🏽 FOLLOW ME

~;

TIMESTAMPS
0:00 intro
1:06 2x2 grid
3:55 tetris piece class
7:55 game loop
10:40 collision detection
19:45 colors!
21:02 controls (left, right, rotate)
30:45 clear lines
33:55 game over

[createdbykoko]

If you need extra help on the widgets used in this tutorial, check these out:


or.. i have an entire widget of the day playlist as well:


I hope this helps you! happy coding ✌🏾

[maran.ath]

You're the next level, you're my goal, I already got to a high level as a flutter Dev and I was beginning to relax, but your videos just 🤯...You're mental Mitch

[toupive]

Hey Mitch.
Great content.
I hope you read this message.
Lot of your viewers(beginners) face this problem.
All of pieces are not landing on top of each other.
We need it to be solved.

[craigpearson]

Clever👏 you’re clever Mitch✅ not just coding….genuinely inspired teaching 👌

[Esyification]

I am very impressed with the details, i was already thrilled, but when you added the rotation i wanted to go and pop the fireworks, thats how happy i am. I want one day to reach your level of sofistication.

[nurullahozatak]

bool checkCollision(Direction direction) {
// loop through all direction index
for (int i = 0; i < currentPiece.position.length; i++) {
// calculate the index of the current piece
int row = (currentPiece.position[i] / rowLength).floor();
int col = (currentPiece.position[i] % rowLength);

// directions
if (direction == Direction.down) {
row++;
} else if (direction == Direction.right) {
col++;
} else if (direction == Direction.left) {
col--;
}

// check for collisions with boundaries
if (col < 0 || col >= rowLength || row >= columnLength) {
return true;
}

// check for collisions with other landed pieces
if (row >= 0 && gameBoard[row][col] != null) {
return true;
}
}
// if there is no collision return false
return false;
}You can update checkCollision to fix collision with other piece

[ChristianKyony]

This was a short n sweet tutorial. I learned a lot.

[johnrm]

Great video! I found out that instead of using a Map to get the piece (Tetromino) color, using the enhanced enum as in:
enum Tetromino {
L(Colors.orange),
J(Colors.blue),
I(Colors.pink),
O(Colors.yellow),
S(Colors.green),
Z(Colors.red),
T(Colors.purple);

const Tetromino(this.color);
final Color color;
}
then we just get the current piece color using currentPiece.type.color.

[denn]

Thanks a lot, Mitch. You inspire me a lot.

[mugiwaranocoder]

That's really amazing🔥 Good work🎉

[davekho]

Very nice. I really enjoyed this tutorial. Beginner Flutter programmer here (but relatively experienced in scripting).

One small problem in the tutorial though. At 19:32, your blocks are stacking, but the checkCollision method you outlined in 15:54 didn't have any code to detect collisions with other pieces. In between, you didn't mention any update to this method.

Thankfully, due to your excellent explanation of your code, I figured out what I needed to add to achieve this.

[tarunnayak]

I don't know why but I am in love🤩 with your Channel content.
Great Content as always 💯💯

[fadhilivunza]

Awesome tutorial, keep up the good work!!!!

[mohammadtubeshat]

You work great and amazin in flutter continue I support you 🎉

[taliscodehub]

This is really cool ❤thanks so much bro

[crazy-man]

that's cool, only with flame it seems to me it would be much less code without the need to count collisions,

[alaakatlan]

Thanks 🎉 That's great 😍 please can you make tutorial about coloring game and drag-and-drop game

[sammyjokes]

Great work Mitch!! ..
Please Mitch, can you make a video on how to connect flutter project to unity? 🙏

[kyawnai]

May I respectfully request you to make a tutorial video for Flutter Flame Game. I am really excited for your tutorial.

[insensibility]

Hi, Mitch! Can you make a video on how you set up your Flutter environment? Can you make one for Windows? And if not, what emulator are you using?

Thanks for this wonderful video!