Flutter pixel coordinates to offset - flutter

Question

So I have a third-party library in my Flutter app which sends me messages.
A message can for example be represented in the following json format
{
objects: [
{
'name': 'Name of obj1',
'x1': 107,
'y1': 1012,
'x2': 117,
'y2': 974
},
...
]
}
The x and y propertiess are screen coordinates (express in pixels).
Suppose now that I want to draw a Text (with the name property of an object in the message) that animates from (x1, y1) to (x2, y2) based on the data from the messages.
I looked at AnimatedPositioned which refered me to SlideTransition
If the size is intended to remain the same, with only the position changing over time, then consider SlideTransition instead. SlideTransition only triggers a repaint each frame of the animation, whereas AnimatedPositioned will trigger a relayout as well.
Now the example provided in the flutter doc of SlideTransition works with Offset going from Offset.zero to Offset(1.5, 0.0). But what exactly are these units expressed in? And how can I provide my screen coordinates to the Flutter Offset units?
I deliberatly gave a bit of the background to note that I cannot change anything about the format that these messages come in. I simply need to convert the screen coordinates to an offset, relative to the root of the application, not to its parent ofcourse.

Answer 1

double leftPosition = data[0]['x1'];
double topPosition = data[0]['y1'];
Call a future.delayed setting left and top position to the next value like
Future.delayed(duration: Duration (seconds:1), (){
leftPosition = data[0]['x2'];
topPosition = data[0]['y2'];
setState((){});
});
Then
Stack(
children:[
AnimatedPositioned(
duration : Duration(seconds : 1),
left : leftPosition,
top: topPosition,
)
]
),
This should take values in pixels. Please excuse if there are any mistakes. Wrote it from my phone.

Answer 2

if you "need FULL control over my widgets" i would recommend CustomMultiChildLayout which not only lets you know your child widgets size during the layout phase (so you can align them within some Offset) but also supports "animated" layout without rebuilding the children - in "normal" Stack widget you would need to wrap it with LayoutBuilder (to get the whole layout size) and AnimatedBuilder (for motion animation) and also you would need to rebuild your children on every animation frame
here you have two versions: the first one uses Overlay and has a very simple logic of child positioning, the second one uses RenderBox and the child positioning is more complex
the version that uses Overlay:
class AnimatedLabels extends StatefulWidget {
#override
State<AnimatedLabels> createState() => _AnimatedLabelsState();
}
class _AnimatedLabelsState extends State<AnimatedLabels> with TickerProviderStateMixin {
late AnimationController controller;
late OverlayEntry entry;
#override
void initState() {
super.initState();
controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 600),
);
entry = OverlayEntry(
builder: (ctx) {
final colors = [
Colors.orange, Colors.green, Colors.lime,
];
final data = [
{'name': 'orange label', 'x1': 150.0, 'y1': 400.0, 'x2': 50.0, 'y2': 100.0},
{'name': 'green label', 'x1': 10.0, 'y1': 56.0, 'x2': 65.0, 'y2': 125.0},
{'name': 'lime label', 'x1': 200.0, 'y1': 56.0, 'x2': 80.0, 'y2': 150.0},
];
return CustomMultiChildLayout(
delegate: LabelDelegate(controller, data),
children: List.generate(3, (i) => LayoutId(
id: i,
child: Card(
margin: EdgeInsets.zero,
elevation: 3,
color: colors[i],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(data[i]['name'] as String),
),
),
)),
);
},
);
SchedulerBinding.instance.addPostFrameCallback(insertOverlay);
}
insertOverlay(Duration d) {
print('insertOverlay $entry');
Overlay.of(context)!.insert(entry);
}
#override
Widget build(BuildContext context) {
print('build');
return Center(
child: ElevatedButton(
child: const Text('press me to start animation'),
onPressed: () => controller.value < 0.5? controller.forward() : controller.reverse()
),
);
}
}
class LabelDelegate extends MultiChildLayoutDelegate {
final AnimationController controller;
final List<Map> offsets;
LabelDelegate(this.controller, List<Map> data) :
offsets = [for (final d in data) {
'from': Offset(d['x1'] as double, d['y1'] as double),
'to': Offset(d['x2'] as double, d['y2'] as double),
}],
super(relayout: controller);
#override
void performLayout(ui.Size size) {
final looseBoxConstraints = BoxConstraints.loose(size);
// final curve = controller.status == AnimationStatus.forward? Curves.elasticOut : Curves.elasticIn;
final curve = controller.status == AnimationStatus.forward? Curves.easeOutBack : Curves.easeInBack;
final t = curve.transform(controller.value);
int id = 0;
for (final offsetMap in offsets) {
// print('$id: $offsetMap');
final size = layoutChild(id, looseBoxConstraints);
// the most important line of this code:
positionChild(id, Offset.lerp(offsetMap['from'], offsetMap['to'], t)!);
id++;
}
}
#override
bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => true;
}
the version that uses RenderBox:
class AnimatedLabels2 extends StatefulWidget {
#override
State<AnimatedLabels2> createState() => _AnimatedLabels2State();
}
class _AnimatedLabels2State extends State<AnimatedLabels2> with TickerProviderStateMixin {
late AnimationController controller;
final key = GlobalKey();
final globalOffset = ValueNotifier<Offset?>(null);
final colors = [
Colors.orange, Colors.green, Colors.lime,
];
final data = [
{'name': 'orange label', 'x1': 150.0, 'y1': 400.0, 'x2': 50.0, 'y2': 100.0},
{'name': 'green label', 'x1': 10.0, 'y1': 56.0, 'x2': 65.0, 'y2': 125.0},
{'name': 'lime label', 'x1': 200.0, 'y1': 56.0, 'x2': 80.0, 'y2': 150.0},
];
#override
void initState() {
super.initState();
controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 600),
);
SchedulerBinding.instance.addPostFrameCallback(setGlobalOffset);
}
setGlobalOffset(Duration d) {
final renderBox = key.currentContext!.findRenderObject() as RenderBox;
globalOffset.value = renderBox.localToGlobal(Offset.zero);
print('globalOffset: ${globalOffset.value}');
}
#override
Widget build(BuildContext context) {
print('build');
return Stack(
key: key,
children: [
Center(
child: ElevatedButton(
child: const Text('press me to start animation'),
onPressed: () => controller.value < 0.5? controller.forward() : controller.reverse()
),
),
CustomMultiChildLayout(
delegate: LabelDelegate2(controller, data, globalOffset),
children: List.generate(3, (i) => LayoutId(
id: i,
child: Card(
margin: EdgeInsets.zero,
elevation: 3,
color: colors[i],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(data[i]['name'] as String),
),
),
)),
),
],
);
}
}
class LabelDelegate2 extends MultiChildLayoutDelegate {
final AnimationController controller;
final List<Map> offsets;
final ValueNotifier<Offset?> globalOffset;
LabelDelegate2(this.controller, List<Map> data, this.globalOffset) :
offsets = [for (final d in data) {
'from': Offset(d['x1'] as double, d['y1'] as double),
'to': Offset(d['x2'] as double, d['y2'] as double),
}],
super(relayout: Listenable.merge([controller, globalOffset]));
#override
void performLayout(ui.Size size) {
// print(globalOffset);
final looseBoxConstraints = BoxConstraints.loose(size);
// final curve = controller.status == AnimationStatus.forward? Curves.elasticOut : Curves.elasticIn;
final curve = controller.status == AnimationStatus.forward? Curves.easeOutBack : Curves.easeInBack;
final t = curve.transform(controller.value);
int id = 0;
for (final offsetMap in offsets) {
// print('$id: $offsetMap');
final size = layoutChild(id, looseBoxConstraints);
// the most important line of this code:
positionChild(id, Offset.lerp(offsetMap['from'], offsetMap['to'], t)! - (globalOffset.value ?? Offset.zero));
id++;
}
}
#override
bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => true;
}
EDIT added a modified version of RenderBox solution showing how to implement the case when the change of location happens when the animation is still running: note that not only the whole animation is continuous but also the animated object behaves as if it was a real object with some mass (so it does not change the final direction at once) - it was done by simple use of SpringSimulation
class AnimatedLabels3 extends StatefulWidget {
#override
State<AnimatedLabels3> createState() => _AnimatedLabels3State();
}
class _AnimatedLabels3State extends State<AnimatedLabels3> with TickerProviderStateMixin {
late AnimationController controllerX, controllerY;
late LabelDelegate3 delegate;
final key = GlobalKey();
final globalOffset = ValueNotifier<Offset?>(null);
#override
void initState() {
super.initState();
controllerX = AnimationController.unbounded(
vsync: this,
duration: const Duration(milliseconds: 1000),
);
controllerY = AnimationController.unbounded(
vsync: this,
duration: const Duration(milliseconds: 1000),
);
delegate = LabelDelegate3(controllerX, controllerY, globalOffset);
SchedulerBinding.instance.addPostFrameCallback(setGlobalOffset);
}
setGlobalOffset(Duration d) {
final renderBox = key.currentContext!.findRenderObject() as RenderBox;
globalOffset.value = renderBox.localToGlobal(Offset.zero);
print('globalOffset: ${globalOffset.value}');
}
#override
Widget build(BuildContext context) {
print('build');
return Stack(
children: [
const Center(child: Text('tap anywhere to start animation\n\nalso try to tup again while animation is still in progress')),
GestureDetector(
onPanDown: (d) {
delegate.simulateNewTargetPosition(d.globalPosition);
},
),
CustomSingleChildLayout(
key: key,
delegate: delegate,
child: SizedBox.square(
dimension: 64,
child: Container(
width: 64,
height: 64,
decoration: const ShapeDecoration(
color: Colors.deepOrange,
shape: CircleBorder(),
shadows: [BoxShadow(blurRadius: 4, spreadRadius: 1, offset: Offset(3, 3))],
),
),
),
),
],
);
}
}
final springDescription = SpringDescription.withDampingRatio(mass: 8, stiffness: 100);
class LabelDelegate3 extends SingleChildLayoutDelegate {
final AnimationController controllerX;
final AnimationController controllerY;
final ValueNotifier<Offset?> globalOffset;
Offset current = Offset.zero;
Simulation
sx = SpringSimulation(springDescription, 0, 0, 0),
sy = SpringSimulation(springDescription, 0, 0, 0);
LabelDelegate3(this.controllerX, this.controllerY, this.globalOffset) :
super(relayout: Listenable.merge([controllerX, controllerX, globalOffset]));
#override
Offset getPositionForChild(Size size, Size childSize) {
current = Offset(controllerX.value, controllerY.value);
// the most important line of this code:
return current - (globalOffset.value ?? Offset.zero) - childSize.center(Offset.zero);
}
void simulateNewTargetPosition(ui.Offset position) {
// timeDilation = 5;
sx = SpringSimulation(springDescription, current.dx, position.dx, 2 * controllerX.velocity);
sy = SpringSimulation(springDescription, current.dy, position.dy, 2 * controllerY.velocity);
controllerX.animateWith(sx);
controllerY.animateWith(sy);
}
#override
bool shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate) => true;
}