[BUG?] Flip effect is broken with Impeller

[timlogemann]

When you run the example app in this repository with the flag --enable-impeller the flip animation is broken and instead looks more like an invisible curtain closing on top of the card.
I'm not too familiar with the transform matrices, so it might very well be that this is a bug in Impeller, in which case it would be best if either one of us would open a new issue on the flutter repo. I just wanted to confirm that is not a bug that should be fixed on this side of the repo, for example updating the transforms to something else.

Expected Behavior

The animation should work the same as with the Skia renderer

Current Behavior

The animation is broken, looking like an invisible curtain closing on top of the card rather than the card flipping over.

Possible Solution

Like I said, maybe some fixes to the transforms, or creating an issue for this on the flutter/impeller source repository about this.

Steps to Reproduce

1. Clone this project
2. Go into the example project
3. Run it on an iOS simulator with impeller enabled: flutter run --enable-impeller
4. Tap on the card to view the effect.

Detailed Description

Possible Implementation

[brim-borium]

Hi :) I could observe the same behavior here

[pattersonjack]

We are also observing glitches when running Impeller on both real and emulated devices. While the cards themselves seem to animate correctly, there is a large additional white box that flickers on top of any content under the card. Impeller is also now the default renderer (as of Flutter 3.10) for iOS, and will soon be for Android as well.

[MrHazee]

I've had a similar experience. In my case, it draws a dark line with variable length at the center of the card when flipped.

[MrHazee]

Any updates on this?

[x1d3veloper]

same issue on physical or emulated IOS device. App crash without particular flutter log. I made a test creating a custom widget

class CommonFlipCard extends StatefulWidget {
  final Widget front;
  final Widget back;

  const CommonFlipCard({super.key, required this.front, required this.back});

  @override
  CommonFlipCardState createState() => CommonFlipCardState();
}

class CommonFlipCardState extends State<CommonFlipCard>
    with SingleTickerProviderStateMixin {
  bool _isFront = true;
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);

    _controller.addListener(() {
      if (_controller.value >= 0.5) {
        if (_isFront) {
          setState(() {
            _isFront = false;
          });
        }
      } else {
        if (!_isFront) {
          setState(() {
            _isFront = true;
          });
        }
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _flip() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else if (_controller.status == AnimationStatus.dismissed) {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _flip,
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform(
            alignment: Alignment.center,
            transform: Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateY(_animation.value * 3.1416),
            child: _isFront ? widget.front : widget.back,
          );
        },
      ),
    );
  }
}

On android works good but not on ios both real and simulator device. Crash without flutter log, only "lost connection to device. Exited."