Flutter Question posted in
The official Flutter documentation can be found here.

Flutter 3.19 – rotate button, is there a better way to code in 2024?

I just have started learning flutter for about 2 weeks, but most of the time i don’t like the standart design styles that flutter’s widgets provide to us, so…..

I needed to create a cart button filled with black color that includes an icon(image) and than rotate button on 45 angle, but icon have to stay as normal.*

Example Image of rotated IconButton

So i came up with this solution:

Column(
  children: [
    Transform.rotate(
      angle: 45 * pi / 180,
      child: IconButton(
        onPressed: () {},
        padding: EdgeInsets.all(25),
        style: IconButton.styleFrom(
          elevation: 0,
          backgroundColor: Colors.black,
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
        ),
        icon: Transform.rotate(
          angle: -45 * pi / 180,
          child: Image.asset(
            'assets/icons/shopping-cart.png',
            color: Colors.white,
            width: 22,
          ),
        ),
      ),
    ),
  ],
),

**The question is:
Changed//

New: Is there is a better way to do it?**

So basically if i dont add a -45 angle to the icon(image), they would turn together.

Tags:

2

Answers


  1. 0

    Another way to rotate button

    RotationTransition(
                turns: AlwaysStoppedAnimation(0.12),
                child: InkWell(
                  onTap: (){},
                  child: Container(
                    width: 100,
                    height: 100,
                    child: RotationTransition(
                        turns: AlwaysStoppedAnimation(-0.12),
                        child: Center(
                            child: Icon(
                          Icons.add_shopping_cart,
                          color: Colors.white,
                        ))),
                    decoration: BoxDecoration(color: Colors.black, borderRadius: BorderRadius.circular(25)),
                  ),
                ),
              ),
    Login or Signup to reply.
  2. 0

    You may try this:

     class RotatedCartButton extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Transform.rotate(
          angle: 45 * 3.1415927 / 180, // Rotate the button by 45 degrees
          child: Container(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Align(
              alignment: Alignment.center,
              child: Transform.rotate(
                angle: -45 * 3.1415927 / 180, // Rotate the icon back by -45 degrees
                child: Icon(
                  Icons.shopping_cart,
                  color: Colors.white,
                  size: 30,
                ),
              ),
            ),
          ),
        );
      }
    }

    It will give you result like this:
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search