I’m trying to get the center of a scaled view in InteractiveViewer
. I know how to get the focal point because it is included in the onInteractionUpdate
event data, but I’m not sure how to get or calculate the center of the scaled view. Is anyone able to give me any hints what should I do or if there is better way to implement zoom with information about center point of the zoomed area?
<code>@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xFFFFE306),
child: InteractiveViewer(
transformationController: viewTransformationController,
onInteractionUpdate: (data) {
// print scaled center here
},
boundaryMargin: const EdgeInsets.all(0.0),
minScale: 0.1,
maxScale: 5,
//board
child: Stack(children: <Widget>[
Positioned(
left: boardOffset.dx,
top: boardOffset.dy,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
boardOffset = Offset(boardOffset.dx + details.delta.dx,
boardOffset.dy + details.delta.dy);
});
},
child: Container(
width: 1000,
height: 1000,
color: Color.fromARGB(255, 63, 231, 40),
child: Stack(children: <Widget>[
Positioned(
left: ((offset.dx - 50) / 50).roundToDouble() * 50,
top: (offset.dy / 100).roundToDouble() * 100,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
offset = Offset(offset.dx + details.delta.dx,
offset.dy + details.delta.dy);
});
},
child: ImageTile(),
),
),
]))),
)
])));
</code>
<code>@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xFFFFE306),
child: InteractiveViewer(
transformationController: viewTransformationController,
onInteractionUpdate: (data) {
// print scaled center here
},
boundaryMargin: const EdgeInsets.all(0.0),
minScale: 0.1,
maxScale: 5,
//board
child: Stack(children: <Widget>[
Positioned(
left: boardOffset.dx,
top: boardOffset.dy,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
boardOffset = Offset(boardOffset.dx + details.delta.dx,
boardOffset.dy + details.delta.dy);
});
},
child: Container(
width: 1000,
height: 1000,
color: Color.fromARGB(255, 63, 231, 40),
child: Stack(children: <Widget>[
Positioned(
left: ((offset.dx - 50) / 50).roundToDouble() * 50,
top: (offset.dy / 100).roundToDouble() * 100,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
offset = Offset(offset.dx + details.delta.dx,
offset.dy + details.delta.dy);
});
},
child: ImageTile(),
),
),
]))),
)
])));
</code>
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xFFFFE306),
child: InteractiveViewer(
transformationController: viewTransformationController,
onInteractionUpdate: (data) {
// print scaled center here
},
boundaryMargin: const EdgeInsets.all(0.0),
minScale: 0.1,
maxScale: 5,
//board
child: Stack(children: <Widget>[
Positioned(
left: boardOffset.dx,
top: boardOffset.dy,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
boardOffset = Offset(boardOffset.dx + details.delta.dx,
boardOffset.dy + details.delta.dy);
});
},
child: Container(
width: 1000,
height: 1000,
color: Color.fromARGB(255, 63, 231, 40),
child: Stack(children: <Widget>[
Positioned(
left: ((offset.dx - 50) / 50).roundToDouble() * 50,
top: (offset.dy / 100).roundToDouble() * 100,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
offset = Offset(offset.dx + details.delta.dx,
offset.dy + details.delta.dy);
});
},
child: ImageTile(),
),
),
]))),
)
])));
}