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 前進了一步。