Flutter应用在iOS模拟器与真机运行均显示黑屏如何解决

截图：应用在Android端可正常显示，iOS端无法正常显示

问题描述 #

执行flutter run -d all运行应用时，Android端表现正常，iOS端无论模拟器还是真机均出现黑屏问题。
已经尝试过执行flutter build ios --release构建release包，同时将Xcode中的构建配置修改为release模式，问题没有解决。

执行flutter -v doctor的环境检查输出如下：

[✓] Flutter (Channel beta, 3.1.0-9.0.pre, on macOS 12.4 21F79 darwin-x64, locale en-DE)
    • Flutter version 3.1.0-9.0.pre at /usr/local/Caskroom/flutter/1.22.6/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f28e570c8c (4 weeks ago), 2022-06-14 13:39:33 -0500
    • Engine revision 74ee6b5afd
    • Dart version 2.18.0 (build 2.18.0-165.1.beta)
    • DevTools version 2.14.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc2)
    • Android SDK at /Users/gabriel/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc2
    • ANDROID_HOME = /Users/gabriel/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin、Dart plugin已安装
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin、Dart plugin已安装

[✓] VS Code (version 1.68.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (2 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554                        • android-x64 • Android 12 (API 31) (emulator)
    • iPhone 11 Pro Max (mobile)   • 8BEFDB1F-BB68-4E25-BBAB-B97FF978C1BE • ios         •
      com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)

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

• No issues found!

解决步骤 #

从环境信息看，当前使用的是2022年6月发布的Flutter 3.1.0-9.0.pre beta预览版，该版本存在iOS端Metal渲染初始化失败导致黑屏的已知bug，按以下顺序操作即可修复：

• 切换到Flutter稳定分支
  执行命令切换渠道并更新到正式稳定版：

  flutter channel stable
  flutter upgrade
  

• 全量清理构建缓存
  在项目根目录执行以下命令，清理所有旧构建产物和依赖缓存：

  flutter clean
  flutter pub get
  cd ios
  rm -rf Pods Podfile.lock Runner.xcworkspace
  pod install --repo-update
  cd ..
  

• 校验配置后单独启动iOS端
  打开ios/Runner/Info.plist文件，在根<dict>节点下确认存在如下配置，不存在则直接补上：

  <key>io.flutter.embedded_views_preview</key>
  <true/>
  

  配置完成后不要用flutter run -d all同时启动多端，单独指定iOS设备启动：flutter run -d 你的iOS设备ID。

如果切换稳定版后仍偶现黑屏，直接打开iOS目录下的Runner.xcworkspace，在Xcode中执行Product > Clean Build Folder后重新运行即可。
生产环境不要使用Flutter beta/dev渠道版本，这类预览版本未经过全平台兼容测试，很容易出现平台专属的渲染、兼容bug。

内容的提问来源于stack exchange，提问作者Gabriel Marchesan Almeida