Android部分设备AppBar出现未知叠加文本，仅点击底部主页按钮触发

问题背景 #

我正在开发一款Flutter移动应用，使用Scaffold展示AppBar标题，但近期发现部分Android设备上，AppBar上方会出现来源未知的文本——正常效果为AppBar仅显示自定义标题，无额外内容；异常效果为AppBar上方多出一段文本，且该文本仅在点击底部导航栏的主页按钮时才会出现。该问题无法在其他设备或模拟器上复现，且代码中未添加过这段文本。

问题根源 #

这是部分Android定制ROM（如小米、vivo、OPPO等厂商的系统）的专属特性，当点击底部导航栏主页按钮时，系统会自动在AppBar上方注入应用的标签/名称文本，并非你的Flutter代码问题。

解决办法 #

• 调整AndroidManifest.xml的应用标签
  检查项目中android/app/src/main/AndroidManifest.xml里的android:label字段，如果该字段值和出现的未知文本一致，说明系统在特定场景下展示了这个全局标签。可以在Activity级别单独设置空标签来覆盖：

  <application
      android:label="@string/app_name"
      ...>
      <activity
          android:name=".MainActivity"
          android:label="" <!-- 设为空，避免系统展示 -->
          android:exported="true"
          ...>
          <intent-filter>
              <action android:name="android.intent.action.MAIN"/>
              <category android:name="android.intent.category.LAUNCHER"/>
          </intent-filter>
      </activity>
  </application>
  

• 设置系统UI可见性
  在Flutter页面的初始化方法中，强制调整系统UI样式，隐藏可能的系统注入元素：

  import 'package:flutter/services.dart';
  
  @override
  void initState() {
    super.initState();
    // 启用edge-to-edge模式，让页面内容延伸到状态栏
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    // 透明状态栏，避免系统文本叠加
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    ));
  }
  

• 让AppBar延伸覆盖状态栏
  使用Scaffold的extendBodyBehindAppBar属性，让AppBar覆盖状态栏区域，从而遮挡系统注入的文本：

  Scaffold(
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      backgroundColor: Colors.white.withOpacity(0.95), // 半透明或纯色覆盖状态栏
      title: const Text('主页'),
      elevation: 0,
    ),
    body: Container(
      padding: const EdgeInsets.only(top: kToolbarHeight + 20), // 给内容加顶部内边距避免被AppBar遮挡
      child: ...,
    ),
  )
  

• 排查第三方依赖
  临时移除导航、状态管理类第三方库（如go_router、flutter_bloc等），验证问题是否消失，排除依赖库意外添加UI元素的可能。

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