在 Flutter 中的 Stack 小部件内移动、缩放和调整定位小部件的大小

Question

I would like to be able to move, rotate and zoom every element that you see in the image: 3 pictures and 1 text for example. Those elements are Positioned widgets (the red boxes) inside a Stack widget.

I'm trying to use the package matrix_gesture_detector ( https://pub.dev/packages/matrix_gesture_detector ), but the problem is that I can't perform the given actions on the Positioned and I can't wrap it inside any other widget (like MatrixGestureDetector for example) that handles all actions, because " Positioned widgets must be placed directly inside Stack widgets ".

If I use MatrixGestureDetector as a child of the Positioned I'm able to perform all the actions, but only inside the Positioned boundaries

How can I perform those actions directly on the Positioned? Or can I use some other widget instead of Stack/Positioned?

Answer 1

For me it worked pretty well.. Try something like this:

First i made a widget so that each widget can have its own Transformer Matrix

class TransformerWidget extends StatefulWidget {
  final Widget child;

  TransformerWidget(this.child, {Key key}) : super(key: key);

  @override
  _TransformerWidgetState createState() => _TransformerWidgetState();
}

class _TransformerWidgetState extends State<TransformerWidget> {
  final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());

  @override
  Widget build(BuildContext context) {
    final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());

    return MatrixGestureDetector(
      onMatrixUpdate: (m, tm, sm, rm) {
        notifier.value = m;
      },
      child: AnimatedBuilder(
        animation: notifier,
        builder: (ctx, child) {
          return Transform(
            transform: notifier.value,
            child: widget.child,
          );
        },
      ),
    );
  }
}

Secondly i wrapped the widget on Stack like this:

       Stack(
          children: [
            TransformerWidget(
              Container(
                color: Colors.white30,
              ),
            ),
            Positioned.fill(
              child: Container(
                transform: notifier.value,
                child: TransformerWidget(
                  FittedBox(
                    fit: BoxFit.contain,
                    child: Icon(
                      Icons.favorite,
                      color: Colors.deepPurple.withOpacity(0.5),
                    ),
                  ),
                ),
              ),
            ),
            TransformerWidget(
              Container(
                decoration: FlutterLogoDecoration(),
                alignment: Alignment(0, -0.5),
                child: Text(
                  'use your two fingers to translate / rotate / scale ...',
                  style: Theme.of(context).textTheme.display2,
                  textAlign: TextAlign.center,
                ),
              ),
            ),

It worked great! Except that if you pinch or something touching two of the widgets, both get transformed.. Still do not know how to fix this, but it works for now! :D