Flutter web 渲染器（不是 CanvasKit）：嵌套 Y 轴旋转导致子部件消失

Question

While nesting two Transform widgets, child widget (IE a picture) is disappearing in some cases.

It happens with Animation and AnimatedBuilder as well.

Conditions for reproducing:

• Wide screen resolution only.
• Flutter Web with HTML web renderer only (Not Android nor Flutter Web with CanvasKit )
• Flutter 2.10.2

Minimal reproduce:

1. Create new folder flutter_web_bug

2. Open terminal inside that folder and execute flutter create.

3. Replace ./lib/main.dart contents with the following code

4. Open terminal and execute flutter run -d chrome --web-renderer html

    import 'dart:async'; import 'dart:math'; import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}): super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( title: 'Flutter web bug', home: MyHomePage(title: 'Flutter web bug'), ); } } 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> { double angle = 0.0; @override void initState() { super.initState(); Timer.periodic(const Duration(milliseconds: 20), (timer) { setState(() { angle += 0.01; }); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Transform( transform: Matrix4.identity()..setEntry(3, 2, 0.001)..rotateY(pi * angle), alignment: Alignment.center, child: Align( alignment: Alignment.center, child: Container( color: const Color(0xffaaffff), child: Transform( alignment: Alignment.center, transform: Matrix4.identity()..rotateY(pi), child: Image.network('https://docs.flutter.dev/assets/images/dash/dash-fainting.gif'))))), )); } }

Demonstration:

Answer 1

The issue seems to be with Image.network() where the image is rebuilding. I tested using the cached.network_image library and was able to get the image to stay rendered while animating. Hopefully this helps!