Flutter: Matrix4 Off-center rotation during animated transition

Issue

Description:

Hello, I am trying to animate the rotation of an object. For this I use Matrix4 to control the point of rotation of my object. I have a strange behavior during the animation transition.

---

Problem :

Why does my green square not maintain its rotation around its center during the animation?

---

The code :

class NodeV3View extends StatefulWidget {
  const NodeV3View({
    Key? key,
  }) : super(key: key);

  @override
  State<NodeV3View> createState() => _NodeV3ViewState();
}

class _NodeV3ViewState extends State<NodeV3View> {
  
  bool isExpand = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var controller = Provider.of<CompteurProvider2>(context);

    return Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints){
            return Consumer<CompteurProvider2>(builder :(ctx , provider , child){
              return GestureDetector(
                onTap: () => setState(() {}),
                child: Container(
                  color: Colors.yellow,
                  width: 300,
                  height: 300,
                  child: Stack(
                    children: [
                      Positioned(
                        left: 150 - 50,// => Yellow Square / 2 - Green Square / 2
                        top : 150 - 50,
                        child: InkWell(
                          onTap: (){
                            setState(() {
                              isExpand = !isExpand;
                            });
                          },
                          child: AnimatedContainer(
                            duration: const Duration(milliseconds: 500),
                            width: 100,
                            height: 100,
                            decoration: BoxDecoration(
                              color: Colors.green,
                            ),
                          transform: Matrix4Transform()
                              .rotateDegrees(
                                  isExpand == true
                                      ? 180
                                      : 0,
                                  origin: Offset(50, 50)
                              )
                              .matrix4,
                          ),
                        ),
                      )
                    ],
                  ),
                )
              );
            });
          },
        )
    );
  }
}

Any guidance on the best way to accomplish this would be appreciated.

Solution

Add transformAlignment: FractionalOffset.center to the AnimatedContainer.

Answered By - TheUltimateOptimist