Flutter中debugShowCheckedModeBanner设置无效，全页面仍显示调试横幅怎么办？

我尝试移除应用中的调试横幅，已在main.dart及所有页面添加debugShowCheckedModeBanner: false配置，但调试横幅仍在所有页面显示。

以下是main.dart代码：

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:intrackapp/login/splash_screen.dart';
import 'package:khalti_flutter/khalti_flutter.dart';
import 'login/firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp( MyApp());
}

class MyApp extends StatelessWidget {
  final usernameController = TextEditingController();
  final passwordController = TextEditingController();
  MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
     return KhaltiScope(
       publicKey: "test_public_key_6ddec90a98d44awe4d84e2c58fc172490a",
       builder: (context, navKey) {
         return MaterialApp(
          // debugShowCheckedModeBanner: false,
           navigatorKey: navKey,
           localizationsDelegates: const[KhaltiLocalizations.delegate],
           theme: ThemeData(
             primaryColor: Colors.grey, // Set default color to blue
           ),

               debugShowCheckedModeBanner: false,
               home: SplashScreen(),
         );
       }
     );
  }
}

核心问题是debugShowCheckedModeBanner: false无法移除调试横幅，该横幅在所有页面均可见，请问如何解决？

解决方案 #

• 排查重复的App实例
  如果项目中除了根MaterialApp，其他页面还单独创建了MaterialApp或CupertinoApp，这些独立实例会忽略根配置，需要在每个实例中都设置debugShowCheckedModeBanner: false。更规范的做法是只保留一个根MaterialApp，其他页面用Scaffold等组件嵌套，避免重复初始化App。

• 清理缓存并重启项目
  热重载/热重启可能导致配置未完全生效，执行以下步骤：

  1. 停止当前运行的项目
  2. 执行命令 flutter clean 清理缓存
  3. 重新运行项目 flutter run

• 检查第三方包的强制横幅
  部分第三方SDK（比如你使用的Khalti）可能会在调试模式下强制添加自身的调试横幅，优先查看其官方文档是否有关闭标识的配置项。如果没有，可以尝试以下临时方案：
  在根MaterialApp中通过Builder和MediaQuery移除顶部 padding，覆盖横幅位置：

  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Builder(
      builder: (context) {
        return MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: SplashScreen(),
        );
      },
    ),
  );
  

  或者在页面的initState中手动移除Overlay中的横幅组件：

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final overlay = Overlay.of(context);
      overlay?.context.findAncestorStateOfType<OverlayState>()?.removeWhere(
        (entry) => entry.widget is Banner,
      );
    });
  }
  

  注意：手动移除属于临时hack，优先排查第三方包的官方配置。

• 确认运行模式
  调试横幅仅在debug模式下显示，若直接运行release模式（flutter run --release），横幅会自动消失。如果是debug模式下仍显示，再按上述步骤排查。

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