Flutter Android应用本地化应用名称意外显示在应用内顶部深色栏

你看到的这个顶部深色栏是Android原生的ActionBar（或新版Toolbar），默认会显示应用名称并占据顶部空间，导致Flutter内容从它下方开始布局。下面是几种实用的解决方式：

方法1：修改Android主题隐藏ActionBar #

• 打开Android项目目录下的android/app/src/main/res/values/styles.xml文件
• 找到当前应用使用的主题（通常是Theme.AppCompat.Light.DarkActionBar这类）
• 将主题父类替换为不含ActionBar的版本，示例如下：

  <!-- 替换前 -->
  <style name="LaunchTheme" parent="Theme.AppCompat.Light.DarkActionBar">
      <!-- 原有配置代码 -->
  </style>
  
  <!-- 替换后 -->
  <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <!-- 保留原有配置代码 -->
  </style>
  

• 同步修改values-ar目录下的styles.xml，保证阿拉伯语环境下效果一致

方法2：在AndroidManifest.xml中指定全屏主题 #

直接在<activity>标签里设置全屏无标题的主题：

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
    <!-- 其他已有的属性 -->
>

这种方式会让应用完全全屏，顶部栏和状态栏都会被隐藏。

方法3：通过Flutter代码动态控制 #

如果想在Flutter层面灵活控制显示/隐藏，可以用flutter/services包里的SystemChrome：
在main.dart的main函数里添加以下代码（要放在runApp之前）：

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 隐藏状态栏和顶部原生栏
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  
  // 要是只想隐藏顶部栏、保留状态栏，用下面这段：
  // SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  //   statusBarColor: Colors.transparent,
  // ));
  
  runApp(const MyApp());
}

如果只是想去掉顶部的ActionBar，优先选方法1；需要完全全屏就用方法2；要动态控制的话选方法3。

内容的提问来源于stack exchange，提问作者Rezuanul Islam Fahim