Single Finger Widget Resize

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  MBWidget _mbWidget = MBWidget(100, 100);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: 300,
        color: Colors.amber,
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              child: Text('width = ${_mbWidget.width} | height = ${_mbWidget.height}'),
              ),
            _getDraggable(context),
          ],
        ),
      ),
    );
  }

  _getDraggable(context) {
    return Positioned(
      top: 100,
      left: 0,
      child: GestureDetector(
        // key: widget.testTextKey ?? UniqueKey(),
        onTap: () {},
        child: Stack(
          children: <Widget>[
            Draggable(
              child: _getChild(),
              maxSimultaneousDrags: 1,
              childWhenDragging:
                  Material(child: null // _child(draggableKeys[1]),
                      ),
              feedback: Material(
                child: _getChild(),
                color: Colors.transparent,
              ),
            ),
            Positioned(
              child: GestureDetector(
                onScaleStart: _resizeStart,
                onScaleEnd: _resizeEnd,
                onScaleUpdate: _resizing,
                child: Container(
                  child: new Icon(
                    Icons.aspect_ratio,
                    color: Colors.white,
                    size: 15.0,
                  ),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Theme.of(context).primaryColor),
                  padding: const EdgeInsets.all(5.0),
                ),
              ),
              bottom: 0,
              right: 0,
            ),
          ],
        ),
      ),
    );
  }

  _getChild() {
    return Container(
      margin: const EdgeInsets.only(
        right: 10,
        bottom: 10,
      ),
      padding: const EdgeInsets.all(5.0),
      child: Image.network(
        "https://picsum.photos/id/1/300/300",
        width: _mbWidget.width,
        height: _mbWidget.height,
        fit: BoxFit.cover,
      ),
      decoration: BoxDecoration(
        color: Colors.transparent,
        border: Border.all(
            width: 2.0, color: Colors.black, style: BorderStyle.solid),
      ),
    );
  }

  bool isResizing = false;

  Offset initialOffset;

  _resizeStart(ScaleStartDetails details) {
    // print('resize start ${details}');
    isResizing = true;
    initialOffset = details.focalPoint;
    // initialOffset = details.focalPoint;

    // print('initial ${details.focalPoint}');
    // print('local ${details.localFocalPoint}');
  }

  _resizeEnd(ScaleEndDetails details) {
    // print('resize end ${details}');
    isResizing = false;
  }

  double width = 0, height = 0;
  
  // NOT COMPLETED YET
  _resizing(ScaleUpdateDetails details) {
    if (isResizing) {
      // width = details.focalPoint.dx - initialOffset.dx;
      // height = details.focalPoint.dy - initialOffset.dy;
      width = details.focalPoint.dx - initialOffset.dx - width;
      height = details.focalPoint.dy - initialOffset.dy - height;

      var widthDiff = details.focalPoint.dx / initialOffset.dx;
      var heightDiff = details.focalPoint.dy / initialOffset.dy;

      _mbWidget.setWidth(_mbWidget.width * widthDiff);
      _mbWidget.setHeight(_mbWidget.height * heightDiff);

      // print('${details.focalPoint.dx} - ${details.focalPoint.dy}  ==  ${initialOffset.dx} - ${initialOffset.dy}');
      // print('width $width / height $height == widthDiff $widthDiff / heightDiff $heightDiff');
//       print('width $width / height $height == widget ${_mbWidget.width} / ${_mbWidget.height}');

      initialOffset = details.focalPoint;

      setState(() {
      });
    }
  }
}

class MBWidget {
  double width = 100;
  double height = 100;
  MBWidget(this.width, this.height);

  setWidth(double w) => this.width = w;
  setHeight(double h) => this.height = h;
}