How to get info from multiple widgets hovered over simoultaneously? - flutter

Question

Issue
As per the drawing below I have a 4x4 grid of Widgets. The red line indicates the touch gesture I make. The green coloured squares are the squares the gesture touches. The blue coloured squares are the ones not touched by the gesture.
How can I make flutter get all the widgets i touch this way and store a reference so that I can access their content (for example an image or a string)?
What did I do so far?
I was looking at the "Draggable" widget type, it works for dragging a single widget and I could get that to work with a single widget. But I could not get it to work with multiple widgets being dragged over/touched this way. So I suspect I may need another solution. At this time I am just not sure what could make this functionality work.
Example image
Thanks for your help.

Answer 1

Please try the below example. You may need to modify it as per your requirement.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark()
.copyWith(scaffoldBackgroundColor: Color.fromARGB(255, 18, 32, 47)),
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(body: CustomPage());
}
}
class CustomPage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return CustomPageState();
}
}
class CustomPageState extends State<CustomPage> {
double progress = 0;
var arr = [
[false, false, false],
[false, false, false],
[false, false, false]
];
var keys = [
[new GlobalKey(), new GlobalKey(), new GlobalKey()],
[new GlobalKey(), new GlobalKey(), new GlobalKey()],
[new GlobalKey(), new GlobalKey(), new GlobalKey()]
];
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blueAccent,
child: Center(
//Wraps the second container in RawGestureDetector
child: Center(
child: GestureDetector(
onHorizontalDragUpdate: (details) {
changeState(details.globalPosition);
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(
3,
(i) => Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(
3,
(j) => Container(
key: keys[i][j],
margin: EdgeInsets.all(2),
color: arr[i][j] ? Colors.green : Colors.red,
width: 50,
height: 50,
)),
)),
),
)),
),
);
}
void changeState(Offset pos) {
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
Rect re = _getWidgetGlobalRect(keys[i][j]);
if (re.contains(pos)) {
selectItem(i, j);
}
}
}
}
Rect _getWidgetGlobalRect(GlobalKey key) {
RenderBox renderBox = key.currentContext.findRenderObject();
var offset = renderBox.localToGlobal(Offset.zero);
return Rect.fromLTWH(
offset.dx, offset.dy, renderBox.size.width, renderBox.size.height);
}
void selectItem(int i, int j) {
if (arr[i][j]) {
return;
}
setState(() {
arr[i][j] = !arr[i][j];
});
}
}