Flutter: Stack with two images in GestureDetectors: Problem with reordering

问题

Flutter: I have two images within a stack, each capable of being scaled by dragging it. The two images are positioned one below the other, so they're both fully visible on screen at first. When I drag the top or bottom image, either should become bigger and overlap the other picture. Therefor, the order in my stack has to change depending on which image I panDowned.

I made it almost work, but there is problem I just don't understand. Initially, my top image is the "master" image. So, I can scale it and it does sit on top of the bottom image. Now, when I panDown on the bottom image and try to scale it, it does so, but only for a couple of miliseconds, before the top image receives my onPanUpdates. When I lift off my finger and try to scale the bottom picture again, it works like a charme. So, I need two attempts before the bottom image becomes the "master" image that overlaps the top image.

In my code below I simplified the problem. We just use a top green square and a bottom red square. Now, the problem occurs directly when you try to scale the bottom red square: It does get the first onPanDown, but as soon as you drag it, all of a sudden the top green square receives the onPanUpdate events. It must have something to do with my reordering: If I dont work with the "_master" variable, it works as intended, except for the fact that the bottom red quare is always behind the top green square.

import 'package:flutter/material.dart';
import 'styles.dart';
import 'package:faver/bottomNavbar.dart';

class Newsfeed extends StatefulWidget {
    @override
    _NewsfeedState createState() => _NewsfeedState();
}

class _NewsfeedState extends State<Newsfeed> {
    double _initialY;
    double _scalePic1 = 1;
    double _scalePic2 = 1;
    int _master = 1;

    List<Widget> squares;

    List<Widget> getSquares(master) {

        squares = <Widget>[];
        squares.add(Positioned(

        top: 100,
        child: Container(
            height: 200 * _scalePic1,
            width: 200,
            child: GestureDetector(
                onPanDown: (DragDownDetails details) {

                    print("===========top green square pan down");
                    _initialY = details.globalPosition.dy;
                    _master = 1;

                },
                onPanUpdate:(DragUpdateDetails details) {
                    double distanceY = details.globalPosition.dy - _initialY;
                    print("!!!panUpdate top green square");
                    setState(() {
                        _scalePic1 = 1 + distanceY / 200;
                    });
                },
                onPanEnd: (DragEndDetails details){
                    print("ended top green square");
                },
                child: Container(width: 200, height: 200 * _scalePic1, color: Colors.green)),
        )));

        squares.add(Positioned(
            bottom: 100,
            child: Container(
                height: 200 * _scalePic2,
                width: 200,
                child: GestureDetector(
                        onPanStart: (DragStartDetails details) {
                        print("=============bottom red square pan down");
                        _initialY = details.globalPosition.dy;
                        _master = 2;
                    },
                    onPanUpdate: (DragUpdateDetails details) {
                        print("######panUpdate bottom red square");
                        double distanceY = -details.globalPosition.dy + _initialY;
                        setState(() {
                            _scalePic2 = 1 + distanceY / 200;
                        });
                    },
                    onPanEnd: (DragEndDetails details){
                        print("ended bottom red square");
                    },
                    child: Container(width: 200, height: 200 * _scalePic2, color: Colors.red)),
            )));


        if (master == 1) {
            print("master = green");
            return [squares[1], squares[0]];
        } else {
            print("master = red");
            return [squares[0], squares[1]];
        }
    }

    @override
    Widget build(BuildContext context) {
        return Container(
            height: 350, child: Stack(children: getSquares(_master)));
    }
}

So, expected result: When I grab and drag an image, it should scale AND overlap the other image.

actual result: I need two grabs on an image. At first attempt, the other image reveives the onPanUpdates

Any idea? :)

来源：https://stackoverflow.com/questions/54491477/flutter-stack-with-two-images-in-gesturedetectors-problem-with-reordering