Привет, коллеги-разработчики Flutter! Сегодня давайте углубимся в распространенную проблему, с которой вы можете столкнуться при создании приложения Flutter: надоедливый баннер «Material App debugShowCheckedModeBanner», который появляется в правом верхнем углу экрана вашего приложения. Но не волнуйтесь, потому что я вас прикрою! В этой статье мы рассмотрим различные способы удаления этого баннера и придания вашему приложению чистого и профессионального вида.

Прежде чем мы начнем, позвольте мне объяснить, что на самом деле представляет собой «Material App debugShowCheckedModeBanner». Это функция отладки, включенная в структуру Material Design Flutter, которая отображает красный баннер со словом «Отладка», когда ваше приложение работает в режиме отладки. Этот баннер полезен во время разработки, но не очень хорошо смотрится в производстве. Итак, давайте избавимся от этого!

Метод 1: установите для debugShowCheckedModeBanner значение false в виджете MaterialApp

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      // Your app code goes here
    ),
  );
}

Это самый простой метод. Если в виджете MaterialAppустановить для свойства debugShowCheckedModeBannerзначение false, баннер исчезнет.

Метод 2: используйте условный оператор

void main() {
  bool debug = false;
  assert(() {
    debug = true;
    return true;
  }());

  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: debug,
      // Your app code goes here
    ),
  );
}

Этот метод использует условный оператор для динамической установки свойства debugShowCheckedModeBannerв зависимости от того, работает ли приложение в режиме отладки или нет.

Метод 3. Создайте собственный виджет MaterialApp

class MyApp extends MaterialApp {
  @override
  Widget build(BuildContext context) {
    return super.build(context);
  }
  @override
  bool get debugShowCheckedModeBanner => false;
}
void main() {
  runApp(MyApp());
}

В этом методе мы создаем собственный виджет MyApp, который расширяет MaterialAppи переопределяет свойство debugShowCheckedModeBanner, чтобы возвращать falseпо умолчанию.

Метод 4. Использование конструктора MaterialApp

void main() {
  runApp(
    MaterialApp(
      builder: (BuildContext context, Widget? child) {
        return Directionality(
          textDirection: TextDirection.ltr,
          child: MediaQuery(
            data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
            child: child!,
          ),
        );
      },
      debugShowCheckedModeBanner: false,
      // Your app code goes here
    ),
  );
}

Здесь мы используем свойство builderMaterialApp, чтобы обернуть наше приложение пользовательскими виджетами. Установив для debugShowCheckedModeBannerзначение false, мы достигаем желаемого результата.

Метод 5. Использование переменной среды

void main() {
  final bool showBanner = bool.fromEnvironment('SHOW_BANNER', defaultValue: true);

  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: showBanner,
      // Your app code goes here
    ),
  );
}

Этот метод использует переменную среды (SHOW_BANNER) для управления видимостью баннера. Установите для переменной значение trueили falseв зависимости от ваших потребностей.

Метод 6: упаковка MaterialApp с помощью виджета RemoveBanner

class RemoveBanner extends StatelessWidget {
  final Widget child;
  RemoveBanner({required this.child});
  @override
  Widget build(BuildContext context) {
    return Banner(
      child: child,
      location: BannerLocation.topEnd,
      message: 'DEBUG',
      textDirection: TextDirection.ltr,
      layoutDirection: TextDirection.ltr,
      color: Colors.red,
    );
  }
}
void main() {
  runApp(
    RemoveBanner(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        // Your app code goes here
      ),
    ),
  );
}

Этот метод оборачивает виджет MaterialAppпользовательским виджетом RemoveBanner, который отображает пустой баннер, фактически удаляя исходный.

Метод 7: использование конфигурации флаттера
Если вы используете флаворицы в своем приложении Flutter, вы можете настроить разные параметры для каждого флаворита. Если для рабочей версии установить значение debugShowCheckedModeBannerна false, баннер будет удален.
Для получения дополнительной информации о вариантах Flutter ознакомьтесь с официальной документацией.

Метод 8: редактирование сгенерированного манифеста Android
Если вы создаете версию для Android, вы можете вручную отредактировать сгенерированный файл манифеста Android (AndroidManifest.xml) и установить android:debuggableатрибут false. Баннер отладки будет удален из вашего приложения.

Метод 9: редактирование сгенерированного iOS Info.plist
Для приложений iOS вы можете отредактировать сгенерированный файл Info.plistи добавить ключ FlutterDebugAllowBannerсо значением false. Это скроет баннер отладки в вашем приложении iOS.

Метод 10: использование условной компиляции

void main() {
  const bool isDebug = bool.fromEnvironment('dart.vm.product') == false;

  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: isDebug,
      // Your app code goes here
    ),
  );
}

Этот метод использует условную компиляцию, чтобы проверить, работает ли приложение в режиме отладки. Установив debugShowCheckedModeBannerв зависимости от результата, вы можете контролировать видимость баннера.

Вот и все! Теперь у вас есть десять различных способов удалить «Material App debugShowCheckedModeBanner» в вашем приложении Flutter. Выберите тот, который соответствует вашим потребностям, и попрощайтесь с этим баннером отладки!

Надеюсь, эта статья оказалась для вас полезной. Приятного кодирования!