I'm trying to implement the Magnification (like when you move text cursor in iOS, you see a zoomed preview of area around the cursor) of app Eye Color Changer - Camera in flutter. Here is my code:
class _MyHomePageState extends State<MyHomePage> {
Offset position;
@override
void initState() {
super.initState();
position = Offset(100, 100);
}
@override
Widget build(BuildContext context) {
getDraggable({withPreview = false}) {
return Column(
children: <Widget>[
Opacity(
opacity: withPreview ? 1 : 0,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
Image.asset("eye.png"),
],
);
}
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("face.jpg"),
),
),
child: null,
),
Positioned(
left: position.dx,
top: position.dy,
child: Container(
child: Draggable(
child: getDraggable(),
feedback: getDraggable(withPreview: true),
childWhenDragging: Container(),
onDraggableCanceled: (Velocity velocity, Offset offset) {
setState(() => position = offset);
},
),
),
),
Positioned(
left: 30,
bottom: 50,
child: Text(
"x: ${position.dx.toStringAsFixed(2)} y: ${position.dy.toStringAsFixed(2)}"),
)
],
),
);
}
}
Preview: https://i.stack.imgur.com/jFDM0.png
Instead of that red container, I need to show the magnifier of eye.png (that white circle) image.