如何在 Flutter 上为移动设备创建一个可变形的网格 UI？

Question

What is the name of this UI below?

How do I create one in Flutter?

These are the desired characteristics:

• The scalability of the grid must have max and min values.
• Pinch to zoom function.
• Elements or vector properties should be able to snap to the grid.

Is there a library that can serve this function?

Thank you for your help!

Answer 1

Use the transformable package found on pub.dev . See the example lib.dart file in the Github example folder .

A code snippet from the pud.dev page:

LayoutBuilder(
  builder: (context, constraints) => Transformable(
    child: Grid(),
    viewerSize: viewerSize,
    controller: TransformController(
      config: TransformConfig(
        initialTransform: Transformation(offset: startOffset),
        initialSize: childStartSize,
        innerBoundRect: innerRect,
        outerBoundRect: outerRect,
      ),
    ),
  );