Flutter Windows桌面端调试正常 Release打包后出现UI异常

问题表现 #

Flutter Windows桌面应用在开发PC的Debug模式下可正常运行，导出Release发布版本后出现UI显示异常：

• 预期效果：
  
• 初始页面异常状态：
  
• 向下滚动后内容显示但侧边栏消失：
  

环境信息 #

执行flutter doctor -v的输出结果如下：

[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.22000.739], locale en-US)
    • Flutter version 3.0.1 at C:\flutter\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (7 weeks ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • DevTools version 2.12.2

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Users\Ahmad Alshohan\AppData\Local\Android\sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.4)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.2.32602.215
    • Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[√] VS Code (version 1.68.1)
    • VS Code at C:\Users\Ahmad Alshohan\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.42.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22000.739]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 103.0.5060.114
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 103.0.1264.49

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

问题原因与解决方法 #

该问题是Flutter 3.0.1版本Windows桌面端Release编译模式下的Skia渲染重绘边界计算bug导致：Debug模式下存在调试校验、JIT编译逻辑，不会触发全量渲染优化，因此无法复现问题；Release模式采用AOT编译，开启了全量渲染优化，就会出现组件重绘时丢失的情况。
可按以下优先级处理：

• 升级Flutter稳定版到3.0.5及以上版本，该渲染bug已经在后续小版本迭代中官方修复，执行命令：

  flutter upgrade
  

  升级完成后重新编译Release版本即可。
• 若暂时无法升级Flutter版本，编译Release版本时添加参数关闭对应渲染优化，可临时规避问题：

  flutter build windows --release --dart-define=FLUTTER_WEB_USE_SKIA=false
  

• 代码层面检查：如果滚动容器内嵌套了侧边栏组件，给侧边栏添加固定宽度约束，并用RepaintBoundary组件包裹侧边栏，手动指定重绘边界，避免滚动时全局重绘计算异常。

内容的提问来源于stack exchange，提问作者Ahmad Alshohan