如何移除Flutter构建的渐进式Web应用（PWA）顶部栏？

问题场景 #

用Flutter开发Web应用，通过Chrome安装为Mac上的PWA后，出现默认浅蓝色顶部栏，显示“Your ally for tele-rehabilitation - AllyCare”及右上角菜单，需移除该顶部栏。

页面核心代码（自定义顶部栏）：

CustomScrollView(
  physics: const BouncingScrollPhysics(),
  slivers: [
    // Top Appbar
    if (controller.showHomeAppbar) ...[
      SliverAppBar(
        toolbarHeight: 60,
        collapsedHeight: 60,
        flexibleSpace: FlexibleSpaceBar(
          background: Align(
            alignment: Alignment.topCenter,
            child: SizedBox(
              width: Responsive.isTablet(context) ? Get.width : 654,
              child: AssessmentHomeAppbar(
                username: controller.name.value,
              ),
            ),
          ),
        ),
        expandedHeight: appbarHeight,
        backgroundColor: Colors.transparent,
      ),
    ],

    // Body
    SliverToBoxAdapter(
      child: Align(
        alignment: Alignment.topCenter,
        child: SizedBox(
          width: Responsive.isTablet(context) ? Get.width : 654,
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: Get.height - appbarHeight,
            ),
            child: DecoratedBox(
              decoration: const BoxDecoration(
                color: AppColors.whiteColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(28),
                  topRight: Radius.circular(28),
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 20),

                  // Assessments Section
                  if (controller.assessmentList.isNotEmpty) ...[
                    AssessmentsSection(
                      assessmentList: controller.assessmentList,
                      assessmentInHomeTab:
                          controller.assessmentInHomeTab,
                      isFromDeepLink: isComingFromDeepLink,
                    ),
                  ],

                  // Personalised Plan Section
                  if (controller.exerciseProgramModel != null) ...[
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 24),
                      child: ResponsiveText(
                        AppText.yourPersonalisedPlan.tr,
                        style: const TextStyle(
                          fontSize: 14,
                          color: AppColors.secondaryColor,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                    const SizedBox(height: 6),
                    PersonalisedPlanBox(
                      pendingSessions: controller.pendingSessions,
                      exerciseProgramModel:
                          controller.exerciseProgramModel!,
                      completedSessions:
                          controller.completedSession,
                      isComingFromLogin: isComingFromLogin,
                      onTap: () {
                        if (!controller.newDataLoaded) {
                          showSnackBar(context);
                          return;
                        }
                        controller.checkForResume(
                          isPlanExpired: controller.isPlanExpired,
                          sessionNumber:
                              controller.completedSession + 1,
                          context: context,
                          fromLogin: isComingFromLogin,
                        );
                      },
                    ),
                    const SizedBox(height: 15),
                  ],
                ],
              ),
            ),
          ),
        ),
      ),
    )
  ],
),

注：AssessmentHomeAppbar组件仅包含问候语、视频预约卡片及排行榜卡片

当前使用的manifest.json：

{
    "short_name": "AllyCare",
    "name": "Your ally for tele-rehabilitation",
    "icons": [
        {
            "src": "Logo-08.png",
            "type": "image/png",
            "sizes": "144x144"
        }
    ],
    "start_url": ".",
    "display": "fullscreen",
    "theme_color": "#000000",
    "background_color": "#ffffff",
    "description": "A new Flutter project.",
    "orientation": "portrait-primary",
    "prefer_related_applications": false
}

解决方案 #

1. 调整manifest.json的显示模式 #

默认顶部栏是Chrome PWA的系统标题栏，需确保manifest配置让应用以独立全屏模式运行：

• 修改display属性为"standalone"，或添加display_override明确指定优先模式：

{
    // ... 其他原有配置
    "display": "standalone",
    "display_override": ["fullscreen", "standalone"],
    // ... 其他原有配置
}

standalone模式会让PWA像原生应用一样运行，隐藏浏览器的标题栏和地址栏；display_override则确保浏览器优先使用指定的显示模式。

2. 补充Web端meta标签 #

在web/index.html的<head>中添加以下meta标签，强化PWA的独立运行标识：

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

这些标签会告诉浏览器（包括Chrome和Safari）该应用是可独立运行的Web应用，并且隐藏系统状态栏/标题栏。

3. 重新安装PWA #

修改配置后，先在Chrome中移除已安装的PWA，然后重新访问Web应用，再次安装为PWA，确保新的manifest配置生效。

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