finding the best way to design this? [closed]

Question

is it possible to make one side of container small and other big as shown in this picture, in flutter. If yes, how?

EDIT: I have accepted the answer which helps in this case.

Answer 1

A simpler approach would be to use Transform on the Container(); the only limitation here would be to stop Container's children from being skewed too. You can use the Transform class as a starting point for this, like this:

Transform(
  alignment: FractionalOffset.center,
  transform: Matrix4.identity()
  ..setEntry(3, 2, 0.01)
  ..rotateY(-(5 / (180 / math.pi))),
  child: ItemContainerWidget(),
)

That would give you something like this -

Answer 2

Please refer to this link

flutter_custom_clippers: ^2.0.0

ClipPath(
            clipper: RoundedDiagonalPathClipper(),
            child: Container(
              height: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(50.0)),
                color: Colors.orange,
              ),
              child: Center(child: Text("RoundedDiagonalPathClipper()")),
            ),
          ),