Flutter magnification

Viewed 1065

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.

0 Answers
Related