Skip to content

[Flutter] 移除上方狀態欄、下方操作欄、DEBUG 標籤

Last Updated on 2021-05-18 by Clay

在使用 Flutter 開發 App 的時候，我經常被畫面上遮住 App 界面的手機原生欄位困擾，比如說最上方的狀態欄：

下方的操作欄：

以及 DEBUG 標籤：

所以我今天就來紀錄一下，該如何清除掉這些稍微有點『有礙觀瞻』的東西，還給我們開發的 App 一個乾淨的界面。

想學習 Flutter 可以參考他們的官方網站： https://flutter.dev/docs/reference/tutorials

若是想要在電腦中裝設 IDE，可以參考我之前寫過的《Flutter 學習心得筆記 (0) 下載 Intellij IDEA》。

那麼，以下我們便開始吧！

最原始的模樣

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

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

class originalPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: new AppBar(
            title: Text('DEBUG'),
            backgroundColor: Colors.black,
          ),
            body: Container(
              alignment: Alignment.center,
              color: Colors.red,
              width: 200,
              height: 200,
              child: new Text('Today is a nice day'),
            )
        )
    );
  }
}



Output:

import 'package:flutter/services.dart';

上面這行非常重要，影響到我們接下來隱藏的程式。

隱藏上方狀態欄

在 Widget 下方寫下程式碼：

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);



Output:

隱藏下方操作欄

在 Widget 下方寫下程式碼：

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);




上下欄位都想隱藏

在 Widget 下方寫下程式碼： 

SystemChrome.setEnabledSystemUIOverlays([]);



Output:

不用太擔心這樣操作不方便——只要使用者手指在下方一往上拉，熟悉的操作欄位還是會浮現出來的，幾乎沒有任何不便。

隱藏 DEBUG 標籤

其實解決方法意外單純，只要在 MaterialApp 底下加上一行：

debugShowCheckedModeBanner: false,



Output:

即可解決這樣的問題。

在隱藏了上方狀態欄、下方操作欄、DEBUG 標籤之後，終於覺得清爽多了！這下子又離美觀的 App 前進了一步。

Tags:

Leave a Reply