【Flutter】debug bannerを非表示にする方法

2024年8月15日2024年9月15日

※本記事で使用している環境

＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
チップ：Apple M3
シェル：zsh

＜ソフトウェア＞
・Flutter（ver.3.22.3）
・Xcode（ver.15.4）
・CocoaPods（ver.1.15.2）
・Android Studio（ver.2024.1）
・Visual Studio Code（ver.1.92.0）

前回は、Image Widget についての解説を行いました。

今回行うこと

今回行うのは、以下の画像にあるように、アプリ上に「DEBUG」と表示されてしまっているものを非表示にする方法の解説です。

debug banner を非表示にする手順

MaterialApp Widget のプロパティの設定を変更することで、debug banner を消すことができます。

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Hello First App Bar"),
        ),
        body: Image.asset("image/ocean.png"),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

MaterialApp の情報を見る