Flutter iOS构建成功但模拟器显示空白屏问题求助

问题描述 #

• Android平台运行完全正常
• 配置Mac环境后，iOS版本可安装到模拟器，但启动加载后显示空白屏
• Xcode日志：

2022-09-16 10:04:30.401305-0700 Runner[35230:248996] Metal API Validation Enabled
2022-09-16 10:04:30.516910-0700 Runner[35230:248996] GrMtlCommandBuffer: WARNING: Creating MTLCommandBuffer while in background.
2022-09-16 10:04:30.518412-0700 Runner[35230:248996] GrMtlCommandBuffer: WARNING: Creating MTLCommandBuffer while in background.
2022-09-16 10:04:30.577497-0700 Runner[35230:249203] flutter: The Dart VM service is listening on http://127.0.0.1:61436/iHZJYa2Yv5g=/
2022-09-16 10:05:06.096822-0700 Runner[35230:249183] [boringssl] boringssl_metrics_log_metric_block_invoke(153) Failed to log metrics

• 显示效果：
  

排查与解决步骤 #

1. 检查iOS Runner配置

   • 打开ios/Runner/Info.plist，若App需网络请求，确认已添加网络权限：

     <key>NSAppTransportSecurity</key>
     <dict>
         <key>NSAllowsArbitraryLoads</key>
         <true/>
     </dict>
     

   • 确认CFBundleDisplayName、CFBundleIdentifier配置无特殊字符。

2. 清理缓存重建项目

   • 执行Flutter清理命令：

     flutter clean
     flutter pub get
     

   • 进入iOS目录清理Pod缓存：

     cd ios
     pod deintegrate
     pod install
     

   • 关闭Xcode，删除ios/Runner.xcworkspace和ios/Pods文件夹后重新执行pod install。

3. 适配模拟器与Flutter版本

   • 切换到Flutter稳定版，执行flutter upgrade更新至最新稳定版本。
   • 更换模拟器的iOS版本测试（如从iOS 16切换到iOS 15），规避新版本模拟器的渲染兼容问题。

4. 排查代码平台差异

   • 检查代码中是否存在仅针对Android的逻辑判断，导致iOS端未初始化UI：

     if (Platform.isAndroid) {
       // 仅Android执行的逻辑，需补充iOS端对应实现
     }
     

   • 启动Flutter DevTools查看Widget树，确认是否有Widget未正确加载。

5. 处理Metal渲染警告

   • 在ios/Runner/AppDelegate.swift中添加代码禁用Metal，解决后台创建命令缓冲区的警告：

     import Flutter
     import UIKit
     
     @UIApplicationMain
     @objc class AppDelegate: FlutterAppDelegate {
       override func application(
         _ application: UIApplication,
         didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
       ) -> Bool {
         FlutterViewController.setEnableMetal(false)
         GeneratedPluginRegistrant.register(with: self)
         return super.application(application, didFinishLaunchingWithOptions: launchOptions)
       }
     }
     

内容的提问来源于stack exchange，提问作者Michael Ogundipe