如何移除iOS主屏幕快捷方式打开的Flutter Web应用状态栏？

iOS上添加到主屏幕的Flutter Web PWA，状态栏控制逻辑和原生App不同，SystemChrome API在Web端对iOS支持有限，得结合Web配置和JS API来解决：

1. 修正index.html的PWA元标签 #

在web/index.html的<head>里补充或修改以下标签，确保PWA模式下的状态栏行为：

<!-- 启用独立PWA模式，隐藏Safari浏览器界面 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置状态栏为半透明黑色，允许内容延伸到状态栏下方 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 配置PWA图标和标题，确保系统识别为独立应用 -->
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<meta name="apple-mobile-web-app-title" content="Pantry">

2. 用Web全屏API替代SystemChrome #

Flutter的SystemChrome在iOS Web PWA中不生效，通过dart:js调用浏览器全屏API强制隐藏状态栏：

import 'dart:js' as js;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 调用浏览器全屏API，隐藏状态栏和导航栏
  js.context.callMethod('requestFullscreen', [js.context['document'].querySelector('body')]);
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

注：部分iOS版本要求全屏操作由用户交互触发，可在首次页面加载后的用户点击事件中调用该API，确保权限通过。

3. 调整布局适配状态栏 #

如果无法完全隐藏状态栏，用SafeArea控制内容是否避开状态栏区域：

// 在你的页面Widget（如MenuPages、LoginPage）中
@override
Widget build(BuildContext context) {
  return SafeArea(
    top: false, // 设为false让内容延伸到状态栏下方；设为true则避开状态栏
    child: Scaffold(
      // 页面内容
    ),
  );
}

4. 确认manifest.json配置正确 #

确保web/manifest.json中设置了独立显示模式，这是PWA正常运行的前提：

{
  "name": "Pantry",
  "short_name": "Pantry",
  "start_url": ".",
  "display": "standalone", // 关键：独立App模式
  "background_color": "#000000",
  "theme_color": "#41a6d9",
  "icons": [
    {
      "src": "icons/Icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

额外说明 #

iOS系统对PWA的全屏权限有严格限制，部分旧版本可能无法完全隐藏状态栏，这是系统级限制，只能通过上述方法优化显示效果。

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