[Flutter] How to build a selectable cell grid?

So currently I''m trying to learn the flame framework to build game with flutter. My use case involves creating a grid and listening to clicks on that grid. Once a cell is tapped inside the grid, I need to highlight that cell. Something like this can be achieved as follows in flutter:

import 'package:equatable/equatable.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

import './src/my_game.dart';

void main() {
// final game = MyGame();
// runApp(GameWidget(game: game));
runApp(Grid());
}

class Grid extends StatefulWidget {
const Grid({super.key});

@override
State<Grid> createState() => _GridState();
}

class Position extends Equatable {
final int rowIndex;
final int colIndex;

const Position(this.rowIndex, this.colIndex);

@override
List<Object?> get props => [rowIndex, colIndex];
}

class _GridState extends State<Grid> {
final List<Position> selectedPositions = [];

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Grid'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: List.generate(8, (rowIndex) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(8, (colIndex) {
return GestureDetector(
onTap: () {
setState(() {
selectedPositions.add(Position(rowIndex, colIndex));
});
},
child: Container(
height: 20,
width: 20,
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.black),
color: selectedPositions
.contains(Position(rowIndex, colIndex))
? Colors.red
: null,
),
),
);
}),
);
}),
),
),
);
}
}


But I've no idea how to get the same thing in Flame via the render() method. Can someone please guide me or maybe provide a sample code on how to get this done? Thank you so much.

I couldn't really try anything to be honest. I gave it a deep though on how to do something like this but couldn't figure it out. I tried checking other resources like Youtube, articles etc. but couldn't understand.

Continue reading...