How to use GestureDetector on Stack's children elements

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

这是显示的日志的关键细节：

"Positioned widgets must be placed directly inside Stack widgets."

此问题的原因是 Positioned 小部件包含在 GestureDetector 中。要解决此错误，请在 Positioned 中添加 Stack，然后用它包裹 GestureDetector。

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,
    ),
  ],
),