I recently noticed an issue on iPhone 15. I have a word game built in Flutter web, in which the user has to drag and drop tiles to match words with synonyms. For this I have used a draggable widget with feedback as seen in the code below.
return Stack(
children: [
(wordList.colors[index] != wordList.green)
? DragTarget<Map>(
hitTestBehavior: HitTestBehavior.translucent,
builder: ((context, candidateData, rejectedData) {
return Draggable<Map>(
rootOverlay: true,
onDragStarted: () {
lIndex = index;
},
data: {'text': str, 'index': index},
feedback: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Card(
elevation: 5,
shadowColor: Colors.grey,
child: Container(
color: Colors.grey.shade200,
child: Text(
str,
style: const TextStyle(
fontSize: 18, color: Colors.black87),
),
),
),
),
childWhenDragging: Container(
width: 50,
height: 20,
color: Colors.grey,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Card(
elevation: 10,
shadowColor: Colors.grey,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 2.0),
// margin: const EdgeInsets.symmetric(vertical: 6.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.black38),
borderRadius: BorderRadius.circular(12.0),
color: wordList.colors[index],
),
child: FittedBox(
child: Text(
str,
style: const TextStyle(fontSize: 20),
maxLines: 1,
),
)),
),
));
}),
onWillAcceptWithDetails: (data) {
return true;
},
onAcceptWithDetails: (value) {
swapWords(value.data, index);
refresh();
},
)
This works perfectly on Android phones, desktops and even iPhones prior to 15 on Safari browser. I dont know what has changed in the new iPhones that the feedback widget is not seen at all. As a result when the user drags and drops a word tile, the words swap alright but there is no indication to the user that he has dragged something.
You can see the game behavior at / Play it on iPhone 15 and on any other device and see the difference.
Any help / pointers would be appreciated.