Flutter Android：使用键盘/控制器时屏幕彩色边框如何移除？

复现步骤 #

• 在Android Studio中创建新的Flutter项目
• 运行该项目
• 若在Android模拟器运行，按下PC键盘任意按键（如下方向键或B键）；若在移动设备运行，连接任意控制器并按下按键或方向键；电视设备可使用dpad

此时屏幕周围会出现彩色边框。尝试更换Activity主题，但部分主题会导致全屏覆盖，请问该如何移除这个彩色边框？

环境信息 #

[✓] Flutter (Channel stable, 3.7.6, on macOS 13.0.1 22A400 darwin-x64, locale en-EE)
    • Flutter version 3.7.6 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 12cb4eb7a0 (4 days ago), 2023-03-01 10:29:26 -0800
    • Engine revision ada363ee93
    • Dart version 2.19.3
    • DevTools version 2.20.1

问题展示 #

• 截图：
• 演示视频：

解决方法 #

这个彩色边框是Android系统的导航焦点高亮框，专为外接控制器/电视用户提供焦点反馈，以下是几种无副作用的移除方式：

方法1：Flutter代码全局禁用焦点高亮 #

在MaterialApp中通过自定义主题隐藏焦点相关的高亮样式：

MaterialApp(
  theme: ThemeData(
    highlightColor: Colors.transparent,
    splashColor: Colors.transparent,
    focusColor: Colors.transparent,
  ),
  home: YourHomePage(),
)

方法2：修改Android原生配置（推荐） #

直接在Android主题配置中关闭焦点触发，不会影响全屏显示：

1. 打开android/app/src/main/res/values/styles.xml
2. 在当前使用的App主题内添加以下属性：

<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <!-- 移除焦点边框 -->
    <item name="android:focusable">false</item>
    <item name="android:focusableInTouchMode">false</item>
</style>

不管你用的是Theme.Material.Light.NoActionBar还是其他主题，直接在对应主题节点里加这两行即可，无需更换主题。

方法3：TV设备专属处理 #

如果是Android TV项目，可直接在AndroidManifest.xml的Activity标签中配置：

<activity
    android:name=".MainActivity"
    ...
    android:focusable="false"
    android:focusableInTouchMode="false">

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