【Flutter】デバッグリボンを消す方法

JS2IIU

2年前

こんにちは、JS2IIUです。
Flutterアプリを開発している際に、画面右上に「DEBUG」と表示されるリボンが気になったことはありませんか？これは、アプリがデバッグモードで実行されていることを示すもので、リリースモードでは表示されません。しかし、デバッグ中でもこのデバッグリボンを非表示にしたい場合があります。その方法についてメモしておきます。

デバッグリボンを非表示にする方法

Flutterでは、MaterialAppウィジェットのプロパティを使用して、このデバッグリボンを非表示にすることができます。具体的には、debugShowCheckedModeBannerプロパティをfalseに設定します。

以下に、具体的なコード例を示します：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false, // ここでリボンを非表示にします
      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, world!',
        ),
      ),
    );
  }
}

まとめ

デバッグモードでの「DEBUG」リボンは、アプリの開発中に役立つ情報を提供しますが、場合によっては見た目の確認やスクリーンショットを撮る際に邪魔になることがあります。そのような場合には、MaterialAppのdebugShowCheckedModeBannerプロパティを使用して簡単に非表示にすることができます。

Flutterを使った開発を楽しんでください！

最後まで読んでいただき有難うございました。73