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?
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.