Flutter中有没有办法实现这种功能？ Flutter 的贴纸视图？

Question

我需要实现这样的功能，用户可以使用角图标调整文本或任何小部件的大小。我附上参考资料。任何帮助都会很棒。

我想使用图标实现单指旋转。

我已经尝试实现一些 Android Sticker View 库的一些类似功能，但我没有得到正确的结果。 我已经尝试过以下代码。

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))),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

好吧，我最近看到了这个包，这将很容易满足您的要求

Lindi 贴纸包