くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Flutterでステータスバー/ナビゲーションバーを非表示にする

Flutterでも全画面モードみたいに、
上のステータスバーや下のナビゲーションバーを非表示にしたいなと思い、
いろいろ調べてみたときの備忘録(*´ω`*)

SystemChrome.setEnabledSystemUIMode()で設定できるらしい

使い方

使い方はこんな感じ。いろんなモードがある。

import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // *** ステータスバー/ナビゲーションバーを非表示
  // スワイプで各バーを表示。画面端のスワイプは認識しない。Android4.4以上
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  
  // スワイプで各バーを半透明で表示。画面端のスワイプは認識する。Android4.4以上
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  
  // どこかをタップすると各バー表示。Android4.1以上
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
  
  // 片方だけを非表示にする場合。overlaysに設定したほうが表示
  SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom],
  );
  
  // 両バーがアプリ上に描画された全画面表示。Android10以上
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  
  runApp(const MyApp());
}

以上!!

参考にしたサイトさま