How to drag elements inside a zoomable content widget? - flutter

Question

I'm trying to create an editable node diagram in a draggable/zoomable viewport (kind of like the node system in Blender). A user should be able to edit and drag the nodes.
I can't get the PhotoView (which I use as a viewport) to stay still when I actually want to drag a node within it. All of the PhotoView's children are moving when only one widget - the node - should do so.
I've tried placing boxes listening to pointer events (to make them draggable) inside a PhotoView, but somehow, anything outside a centered area the size of the screen doesn't receive any touches.
Minimal code so far:
Creating the PhotoViewController (inside a State):
double scale = 1;
PhotoViewController controller;
#override
void initState() {
super.initState();
controller = PhotoViewController()
..outputStateStream.listen(listener);
}
void listener(PhotoViewControllerValue value) {
setState(() {
// store the scale in a local variable to drag widgets in relation to the zoom
scale = value.scale;
});
}
Building the viewport (also part of the State):
Offset position = Offset(0, 0);
#override
Widget build(BuildContext context) {
return Center(
child: PhotoView.customChild(
child: Stack(
children: <Widget>[
// vertical line
Center(
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black
),
child: Container(
width: 1,
height: 1000,
),
),
),
// horizontal line
Center(
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black
),
child: Container(
width: 1000,
height: 1,
),
),
),
// box to debug the initial screen size
Center(
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black12
),
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
),
// stack containing all nodes (only one in this case)
Stack(
children: <Widget>[
// build a node...
Center(
child: Transform.translate( // offset the node
offset: position,
child: Listener( // make it a listener
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.red
),
child: Container(
width: 130,
height: 100,
child: Column(
children: <Widget>[
Text("Node",
style: TextStyle(
color: Colors.white,
fontSize: 18.0
),
)
],
),
),
),
// make the node listen to touch movements and eventually change its position
onPointerMove: (event) =>
{
setState(() =>
{
position +=
event.delta.scale(1 / scale, 1 / scale)
})
},
)
)
),
]
),
],
),
childSize: Size(10000, 10000),
backgroundDecoration: BoxDecoration(color: Colors.white),
initialScale: 1.0,
controller: controller,
),
);
}
At the moment, I kind of fixed the unintentional viewport drag by toggling a bool (whenever a node is touched/released) and overwriting the PhotoView's value.

Answer 1

Switching from the photo_view package to pskink's matrix_gesture_detector solved my issues. Though I now follow a different system: for every node, a new matrix is created (deriving from a main matrix, translated by the node's position). Matrices may be used inside a Transform widget to transform its child.
I achieved building a translatable viewport in which there is a draggable node carrying a clickable checkbox.
Some working minimal code:
import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';
import 'package:vector_math/vector_math_64.dart' as vector;
...
// following code is executed inside a State
Matrix4 matrix = Matrix4.identity();
ValueNotifier<int> notifier = ValueNotifier(0);
vector.Vector3 nodePosition = vector.Vector3(50, 0, 0);
bool check = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Node Diagram Demo'),
),
body: LayoutBuilder(
builder: (ctx, constraints) {
return MatrixGestureDetector(
shouldRotate: false,
onMatrixUpdate: (m, tm, sm, rm) {
matrix = MatrixGestureDetector.compose(matrix, tm, sm, null);
notifier.value++;
},
child: Container(
width: double.infinity,
height: double.infinity,
alignment: Alignment.topLeft,
color: Color(0xff444444),
child: AnimatedBuilder(
animation: notifier,
builder: (ctx, child) {
return Container(
width: double.infinity,
height: double.infinity,
child: Stack( // a stack in which all nodes are built
children: <Widget>[
buildCenter(),
buildNode()
],
)
);
},
),
),
);
},
),
);
}
// I made this into a method so the transformed matrix can be calculated at runtime
Widget buildNode() {
// create a clone of the main matrix and translate it by the node's position
Matrix4 ma = matrix.clone();
ma.translate(nodePosition.x, nodePosition.y);
return Transform(
transform: ma, // transform the node using the new (translated) matrix
child: MatrixGestureDetector(
shouldRotate: false,
shouldScale: false,
onMatrixUpdate: (m, tm, sm, rm) {
Matrix4 change = tm;
// move the node (in relation to the viewport zoom) when it's being dragged
double sc = MatrixGestureDetector.decomposeToValues(matrix).scale;
nodePosition += change.getTranslation() / sc;
notifier.value++; // refresh view
},
// design a node holding a bool variable ('check')...
child: Container(
decoration: BoxDecoration(
color: Colors.blue
),
child: Container(
width: 200,
height: 100,
child: Column(
children: <Widget>[
Text("Node",
style: TextStyle(
color: Colors.white,
fontSize: 18.0
),
),
Checkbox(
onChanged: (v) =>
{
check = v,
notifier.value++ // refresh view
},
value: check,
)
],
),
)
)
)
);
}
// build two lines to indicate a matrix origin
Widget buildCenter() {
return Transform(
transform: matrix,
child: Stack(
children: <Widget>[
// vertical line
Center(
child: Container(
width: 1,
height: 250,
decoration: BoxDecoration(color: Colors.white)
)
),
// horizontal line
Center(
child: Container(
width: 250,
height: 1,
decoration: BoxDecoration(color: Colors.white)
)
),
],
)
);
}