世界最大級のオンライン学習サービス「Udemy」のセール状況はこちら

【Flutter】画面右上のDEBUG(赤色ラベル)を消す方法|debugshowcheckedmodebanner

「Flutterアプリの画面右上に表示されるDEBUGラベルを消したい」

こんな悩みを解決します。

DEBUGラベルはAppBar上に表示されていますが非表示するにはMaterialAppで設定します。それでは画面右上のDEBUG(赤色ラベル)を消す方法について解説していきます!

目次

画面右上のDEBUGラベルを消す方法

アプリ画面右上のDEBUGラベルを非表示するにはMaterialAppのdebugShowCheckedModeBannerプロパティをfalseにします。

MaterialApp(
  debugShowCheckedModeBanner: false,
  home: MyWidget(),
);
サンプルコード
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
    );
  }
}

まとめ

今回は画面右上のDEBUGラベルを非表示する方法について解説しました。

次の記事でAppBarのカスタマイズ方法について解説しているのでぜひ一緒にご覧ください。

目次