🕹️ How to Build a Flutter Game in Android Studio — No Coding Needed (TapTiles Game)

Want to build your first Flutter game and run it on Android, iOS, Web, and even Windows? This tutorial will walk you through everything step-by-step — no game engine, no complex logic, just pure Flutter fun!

In this guide, we’ll create a tap-based game called TapTiles, using only one Dart file and a few simple tools. Perfect for beginners, hobbyists, and indie devs.

✅ Beginner-friendly
🧩 Copy-paste setup
🚀 Works on Android, iOS, Web, and Desktop

✅ What You’ll Learn

• How to create a cross-platform Flutter game project
• How to paste & run complete game code
• How to configure your pubspec.yaml
• How to run it on any device in seconds

🔧 Step 1: Create a New Flutter Project

1. Open Android Studio
2. Click “New Flutter Project”
3. Select Flutter Application
4. Name your project (e.g. taptiles_game)
5. Choose Kotlin as the Android language
6. Select all platforms: Android, iOS, Web, Desktop
7. Click Finish to create the project

✅ You now have a blank Flutter app!

🧠 Step 2: Add the Game Code

Replace everything inside lib/main.dart with the code below:

  📋 Click to Copy
  
import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

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

class TapTilesApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TapTiles',
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple[900],
      body: Center(
        child: GestureDetector(
          onTap: () => Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (_) => GameScreen()),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("🎯 TapTiles",
                  style: TextStyle(
                      fontSize: 36,
                      fontWeight: FontWeight.bold,
                      color: Colors.white)),
              SizedBox(height: 20),
              Text("Tap to start",
                  style: TextStyle(color: Colors.white70, fontSize: 16)),
            ],
          ),
        ),
      ),
    );
  }
}

class GameScreen extends StatefulWidget {
  @override
  State createState() => _GameScreenState();
}

class _GameScreenState extends State {
  int gridSize = 3;
  late Timer tileTimer;
  Set litTiles = {};
  int score = 0;
  bool isGameOver = false;

  @override
  void initState() {
    super.initState();
    _startGame();
  }

  void _startGame() {
    _generateLitTiles();
    tileTimer = Timer.periodic(Duration(seconds: 1), (_) {
      _generateLitTiles();
      if (score != 0 && score % 10 == 0 && gridSize < 6) {
        setState(() => gridSize++);
      }
    });
  }

  void _generateLitTiles() {
    final totalTiles = gridSize * gridSize;
    final count = max(1, min(4, score ~/ 5 + 1));
    final random = Random();
    Set newLit = {};
    while (newLit.length < count) {
      newLit.add(random.nextInt(totalTiles));
    }
    setState(() => litTiles = newLit);
  }

  void _onTileTap(int index) {
    if (litTiles.contains(index)) {
      setState(() => score++);
    } else {
      tileTimer.cancel();
      setState(() => isGameOver = true);
      Future.delayed(Duration(milliseconds: 500), () {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (_) => GameOverScreen(finalScore: score)),
        );
      });
    }
  }

  @override
  void dispose() {
    tileTimer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final tileCount = gridSize * gridSize;

    return Scaffold(
      backgroundColor: Colors.deepPurple[800],
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text("Score: $score"),
        centerTitle: true,
      ),
      body: Center(
        child: GridView.builder(
          itemCount: tileCount,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: gridSize,
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
          ),
          padding: EdgeInsets.all(20),
          itemBuilder: (context, index) {
            bool isLit = litTiles.contains(index);
            return GestureDetector(
              onTap: () => _onTileTap(index),
              child: AnimatedContainer(
                duration: Duration(milliseconds: 300),
                decoration: BoxDecoration(
                  color: isLit
                      ? Colors.white.withOpacity(0.85)
                      : Colors.black.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(
                    color: isLit ? Colors.greenAccent : Colors.white24,
                    width: 2,
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: isLit
                          ? Colors.white38
                          : Colors.black.withOpacity(0.3),
                      blurRadius: 6,
                      offset: Offset(2, 4),
                    )
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class GameOverScreen extends StatelessWidget {
  final int finalScore;

  const GameOverScreen({required this.finalScore});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple[900],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("💥 Game Over",
                style: TextStyle(color: Colors.white, fontSize: 28)),
            SizedBox(height: 20),
            Text("Your Score: $finalScore",
                style: TextStyle(
                    color: Colors.amberAccent,
                    fontSize: 36,
                    fontWeight: FontWeight.bold)),
            SizedBox(height: 40),
            ElevatedButton(
              onPressed: () => Navigator.pushReplacement(
                context,
                MaterialPageRoute(builder: (_) => GameScreen()),
              ),
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12))),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                child: Text("Retry", style: TextStyle(fontSize: 18)),
              ),
            ),
            TextButton(
              onPressed: () => Navigator.pushReplacement(
                context,
                MaterialPageRoute(builder: (_) => SplashScreen()),
              ),
              child: Text("Main Menu",
                  style: TextStyle(color: Colors.white70)),
            ),
          ],
        ),
      ),
    );
  }
}
  

📦 Step 3: Edit pubspec.yaml

  📋 Click to Copy
  
name: quickscan
description: "A trendy QR & Barcode Scanner app with scan history and sharing."

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ^3.8.1

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  shared_preferences: ^2.2.2
  mobile_scanner: ^3.2.0
  url_launcher: ^6.2.5

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0

flutter:
  uses-material-design: true

flutter_native_splash:
  color: "#1e293b"
  android_gravity: center
  

▶️ Step 4: Run the Game

• Open Android Studio
• Select your device/emulator
• Click Run ▶️
• Enjoy the TapTiles Game!

🎯 Final Thoughts

You’ve just built a publish-ready Flutter game in under 10 minutes. 🧠

Visit AppMelodies.com for more Flutter apps & games!