Flutter Tic Tac Toe Game Tutorial

Flutter Tic Tac Toe Game TutorialL A complete guide

Tic Tac Toe, a classic game that has stood the test of time, is a fantastic project to develop in Flutter. Whether you’re building it for fun, to showcase your skills, or to challenge your friends with a quick game, creating a Flutter Tic Tac Toe game offers a perfect mix of creativity and learning. This tutorial will guide you through developing a Tic Tac Toe game in Flutter with features like AI integration, multiplayer support, and a user-friendly interface.

Introduction to Flutter Tic Tac Toe
Setting Up Your Flutter Project
Features of the Tic Tac Toe Game
Full Code Explanation
Enhancements for a Better Gaming Experience
Conclusion

1. Introduction to Flutter Tic Tac Toe

Tic Tac Toe is a simple two-player game where players alternately place their symbols (X or O) on a 3×3 grid. The first to align three symbols in a row, column, or diagonal wins.

In this project:

Players can choose to play against AI or a friend.
The AI uses basic logic to challenge the player.
A scoreboard keeps track of wins.

2. Setting Up Your Flutter Project

Step 1: Create a New Flutter Project

flutter create tic_tac_toe
cd tic_tac_toe

Step 2: Add Assets

Include the necessary images (cross_.png, circle_.png) in the assets folder and update pubspec.yaml:

flutter:
  assets:
    - assets/cross_.png
    - assets/circle_.png

Run flutter pub get to load the assets.

3. Features of the Tic Tac Toe Game

Game Modes: Play against AI or another player.
Customizable Gameplay: Players can select their side (X or O).
Score Tracking: Displays and updates scores for both players.
User-Friendly UI: Intuitive design with animated transitions.
AI Logic: The AI uses basic strategies to compete with players.

4. Full Code Explanation

Here’s the full Flutter code for the game, broken into logical segments:

Main App Setup

void main() => runApp(TicTacToeApp());

class TicTacToeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: PlayModeScreen(),
    );
  }
}

Game Start Screen

The PlayModeScreen lets users choose between playing with AI or a friend.

class PlayModeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff6f6f6),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset('assets/cross_.png', width: 100),
                Image.asset('assets/circle_.png', width: 100),
              ],
            ),
            SizedBox(height: 50),
            Text(
              "Choose your play mode",
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 50),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ChooseSideScreen(isAI: true),
                  ),
                );
              },
              child: Text("With AI"),
            ),
            SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ChooseSideScreen(isAI: false),
                  ),
                );
              },
              child: Text("With a Friend"),
            ),
          ],
        ),
      ),
    );
  }
}

Choose Side Screen

The ChooseSideScreen allows players to pick their preferred symbol, X or O.

class ChooseSideScreen extends StatefulWidget {
  final bool isAI;
  const ChooseSideScreen({required this.isAI});

  @override
  _ChooseSideScreenState createState() => _ChooseSideScreenState();
}

class _ChooseSideScreenState extends State<ChooseSideScreen> {
  String selectedSide = 'X';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text("Pick your side"),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Radio(
                  value: 'X',
                  groupValue: selectedSide,
                  onChanged: (value) => setState(() => selectedSide = value!),
                ),
                Radio(
                  value: 'O',
                  groupValue: selectedSide,
                  onChanged: (value) => setState(() => selectedSide = value!),
                ),
              ],
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => GameScreen(
                      playerSide: selectedSide,
                      isAI: widget.isAI,
                    ),
                  ),
                );
              },
              child: Text("Start Game"),
            ),
          ],
        ),
      ),
    );
  }
}

Game Screen

This is where the actual game happens. It includes the grid, game logic, and AI implementation.

class GameScreen extends StatefulWidget {
  final String playerSide;
  final bool isAI;

  GameScreen({required this.playerSide, required this.isAI});

  @override
  _GameScreenState createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  List<String> board = List.filled(9, '');
  String currentPlayer = 'X';
  String winner = '';

  void resetBoard() {
    setState(() {
      board.fillRange(0, board.length, '');
      winner = '';
      currentPlayer = 'X';
    });
  }

  void makeMove(int index) {
    if (board[index] == '' && winner == '') {
      setState(() {
        board[index] = currentPlayer;
        currentPlayer = currentPlayer == 'X' ? 'O' : 'X';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            itemBuilder: (context, index) => GestureDetector(
              onTap: () => makeMove(index),
              child: Container(
                child: Center(
                  child: Text(board[index], style: TextStyle(fontSize: 32)),
                ),
              ),
            ),
            itemCount: 9,
          ),
          ElevatedButton(onPressed: resetBoard, child: Text("Reset")),
        ],
      ),
    );
  }
}

5. Enhancements for a Better Gaming Experience

AI Improvements: Implement a minimax algorithm for a smarter AI.
Animations: Add animations for moves and results.
Themes: Include light and dark themes.
Leaderboard: Track scores across sessions.

6. Conclusion

Creating a Tic Tac Toe game in Flutter is a great way to sharpen your skills. This project not only covers Flutter UI design but also incorporates logic building for game rules and AI.

Explore Other Flutter Topics…

Tagged Beginner Flutter Game Tutorial, Build Tic Tac Toe in Flutter, Flutter Game Development, Flutter Tic Tac Toe Game Tutorial, How to Create a Game in Flutter, Tic Tac Toe Flutter Code, Tic Tac Toe with AI in Flutter