Flutterアプリでデバッグバーを非表示にする方法

Flutterアプリケーションのデバッグバーを非表示にする方法を説明します。この記事では、以下のバージョンを使用しています。

• Flutterバージョン: 3.22.2
• Dartバージョン: 3.4.3

デバッグバーの非表示方法

デバッグバーを非表示にするための最も簡単な方法は、MaterialApp（マテリアルアップ）またはCupertinoApp（クパティーノアップ）ウィジェットのdebugShowCheckedModeBannerプロパティをfalseに設定することです。このプロパティはデフォルトでtrueになっており、デバッグモードでアプリを実行するときにデバッグバーを表示します。

例：MaterialApp（マテリアルアップ）の場合

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,  // デバッグバーを非表示にする
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

例：CupertinoApp（クパティーノアップ）の場合

import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyCupertinoApp());
}

class MyCupertinoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,  // デバッグバーを非表示にする
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Cupertino App'),
        ),
        child: Center(
          child: Text('Hello, Cupertino!'),
        ),
      ),
    );
  }
}

表示確認

デバッグバー表示

デバッグバー非表示

注意点

• debugShowCheckedModeBannerをfalseに設定しても、アプリは依然としてデバッグモードで実行されています。この設定は、デバッグバーの表示を制御するだけで、アプリのビルドモード（デバッグ、リリース、プロファイル）には影響しません。
• アプリをリリースビルドで実行する際には、デバッグバーは自動的に表示されません。

まとめ

Flutterアプリの開発中にデバッグバーを非表示にするのは、MaterialAppまたはCupertinoAppのdebugShowCheckedModeBannerプロパティをfalseに設定するだけで簡単に実現できます。デザインの確認やプレゼンテーションの際に役立つ設定なので、ぜひ活用してください。