FlutterでDEBUGタグを削除する

image

開発環境

  • Flutter 3.3.10
  • Dart 2.18.6

はじめに

Flutterでアプリを開発する上では、シミュレーターや実機デバイスを用いることが多いと思います。 その時に、シミュレーターや実機デバイスでアプリを起動すると、画面の右上にDEBUGと言う赤色のタグ をよく見かけると思います。

1

今回の記事では、写真の黄色の枠で囲われた部分の削除方法を紹介していきます。

DEBUGタグを消す方法

DEBUGタグを消す方法は以下のようにします。

コード

レビュー機能を実装したいファイル

import 'package:flutter/material.dart';

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

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

  
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //ここで削除
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

コードを説明

DEBUGを消すには、MaterialApp内に以下の内容を記述するだけで実装できます。

debugShowCheckedModeBanner: false,

これでDEBUGを削除することができました。

2

DEBUGタグはなぜ存在するのか?

DEBUGタグはアプリがデバッグモードを示すために存在します。 このタグの使用用途は、デバッグモードの時にアプリの挙動が遅いと指摘されないようにするために使います。

デバッグモードとは開発でバグ修正する時に使用するビルドモードのことを言います。ブレークポイントの設定やFlutterの強みであるホットリロードの機能は、このモードでのみ使うことができます。

このように、デバッグモードではデバッグするための機能が使えるため、その分アプリは最適化されず、実行速度などのパフォーマンスは低くなります。

そのため、デバッグモードのアプリの挙動とリリースモードでのアプリの挙動は異なるので、DEBUGタグを表示することで、デバッグモードとリリースモードを視覚的に判断することができます。

まとめ

いかがだったでしょうか? シミュレーターや実機デバイスでのビルドの時に気になっていたDEBUGタグの削除は簡単にできることが分かります。

この記事がDEBUGタグを消したい方やなぜ存在するのかを知りたい方のお役に立てれば幸いです。

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (105)初心者向け (26)イベント (17)Google Apps Script (15)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)vscode (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More