ZWidget creates a 3D-like visual by stacking widgets one above the other and transforming them adequately.

This package is heavily inspired by ztext.js.

Since Text is a Widget, and since everything is a Widget in Flutter, apply your 3D effect to any element of your UI!

It was created for the Flutter Puzzle Hack.

Note: this package is in early! Its API might change.

Features

Demo gif

Usage

Use ZWidget in your UI like this:


final child = ZWidget(
  midChild: someWidget,
  // middle layer
  midToTopChild: otherWidget,
  // layers between mid and top child
  topChild: topChild,
  // layer at the top of the Stack
  midToBothild: otherWidget,
  // layers between mid and bot child
  botChild: botChild,
  // layer at the bottom of the Stack
  rotationX: pi / 3,
  // rotation around X axis
  rotationY: -pi / 4,
  // rotation around Y axis
  layers: 11,
  // Number of layers. Always odd (increased if even)
  depth: 16,
  // Space between layers
  direction: ZDirection.forwards, // forwards, backwards or both compared to the midChild.
);

You need to think in terms of layers when using ZWidget. They are visibles in the picture below:

ZWidget layers

There is always an odd number of layers. If you define an even number, it will be increased to be an odd number. Increase depth to increase their spacing.

ZDirection can be forward, backward or both.

Mid layer is the midChild. Depending on the ZDirection, other layers are displayed above or below the midChild. You can define the botChild for the child at the bottom of the Stack and topChild for the one at the top. Define Widgets between extremities and midChild with midToTopChild and midToBotChild.

Use the alignment property to set the Transform origin.

To effectively see the 3D effect, you must define a rotation to the ZWidget using rotationX and rotationY.

See the example project for more details.

Performance considerations

If ZWidget has 11 layers, it means that 11 Widgets will be drawn. Try to limit the complexity of widgets used for the 3D effect.

For instance, an opaque Image could use simple Containers to simulate a 3D effect:


final child = ZWidget(
  midChild: Container(
    color: Colors.black,
    // ...
  ),
  topChild: Image(
    // ...
  ),
  rotationX: pi / 3,
  rotationY: -pi / 4,
  layers: 11,
  depth: 16,
  direction: ZDirection.forwards,
);

Other arguments

final Widget? midToBotChild;
final Widget? botChild;
final Widget? midToTopChild;
final Widget? topChild;

final double depth;
final ZDirection direction;
final double rotationX;
final double rotationY;
final bool fade;
final int layers;
final bool z;
final bool reverse;
final bool debug;
final double perspective;
final Alignment? alignment;

Using this package

Contact me if you are using this package and I will add you to the list!

Libraries

zwidget