I use Flutter Transform widget to rotate other widgets on Y axis. I am testing on Android SDK 31.

My expectation is that setting the rotation angle to 180 degrees would give me a completely "flipped" image, like a mirror image of itself. However, when I use 180 in rotateY the image is not rotated fully. Using a value of 160 actually looks better.

Am I using these values incorrectly, or is there a bug in Transform? My high school geometry is a bit fuzzy, so it is quite possible I misunderstood how this is supposed to work.

To reproduce use this code snippet in you Flutter project:

    Transform(
                alignment: FractionalOffset.center,
                transform: Matrix4(
                  1,0,0,0,
                  0,1,0,0,
                  0,0,1,0,
                  0,0,0,1,
                )..rotateY(180),
                child: Image.network(
                    'https://clipground.com/images/demo-clip-art-14.jpg')),
          ],

Fully reproducible code below (just paste it into new Flutter project main.dart):

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Flip Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _flip = false;

  void _flipImage() {
    setState(() {
      _flip = !_flip;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Transform(
                alignment: FractionalOffset.center,
                transform: Matrix4(
                  1,0,0,0,
                  0,1,0,0,
                  0,0,1,0,
                  0,0,0,1,
                )..rotateY(_flip ? 180 : 0),
                child: Image.network(
                    'https://clipground.com/images/demo-clip-art-14.jpg')),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _flipImage,
        tooltip: 'Flip',
        child: const Icon(Icons.flip_camera_android),
      ),
    );
  }
}

CodePudding user response：

just need to use pi instead of 180

import 'dart:math';


    ..rotateY(_flip ? 0 : pi),