このサイトはアドセンスやアフィリエイト広告を利用しています

Flutter&Dart

FlutterのDEBUG帯で見えない！消す方法デバックうざい！

Flutterアプリを開発している際、画面の右上にある赤い「DEBUG」の帯が気になったことはありませんか？今回は、この帯が何のためにあるのか、そしてどうすれば非表示にできるのかを解説します。

なぜ「DEBUG」帯が表示されるの？

この帯は、現在実行しているアプリがデバッグモードでビルドされていることを示しています。開発者がテストやデバッグを行うためのデバッグビルドと、ユーザーに公開するためのリリースビルドを区別するために、Flutter SDKが自動的に表示するものです。

デバッグビルドでは、ホットリロードやプロファイリングツールなど、開発に便利な機能が有効になっています。一方、リリースビルドではこれらの機能が無効になり、パフォーマンスが最適化されるため、この帯は自動的に非表示になります。

Android StudioやVS Code、そしてどのプラットフォームでも同じ？

はい、その通りです。この「DEBUG」帯は、特定の開発環境（Android StudioやVS Code）や特定のプラットフォーム（Windowsなど）だけで表示されるものではありません。Flutterは「Write once, run anywhere（一度書けば、どこでも動く）」という思想に基づいており、一つのコードベースからAndroid、iOS、Web、そしてデスクトップ（Windows、macOS、Linux）用のアプリケーションを生成します。

したがって、デバッグモードで実行する限り、どのプラットフォームでアプリを動かしても、この帯は同じように表示されます。

デバック表示でヘッダーメニューやアプリバーのアイコンが見えない！

実はこの帯、意外な落とし穴があります。

デバッグ帯の真後ろにUI要素を配置してしまうと、その要素が隠れてしまうことがあります。特に、ナビゲーションやツールバーの右上にアイコンを置いた際などに起こりがちです。

私も以前、デバッグ帯のせいでアイコンが見えず、「表示されていないのか？」と数分悩んでしまいました。カーソルを当ててみたらクリックできることに気づき、初めて「隠れていたんだ！」と分かりました。

このような「隠れたアイコン」問題も、デバッグ帯を非表示にすれば解決できます。

「DEBUG」帯を非表示にする方法

デバッグ中にこの帯を非表示にしたい場合は、MaterialAppウィジェットのプロパティを一つ変更するだけで簡単に設定できます。

debugShowCheckedModeBannerプロパティを設定する

MaterialAppウィジェットにdebugShowCheckedModeBanner: falseを追加してください。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // このプロパティをfalseに設定することで、デバッグ帯が非表示になります
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

この設定を行うと、デバッグモードで実行しても「DEBUG」帯が表示されなくなります。

まとめ

  • 「DEBUG」帯は、アプリがデバッグモードで実行されていることを示す。
  • リリースビルドでは自動的に非表示になる。
  • この帯は、どのプラットフォームや開発環境で実行しても同じように表示される。
  • デバッグ帯が原因で、背後のUI要素が隠れてしまうことがある。
  • デバッグ中に非表示にするには、MaterialAppウィジェットのdebugShowCheckedModeBannerプロパティをfalseに設定する。

デバッグ帯は開発者向けの便利な目印ですが、スクリーンショットを撮る際や、見栄えを気にしながら開発を進めたい時には非表示にすると良いでしょう。ぜひ、この方法を試してみてください。

-Flutter&Dart