CODEWITHSUNDEEP
flutterdart
xenos92
xenos92

Reputation: 361

Flutter: Matrix4 Off-center rotation during animated transition

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?

enter image description here

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.

Upvotes: 3

Views: 1409

Answers (3)

WSBT
WSBT

Reputation: 36333

If you only want to rotate it along the z-axis, a much easier way is to use the RotationTransition widget, check out this existing answer here.

3d cube

If you want to rotate along different axes, for example, making a 3D cube by rotating along x-axis and y-axis, you can check out this video tutorial here.

3d cube

Upvotes: 0

MohammedAli
MohammedAli

Reputation: 2519

i hope this one may be help you

enter image description here

this code for only one time rotate the box, but you will add conditions for your desire things

import 'dart:math';
import 'package:flutter/material.dart';

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

  @override
  State<TransformExample> createState() => _TransformExampleState();
}

class _TransformExampleState extends State<TransformExample>
    with TickerProviderStateMixin {
  late AnimationController animationController =
      AnimationController(vsync: this, duration: const Duration(seconds: 2));

  @override
  void dispose() {
    super.dispose();
    animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: InkWell(
          onTap: () => setState(() {
            animationController.forward();
          }),
          child: AnimatedBuilder(
              animation: animationController,
              child: Container(
                height: 150.0,
                width: 150.0,
                color: Colors.blueGrey,
              ),
              builder: (BuildContext context, Widget? child) {
                return Transform.rotate(
                  angle: animationController.value * 2.0 * pi,
                  child: child,
                );
              }),
        ),
      ),
    );
  }
}

Upvotes: 0

TheUltimateOptimist
TheUltimateOptimist

Reputation: 1219

Add transformAlignment: FractionalOffset.center to the AnimatedContainer.

Upvotes: 6

Related Questions