1

The movie screen in the following image is similar to a curved display. Required UI

The Transform widget in Flutter allows doing various 3D perspective implementations. Is there any way to achieve this plane curve effect?

Using the following code, I was able to implement 3D rotation around X-axis:

Transform(
  alignment: FractionalOffset.center,
  transform: Matrix4.identity()
             ..setEntry(3, 2, 0.002)
             ..rotateX(pi / 4)
             ..scale(0.8),
  child: Padding(
          padding: EdgeInsets.all(16.0),
          child: AspectRatio(
                   aspectRatio: 1.5,
                   child: ClipPath(
                            clipper: VideoClipper(),
                            child: VideoPlayer(_controller)),
                            ),
                 ),
         ),
);

And using the following Clipper, I could clip the top and bottom edges of the video player to mock the curved edges:

class VideoClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(0, 0);
    path.lineTo(0.0, size.height);
    path.arcToPoint(Offset(size.width, size.height),
        clockwise: true, radius: Radius.circular(size.width*2));
    path.lineTo(size.width, 33.0);
    path.arcToPoint(Offset(0.0, 33.0), clockwise: false, radius: Radius.circular(size.width * 2));
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

The result:

Result

However, the contents of the video don't look like what they would be on a curved display. Is it possible to achieve such an effect using Flutter?

Smarak Das
  • 534
  • 1
  • 7
  • 8

0 Answers0