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

I want to invert "icon: Icon(Icons.xxx)" in Flutter

I want to invert "icon: Icon(Icons.xxx)" in Flutter.
TopRight and bottmoLeft.

                 //TopLeft
                  Transform.rotate(
                    angle: 180 * pi / 180,
                    child: IconButton(
                        onPressed: () {
                          setState(() {});
                        },
                        icon: Icon(Icons.branding_watermark)),
                  ),
                  //TopRight
                  IconButton(
                      onPressed: () {
                        setState(() {});
                      },
                      icon: Icon(Icons.branding_watermark)),
                  //bottomLeft
                  IconButton(
                      onPressed: () {
                        setState(() {});
                      },
                      icon: Icon(Icons.branding_watermark)),
                  //bottomRight
                  IconButton(
                      onPressed: () {
                        setState(() {});
                      },
                      icon: Icon(Icons.branding_watermark)),

i did try matrix4 , but I can not set it .
enter image description here

Tags:

5

Answers


  1. 0

    That should be what you ask:

             Transform.rotate(
            angle: pi,
            child: IconButton(
                onPressed: () {
                  setState(() {});
                },
                icon: Icon(Icons.branding_watermark)),
          ),
          //TopRight
          Transform.rotate(
            angle: -pi / 2,
            child: IconButton(
                onPressed: () {
                  setState(() {});
                },
                icon: Icon(Icons.branding_watermark)),
          ),
          //bottomLeft
          Transform.rotate(
            angle: pi / 2,
            child: IconButton(
                onPressed: () {
                  setState(() {});
                },
                icon: Icon(Icons.branding_watermark)),
          ),
          //bottomRight
          IconButton(
              onPressed: () {
                setState(() {});
              },
              icon: Icon(Icons.branding_watermark)),

    This is the result when I execute on dartpad:
    enter image description here

    Login or Signup to reply.
  2. 0

    You could use scale instead of rotate:

    //TopRight
Transform.scale(
  scaleX: -1,
  scaleY: 1,
  child: IconButton(
      onPressed: () {
        setState(() {});
      },
      icon: Icon(Icons.branding_watermark)),
),

    By making scaleX negative, you can flip it over horizontally, and by making scaleY negative, you can flip it over vertically.

    Login or Signup to reply.
  3. 0

    This can be done by using two transforms:
    enter image description here

         Transform(
            transform:Matrix4.rotationX(math.pi),
            alignment: Alignment.center,
            child: Transform(
                          alignment: Alignment.center,
                           transform: Matrix4.rotationY(math.pi),
                           child: Icon(Icons.rotate_left, size: 100,),
                   ),
       ),
    Login or Signup to reply.
  4. 0

    Use the transform widget instead because it has more advanced property like matrix rotation.

    Top right : –

    Transform(
transform: Matrix4.rotationX(pi), // Invert Y-axis
alignment: Alignment.center,
child: IconButton(
    onPressed: () {
      setState(() {});
    },
    icon: const Icon(Icons.branding_watermark)),
),

    Output : –

    enter image description here

    Bottom left : –

    Transform(
transform: Matrix4.rotationY(pi), // Invert Y-axis
alignment: Alignment.center,
child: IconButton(
    onPressed: () {
      setState(() {});
    },
    icon: const Icon(Icons.branding_watermark)),
),

    Output : –

    enter image description here

    Login or Signup to reply.
  5. 0

    The 2 remaining button:

                IconButton(
                onPressed: () {},
                icon: Transform(
                    alignment: Alignment.center,
                    transform: Matrix4.rotationY(pi),
                    child: Icon(Icons.branding_watermark))),
            IconButton(
                onPressed: () {},
                icon: Transform(
                    alignment: Alignment.center,
                    transform: Matrix4.rotationY(math.pi)..rotateZ(pi),
                    child: Icon(Icons.branding_watermark))),

    Result

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

Back To Top
Search