CODEWITHSUNDEEP
flutterdart
shinyatk
shinyatk

Reputation: 1065

Using for loop to create nested widget in Flutter

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),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Upvotes: 0

Views: 264

Answers (2)

JRamos29
JRamos29

Reputation: 890

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);
    }

Upvotes: 2

josxha
josxha

Reputation: 1227

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?

Upvotes: 1

Related Questions