I am creating a mobile application/game in flutter that presents the user with a grid of letters they can swipe left/right/up/down etc. During testing on a virtual phone (Android studio) when i swipe up/down i am not able to swipe the cells up/down as a semi-circle appears at the top (if I'm swiping down) and bottom (if I'm swiping up) of the grid widget.[Image of what i get when swiping down][Image of what i get when swiping up].
Here is the code for the grid widget.
Expanded(
child: GridView.builder(
padding: const EdgeInsets.fromLTRB(0, 50, 0, 0),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:
gridSize, // Set the number of columns in the grid
),
itemCount:
gridSize * gridSize, // Total number of cells in the grid
itemBuilder: (context, index) {
// Calculate the row and column of the current cell based on the index
int rowIndex = index ~/ gridSize;
int colIndex = index % gridSize;
String cellValue = letterGrid[rowIndex]
[colIndex]; // Get the letter value for the current cell
bool isSelected = _selectedCells.contains(Offset(
rowIndex.toDouble(),
colIndex.toDouble())); // Check if the cell is selected
return GestureDetector(
onTap: () =>
_handleCellTap(rowIndex, colIndex), // Handle cell tap
onPanStart: (details) {
initalPanOffset = details
.localPosition; // Record the starting offset of a swipe gesture
},
onPanUpdate: (details) {
if (isSwipeInProgress) return;
// Calculate the difference between the starting offset and current offset
Offset offsetDiff =
details.localPosition - initalPanOffset;
double horizontalDelta = offsetDiff.dx.abs();
double verticalDelta = offsetDiff.dy.abs();
// Check if the user swipes horizontally or vertically and initiate the corresponding swipe method
if (horizontalDelta > swipeThreshold &&
horizontalDelta > verticalDelta) {
if (offsetDiff.dx > 0) {
swipeRowRight(rowIndex); // Swipe the row to the right
_swipeDirection = SwipeDirection.right;
} else {
swipeRowLeft(rowIndex); // Swipe the row to the left
_swipeDirection = SwipeDirection.left;
}
isSwipeInProgress = true;
} else if (verticalDelta > swipeThreshold &&
verticalDelta > horizontalDelta) {
if (offsetDiff.dy > 0) {
swipeColumnDown(colIndex); // Swipe the column down
_swipeDirection = SwipeDirection.down;
} else {
swipeColumnUp(colIndex); // Swipe the column up
_swipeDirection = SwipeDirection.up;
}
isSwipeInProgress = true;
}
},
onPanEnd: (details) {
isSwipeInProgress =
false; // Reset the swipe progress status
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
width: 50,
height: 50,
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: isFlashingGreen
? confirmedWordBackgroundColor
: isFlashingRed
? errorBackgroundColor
: isSelected
? selectedBackgroundColor
: colorGrid[rowIndex][
colIndex], // Set the cell color based on selection
borderRadius: BorderRadius.circular(
0), // Rounded corners for the cell
),
child: Center(
child: Text(
cellValue, // Display the letter value in the center of the cell
style: TextStyle(
fontSize: 24,
color: isSelected
? selectedTextColor
: unselectedTextColor,
), // Styling for the letter text
),
),
),
);
},
),
),
I haven't really tried anything because i don't know where to start... I'm only new to flutter development so any help is much appreciated.
