flutter design how to create very complex only one Conner rodent

Question

how to create this A widget that applies a transformation before painting its child. Unlike Rotated Box, which applies a rotation prior to layout, this object applies its API docs for the Transform. Translate constructor from Class Transform from the widgets library, for the Dart programming language.

Answer 1

You can do it by wrapping the Container with the Transform widget and providing a custom matrix for perspective rotation.

A rotated container for the left one looks like this:

Transform(
  transform: 
    Matrix4
    .identity()
    ..setEntry(3, 2, 0.0008)
..rotateX(math.pi * 30 / 180),
  alignment: Alignment.bottomRight,
  child: Container(...)
)

The Matrix4.identity() just creates a Matrix with ones on the diagonal. We need this to get the original dimensions of the container.

..setEntry(3, 2, 0.0008) sets the perspective. The top of the container should get bigger as it gets closer while the bottom part should stay as it is. So we have to set the perspective value in the 3rd row and 2nd column. 0.0008 looks fine but you can adjust this as you want.

..rotateX(math.pi * 30 / 180) rotates the container as usual. We want the container to lean forward. That's why we rotate on the x-Axis by 30 degrees. You can change it to any value as you want.

We also need to set the alignment to Alignment.bottomRight. Now the container actually leans forward instead of rotating.

You can apply this also for the 3rd container. Just change the alignment to Alignment.bottomLeft.

Full code example:

 @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Transform(
                transform: 
                  Matrix4
                  .identity()
                  ..setEntry(3, 2, 0.0008)
                  ..rotateX(math.pi * 30 / 180),

                alignment: Alignment.bottomRight,
                child: Container(
                  alignment: Alignment.center,
                  width: 200,
                  height: 400,
                  color: const Color.fromRGBO(128, 130, 143, 1),
                  child: Text(
                    "2", 
                    style: getStyleWithColor(
                      const Color.fromRGBO(27,31, 49, 1)
                    )
                  ),
                ),
              ),
              Container(
                alignment: Alignment.center,
                width: 200,
                height: 500,
                color: const Color.fromRGBO(222,    110 ,37 , 1),
                child: Text(
                  "1", 
                  style: getStyleWithColor(Colors.white)
                ),
              ),
              Transform(
                transform: Matrix4
                  .identity()
                  ..setEntry(3, 2, 0.0008)
                  ..rotateX(math.pi * 30 / 180),
                alignment: Alignment.bottomLeft,
                child: Container(
                  alignment: Alignment.center,
                  width: 200,
                  height: 300,
                  color: const Color.fromRGBO(71,   74, 90  , 1),
                  child: Text(
                    "3", 
                    style: getStyleWithColor(
                      const Color.fromRGBO(28,  31, 49, 1)
                    )
                  ),
                ),
              ),
            ]
          )
        ],
      ),
    );
  }

  TextStyle getStyleWithColor(Color color) {
    return TextStyle(
    fontSize: 150,
    fontWeight: FontWeight.bold,
    color: color
    );
  }
}

Proof: