Using for loop to create nested widget in Flutter

Question

Hi I'm pretty new to Flutter and have an issue of multi-nesting code of Flutter when I'm creating rotate animation. Since it's pretty repetitive, I'm trying to make it shorter with using for loop but no luck for now. Also tried to use nested library but not work. Does anybody know how? Thank you in advance.

Widget _rotateAnimationWidget(BuildContext context, Widget child) {
  return SizedBox(
    height: 200,
    width: 200,
    child: Transform.rotate(
      angle: 10 * math.pi / 180,
      child: Transform.rotate(
        angle: 20 * math.pi / 180,
        child: Transform.rotate(
          angle: 10 * math.pi / 180,
          child: Transform.rotate(
            angle: -30 * math.pi / 180,
            child: Transform.rotate(
              angle: 0 * math.pi / 180,
              child: Transform.rotate(
                angle: 20 * math.pi / 180,
                child: Transform.rotate(
                  angle: -30 * math.pi / 180,
                  child: Transform.rotate(
                    angle: 40 * math.pi / 180,
                    child: Transform.rotate(
                      angle: 10 * math.pi / 180,
                      child: Transform.rotate(
                        angle: 10 * math.pi / 180,
                        child: Transform.rotate(
                            angle: 30 * math.pi / 180,
                            child: child),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

what are you trying to achieve with this nested transforms? just to be sure because nesting them won't actually animate the child — EdwynZN, Jun 27 '20 at 02:12

JRamos29 · Accepted Answer · 2020-06-27T02:50:30.010

2

Well, I don't know what you want to achieve, but you can try something like the code bellow. If you check in the Flutter Inspector you will see the nested Transform. But for me isn't showing nothing in the simulator.

UPDATE: Sorry, is showing the container i passed as child rotated. I forgot the SizedBox. But isn't animated.

Widget _rotateAnimationWidget(BuildContext context, Widget child) {
    List<int> angleList = [10, 20, 10, -30, 0, 20, -30, 40, 10, 10, 30];
    Widget transform;
    int i = 0;

    do {
      transform = Transform.rotate(
          angle: angleList[i] * math.pi / 180, child: transform);
      i++;
    } while (i < angleList.length - 1);

    transform =
        Transform.rotate(angle: angleList.last * math.pi / 180, child: child);

    return SizedBox(height: 200, width: 200, child: transform);
    }

edited Jun 27 '20 at 02:50

answered Jun 27 '20 at 02:30

JRamos29

880
7
20

Thank you so much! I could not come up the part of `child: transform`. I appreciate it. – shinyatk Jun 27 '20 at 03:01
It's alright. But out of curiosity, how do you use this with animation? – JRamos29 Jun 27 '20 at 03:10
Sorry for lack explanation. I will rotate an image back and forth in specific angles in a duration. The value of angles will be replaced with correct ones which will be implement later. – shinyatk Jun 27 '20 at 03:27
1

Cool! Good to know that it's possible to chain animations in this way. =) – JRamos29 Jun 27 '20 at 03:38

score 1 · Answer 2 · answered Jun 27 '20 at 02:19

I'm not sure you really want to achieve that. Transform.rotate turns your child widget without any animation. I suppose you would like a rotation animation that goes back and forth?

Take a look at RotationTransition. There is also a sample animation of the flutter logo on that website, which is quite close to what you are trying to do.

To get some code you can start with, have a look at How to rotate an image using Flutter AnimationController and Transform?

Using for loop to create nested widget in Flutter

2 Answers2