2

I need to implement of such feature where Text or Any widget can be resized by user using a corner icons. I'm attaching a reference. Any help would be great.

I want to implement One Finger Rotate using the Icon.

I've tried implementing some similar features of few Android Sticker View library but I am not getting proper result. I've tried the Following code.

import 'package:flutter/material.dart';
import 'package:matrix4_transform/matrix4_transform.dart';
import 'dart:math';
import 'package:render_metrics/render_metrics.dart';

class DragRotate extends StatefulWidget {
  DragRotate({Key key}) : super(key: key);

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

class _DragRotateState extends State<DragRotate> {
  Matrix4 matrixForObject = Matrix4.identity();

  double centerx, centery;
  RenderParametersManager renderManager = RenderParametersManager();

  GlobalKey sdsd = new GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        child: Stack(
          children: [
            Center(
              child: Transform(
                origin: Offset(100, 100),
                transform: matrixForObject,
                child: Container(
                  key: sdsd,
                  height: 200,
                  width: 200,
                  color: Colors.amber,
                  child: Stack(
                    children: [
                      RenderMetricsObject(
                        manager: renderManager,
                        id: "w1",
                        child: Container(
                          margin: EdgeInsets.all(10),
                          color: Colors.amberAccent,
                        ),
                      ),
                      Positioned(
                          top: 0,
                          right: 0,
                          child: GestureDetector(
                              onPanStart: (p) {
                                //// THIS IS USED TO GET THE CENTER X CORDINATE OF THE ROTATING OBJECT
                                centerx =
                                    renderManager.getRenderData("w1").center.x;

                                //// THIS IS USED TO GET THE CENTER Y CORDINATE OF THE ROTATING OBJECT

                                centery =
                                    renderManager.getRenderData("w1").center.y;
                              },
                              onPanUpdate: (s) {
                                double angel = atan2(
                                        s.globalPosition.dy - centery,
                                        s.globalPosition.dx - centerx) *
                                    180 /
                                    pi;

                                setState(() {
                                  matrixForObject = Matrix4Transform()
                                      .rotateByCenterDegrees(angel, Size(1, 1))
                                      .matrix4;
                                });
                              },
                              child: Icon(Icons.rotate_90_degrees_ccw))),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

enter image description here

Sumit Gohil
  • 68
  • 7
  • check `Transform` widget - of course you have to add your own logic for setting `Transform.transform` property – pskink Nov 27 '19 at 07:30
  • May be [this](https://stackoverflow.com/questions/56423707/flutter-zoomable-widget) can help you to find your answer. – Jigar Nov 27 '19 at 07:38
  • I tried both of them but it's not working properly. – Sumit Gohil Nov 27 '19 at 08:23
  • if you tried something, then post your code – pskink Nov 27 '19 at 08:35
  • @pskink Sir, I used your Repo matrix_gesture_detector, but I am not sure how am I supposed to achieve the same result by using icons to to the resizing thing – Sumit Gohil Nov 27 '19 at 08:43
  • see `Transform Demo 4` in https://github.com/pskink/matrix_gesture_detector/blob/master/example/lib/main.dart – pskink Nov 27 '19 at 08:44
  • @pskink I tried using solution provided in Transform Demo 4, but looks like it doesn't fit in the use case here. The use case here would be, a User can hold the Resize Icon and as soon as the user drags the icon, the Text should change it's size. – Sumit Gohil Nov 27 '19 at 08:51
  • this is what i said in my first comment: "of course you have to add your own logic for setting `Transform.transform` property" – pskink Nov 27 '19 at 09:22
  • Okay I am not really that good at it, if someone could just help me with basics. i am still trying on my best to Achieve the solution. If I get it done, I will post the code here. – Sumit Gohil Nov 27 '19 at 09:24
  • read about `GestureDetector` and its `onPan*` properties – pskink Nov 27 '19 at 09:26
  • Okay, I will just head right toward documentation and get my hands dirtier. – Sumit Gohil Nov 27 '19 at 09:27
  • It's been months and it looks like I'm still stuck. @pskink Can you help me out here? Or can you just try to make a pub package something like this https://github.com/kencheung4/android-StickerView ? – Sumit Gohil Aug 18 '20 at 21:31
  • so post your code, how do you use `GestureDetector` and its `onPan*` callbacks? – pskink Aug 19 '20 at 05:41
  • @pskink Hi, I've updated my question with the code I've tried. I've used https://pub.flutter-io.cn/packages/render_metrics package for calculation of Widget Metrics. – Sumit Gohil Aug 21 '20 at 21:03

0 Answers0