How to use GestureDetector on Stack's children elements - flutter

Question

I'm designing a profile image widget and I need to perform 2 different tasks.
Edit icon will change the profile image and Clicking on the image will enlarge the image but I got these errors instead :
I/flutter (21524): The following assertion was thrown building RawGestureDetector(state:
I/flutter (21524): RawGestureDetectorState#6b90e(gestures: [tap])):
I/flutter (21524): Incorrect use of ParentDataWidget.
I/flutter (21524): Positioned widgets must be placed directly inside Stack widgets.
I/flutter (21524): Positioned(no depth, top: 0.0, right: 2.0, dirty) has a Stack ancestor, but there are other widgets
I/flutter (21524): between them:
I/flutter (21524): - Listener(listeners: [down], behavior: deferToChild)
I/flutter (21524): - _GestureSemantics
I/flutter (21524): These widgets cannot come between a Positioned and its Stack.
I/flutter (21524): The ownership chain for the parent of the offending Positioned was:
I/flutter (21524): Listener ← _GestureSemantics ← RawGestureDetector ← GestureDetector ← Stack ← Padding ← Column ←
I/flutter (21524): Center ← DecoratedBox ← Container ← ⋯
Here's my code :
Stack(children: <Widget>[
GestureDetector(
onTap : openImage
child: Container(
width: 120.0,
height: 120.0,
decoration: new BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: new NetworkImage(user.dp ),
fit: BoxFit.cover,
),
borderRadius:
new BorderRadius.all(new Radius.circular(100.0)),
border: new Border.all(
color: Colors.white,
width: 2.0,
),
),
),
GestureDetector(
onTap: uploadImage,
child: Positioned(
child: CircleAvatar(child: Icon(Icons.edit)),
right: 2.0, top: 0.0,),
)
],
),
How can I fix this error?

Answer 1

This is the key detail on the logs displayed:
"Positioned widgets must be placed directly inside Stack widgets."
The reason of this issue is that Positioned widget is wrapped inside GestureDetector. To solve this error, add Positioned in the Stack, then wrap GestureDetector with it.
Stack(
children: <Widget>[
GestureDetector(
onTap: () {
debugPrint('Clicked open image');
},
child: Container(
width: 120.0,
height: 120.0,
...
),
),
Positioned(
child: GestureDetector(
onTap: () {
debugPrint('Clicked edit image');
},
child: CircleAvatar(child: Icon(Icons.edit)),
),
right: 2.0,
top: 0.0,
),
],
),