Build Tic Tac Toe Game in Flutter in 30 minutes from Scratch

In this tutorial, you'll learn how to create Tic-Tac-Toe game from scratch in Flutter. This tutorial is a beginner friendly tutorial so if you don't have much knowledge about flutter then you don't need to worry, here you'll get the step by step guidance to build the game in flutter.
→ To-Do App in Flutter • Flutter ToDo App Tutor...
→ Onboarding Screen UI Tutorial with PageView • Page Slider Carousel i...
→ Google Map in Flutter • Google Map in Flutter ...
→ Chat App UI in Flutter Tutorial • Chat App UI Tutorial i...
→ Weather App UI in Flutter Tutorial • Weather App UI Tutoria...
► Timestamps
0:00 Introduction
1:45 Discussing Project Structure
2:42 Creating The Board Layout
7:14 Check for Winner
13:31 Implement Scroboard and Its Functionality
16:01 Implement Draw/Tie Condition
18:14 Add Clear the Board Functionality
20:30 Add the Countdown/Timer Functionality to the Game
25:21 Start the Game with Timer
26:53 Finalizing The Game by Doing Few Visual Changes
GitHub Repository Link bit.ly/3ENpGuX
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzpradip
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/

[@GaBoyInKy]

Thank you.

[@AlfredHelmerich]

Hi Pradip, I like your design. It is very pretty.

[@hirakiran4675]

Amazing sir

[@hirakjyotitalukdar4681]

In the end the red color (winner block) remains as it is and it does not disappear after we play again.

[@lauraeichmann7401]

your best guy for explaining the shortest diy videos....Thx. Please make more clips for Flutter (ios/android)...you have a firebase login video....maybe coukd make this for flutter or more with maps and little games like youre tictactoe.... 👍🙂😊

[@itzpradip]

Thanks, will do!

[@sparshkapoor246]

The draw functionality is not working like its not displaying noboy wins message after completing the whole tutorial

[@MyStudio919]

When the timer reaches 0 seconds the mobile hangs. How will it be solved?

[@scottturcotte3162]

Not sure if it's just me, but when a player wins everything works fine except the winning color remains. How do we reset the colors to all yellow when we clear the board?

[@itzpradip]

You just need to reset "matchedIndexes" by matchedIndexes = []; in "_clearBoard" function. You can check the GitHub code for color resetting. I forgot to add it to the tutorial but the GitHub repo has it.

[@scottturcotte3162]

@@itzpradip Thank you! I was in the right spot and using the right variable. Instead of using blank brackets I referred to the secondary color, which is why it wasn't working. Makes sense now. Thanks again! I enjoyed your list app as well, however, I can't get it to read my Firebase DB. I can get it to write to it, just can't figure out how to get it to read it, it only reads the static list that was created for obvious reasons. If you ever get around to it, creating a tutorial for that would be great!

[@merwan8404]

HI
I followed the tutorial and when the player clicks on a square already played then he passes his turn
example X can play 2 times if O has clicked on a square X

[@merwan8404]

can u help me :) ?

[@mohamedelhalfawy3524]

Hi,
Did you find the solution

[@scottturcotte3162]

Same. The winning color also doesn't reset when you clear the board.

[@fauzanarif8908]

@@scottturcotte3162 the problem is the video doesn't explain it, when you press play again, it should clear the contents of the box, but not matchedIndexes, so if you clear the blue color it won't go away. The fix is to define a List matchedIndexes inside void _clearBoard(). Define below resultDeclaration = '';. Good luck

[@kryzixgaming2353]

Just remove the moove the oTurn = !oTurn; in the condition of each player
if (oTurn && displayXO[index] == '') {
displayXO[index] = 'O';
filledBoxes++;
oTurn = !oTurn;
} else if (!oTurn && displayXO[index] == '') {
displayXO[index] = 'X';
filledBoxes++;
oTurn = !oTurn;
}

[@frostyfreezemovies]

Hello sir bring more projects on react native

[@itzpradip]

Sure I will

[@fauzanarif8908]

after completing the tutorial, the draw function is not working. I checked your github and yours doesn't work either

[@fauzanarif8908]

I changed like this and it worked. If the video doesn't explain if the time draw results have to be restarted. Hope this helps.
} else if (filledBoxes == 9) {
resultDeclaration = 'Nobody Wins!';
stopTimer();
}

[@MyStudio919]

Thank you sir, everything went well. But if the player ever draws after winning once or (more) times, the timer does not stop and the game is not show played again button. What to do now?

[@MyStudio919]

Solved it. Thank You

[@masupchannel5651]

how did u solved it can u tell me too?? pls help

[@heichoi4198]

react native version please

[@itzpradip]

Sure.👍 very soon

[@A7madYT]

this project was NOT from scratch