The movie screen in the following image is similar to a curved display.
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:
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?