ListVisualisation.perspective constructor

ListVisualisation.perspective({
  1. double rotation = 50,
  2. double scalePerUnit = 400,
  3. bool warp3d = true,
})

Displays items in an SnappyListView with a perception perspective. The parameters rotation configures how intense the depth perception is supposed to be. If the rotation is bigger than 0 the perspective is shown on the right and if its lower than 0 perspective is on the left side. If rotation equals 0, no change to the list will be applied. The intensity of depth perception can be configured with scalePerUnit

Implementation

ListVisualisation.perspective({
  double rotation = 50,
  double scalePerUnit = 400,
  bool warp3d = true,
})  : assert(rotation.abs() <= 90),
      _parameters = ((item) {
        double scale = 1;
        if (item.isInBuilderSizes) {
          final depth =
              cos((90 - rotation) * (pi / 180)) * item.distanceToCurrentPage!;
          scale = 1 - depth / scalePerUnit;
        }
        return ListVisualisationParameters(
          transform: Matrix4.rotationY(warp3d ? rotation * (pi / 180) : 0)
            ..scale(scale),
          curve: Curves.linear,
          transformAlignment: Alignment.center,
          duration: const Duration(milliseconds: 0),
        );
      });