flutterdartrendering

Widget/Image Warping And Distortion in Flutter

Widgets like the Transform widget make it easy to scale, translate, and skew widgets in Flutter. But there is no apparent way to warp or distort an image out of the box.

Take this example of warping for instance:

Example 1

Assume this widget is a Container with a Decoration Image and a Text widget as its child. Here, the widget is not clipped by a bezier curve or path. The widget is 'stretched', or warped. This may not be possible to achieve using the Container widget, but could it be done with a CustomPainter?

Also, take a look at this example:

Example 2

Here the image is distorted using a ripple effect. Is it even possible to replicate that using Flutter?

Solution

  • The best way to go about this is to convert the widget to an image and transform it, either by editing the pixel data or by painting a 3d texture.

    1. Example using Image manipulation
    2. Example using custom paint

    The latter is more performant, but the first will give you more control over how the image is distorted.

    1. See {1} in action
    2. See {2} in action