I'm still learning flutter and I was working on an app in which I need to do some perspective manipulation on images, I played with the Transform widget using Matrix4 and I was able to rotate a container along Y axis, here is the result :
Before animation

After Animation

As you can see the container rotated along Y axis in the 3D Space but practically at the level of the 2D plane of the screen its height shrinked, what I want here is to get the height of the container after it shrinked. I tried to get its height using RenderBox but it only gave me the height before Animation.
Here is my code :
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() {
runApp(MyApp());
}
GlobalKey containerKey = GlobalKey();
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(1440, 3040),
minTextAdapt: true,
splitScreenMode: true,
builder: (context, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: child,
);
},
child: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Rect(),
),
);
}
}
class Rect extends StatefulWidget {
const Rect({Key? key}) : super(key: key);
@override
State<Rect> createState() => _RectState();
}
class _RectState extends State<Rect> with SingleTickerProviderStateMixin {
late AnimationController _controller;
bool isDone = false;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
getSize(GlobalKey key){
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
RenderBox renderBox = key.currentContext?.findRenderObject() as RenderBox;
final Size size = renderBox.size;
print('Size: ${size.width}, ${size.height}');
});
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget? child) {
_controller.addStatusListener((status) {
if(status == AnimationStatus.completed){
getSize(containerKey);
}
});
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Transform(
transform: Matrix4.identity()..rotateX(_controller.value * 2*pi/8),
alignment: FractionalOffset.center,
child: Container(
key: containerKey,
width: 400.w,
height: 400.h,
color: Colors.redAccent,
),
),
ElevatedButton(
onPressed: () {
if (!isDone) {
_controller.forward();
isDone = !isDone;
} else {
_controller.reverse();
isDone = !isDone;
}
},
child: Text('Animate !'),
style: ElevatedButton.styleFrom(
shadowColor: Colors.black,
shape: StadiumBorder(),
padding: EdgeInsets.symmetric(horizontal: 35, vertical: 20)),
)
],
);
},
);
}
}