Repository: flutter
Issue: Creating Resizable View that resizes when pinch or drag from corners and sides
Labels: framework,d: examples,would be a good package,c: proposal,P3,team-framework,triaged-framework

**[Asked at stack overflow](https://stackoverflow.com/questions/60924384/creating-resizable-view-that-resizes-when-pinch-or-drag-from-corners-and-sides)**  I am currently working on a ScreenView with features like draggable and resizable views(with or without using corners). The problem I have now is that I want to resize the view by touch gestures in the corners. Therefore, I thought of a Point which I add to a view on selection, which can be dragged to resize the selected view.

Even after a long research, I could not come up with a solution on how to overlay another view, which has its own DragListener. I could imagine putting the selected view and the point into one ViewGroup and having the Point overlay the View. Did someone have experience with this problem? Thank you in advance.

How to create the resizable view like this?

ReactNative Demo --> [React Native PLUGIN example](https://github.com/CaptainOmega/react-native-drag-resize)
JS DEMO(Goto Resizing Section) --> [JS Example, GOTO RESIZING section](https://interactjs.io/)
JQUERY Demo --> [JQuery Example](https://jqueryui.com/resizable/)

      
       import 'package:flutter/material.dart';
       import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';

      class TransformImage extends StatefulWidget {
        TransformImage({Key key}) : super(key: key); // changed

        @override
        _TransformImageState createState() => _TransformImageState();
      }

      class _TransformImageState extends State<TransformImage> {
        double scale = 0.0;

        @override
        Widget build(BuildContext context) {
          final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());

          return Scaffold(
            appBar: AppBar(
              title: Text('Transform Image'), // changed
            ),
            body: Center(
              child: MatrixGestureDetector(
                onMatrixUpdate: (m, tm, sm, rm) {
                  notifier.value = m;
                },
                // shouldRotate: false,
                // shouldScale: true,
                // shouldTranslate: false,
                child: AnimatedBuilder(
                  animation: notifier,
                  builder: (ctx, child) {
                    return Transform(
                      transform: notifier.value,
                      child: Center(
                        child: Stack(
                          children: <Widget>[
                            Container(
                              color: Colors.red,
                              padding: EdgeInsets.all(10),
                              margin: EdgeInsets.only(top: 50),
                              child: Transform.scale(
                                scale:
                                    1, // make this dynamic to change the scaling as in the basic demo
                                origin: Offset(0.0, 0.0),
                                child: Container(
                                  color: Colors.green,
                                  child: Image.network(
                                    'https://picsum.photos/250?image=9',
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
          );
        }
      }