entityMap|blocks|key|48mup|text|应该做你想做的事。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|dpt5q|你可以用下面的命令把它带回来|bihb8|..。|ai8pp|使用导入|3qv36|import+'package:flutter/services.dart';|code-block|syntax|javascript^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Q|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|R|9|@]|A|@]|B|$L|M]]]]

<a href="https://docs.flutter.io/flutter/services/SystemChrome/setEnabledSystemUIOverlays.html" rel="noreferrer"><code>SystemChrome.setEnabledSystemUIOverlays([])</code></a> should do what you want.

You can bring it back with <code>SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)</code>.

Import it using

<pre><code>import 'package:flutter/services.dart';
</code></pre>

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/dd885c27a59d0cf43140cdc1218f9a33.png|imageAlt|1|https://ask.qcloudimg.com/http-save/actteam/c6433b987da38e86dcd434ee739257f8.png|blocks|key|ffqhl|text|import+'package:flutter/services.dart';|code-block|depth|inlineStyleRanges|entityRanges|syntax|javascript|3dv54|1.隐藏状态栏|unstyled|fn1k5|SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])|9q9f8|​|2h904|136nm|?|atomic|offset|length|2kagm|8r096|透明状态栏|1j5c4|SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
++++statusBarColor:+Colors.transparent,
+));|cqh83|f73p8|8tjcm|4o0e1|d4sk9|5ejbp|3.显示状态栏|18a7a|SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);|6sotb|您需要将此代码放在：|2rv2i|1.对于单屏幕|c0m1t|@override
++void+initState()+{
++++//+put+it+here
++++super.initState();
++}|8fkpm|2.对于main.dart中的所有页面：|1maoj|void+main()+{
++++++//+put+it+here
++++++runApp(...);
++}^0|0|0|0|0|0|0|1|0|0|0|0|0|0|0|0|1|1|0|0|0|0|0|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]|A|$2|3|4|5|6|$7|B|9|-4]]]|C|@$D|E|F|G|2|H|I|1O|J|@]|K|@]|6|$L|M]]|$D|N|F|O|2|P|I|1P|J|@]|K|@]|6|$]]|$D|Q|F|R|2|H|I|1Q|J|@]|K|@]|6|$L|M]]|$D|S|F|T|2|P|I|1R|J|@]|K|@]|6|$]]|$D|U|F|-4|2|P|I|1S|J|@]|K|@]|6|$]]|$D|V|F|W|2|X|I|1T|J|@]|K|@$Y|1U|Z|1V|D|1W]]|6|$]]|$D|10|F|-4|2|P|I|1X|J|@]|K|@]|6|$]]|$D|11|F|12|2|P|I|1Y|J|@]|K|@]|6|$]]|$D|13|F|14|2|H|I|1Z|J|@]|K|@]|6|$L|M]]|$D|15|F|T|2|P|I|20|J|@]|K|@]|6|$]]|$D|16|F|-4|2|P|I|21|J|@]|K|@]|6|$]]|$D|17|F|W|2|X|I|22|J|@]|K|@$Y|23|Z|24|D|25]]|6|$]]|$D|18|F|-4|2|P|I|26|J|@]|K|@]|6|$]]|$D|19|F|T|2|P|I|27|J|@]|K|@]|6|$]]|$D|1A|F|1B|2|P|I|28|J|@]|K|@]|6|$]]|$D|1C|F|1D|2|H|I|29|J|@]|K|@]|6|$L|M]]|$D|1E|F|1F|2|P|I|2A|J|@]|K|@]|6|$]]|$D|1G|F|1H|2|P|I|2B|J|@]|K|@]|6|$]]|$D|1I|F|1J|2|H|I|2C|J|@]|K|@]|6|$L|M]]|$D|1K|F|1L|2|P|I|2D|J|@]|K|@]|6|$]]|$D|1M|F|1N|2|H|I|2E|J|@]|K|@]|6|$L|M]]]]

<pre><code>import 'package:flutter/services.dart';
</code></pre>
<h2>1.Hide Statusbar</h2>
<pre><code>SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])
</code></pre>
<h2><a href="https://i.stack.imgur.com/E1fUvl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/E1fUvl.png" alt="enter image description here" /></a>
 
2. Transparant Statusbar</h2>
<pre><code> SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
 statusBarColor: Colors.transparent,
 ));
</code></pre>
<a href="https://i.stack.imgur.com/qciMSl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qciMSl.png" alt="enter image description here" /></a>
<h2>3.Show Statusbar</h2>
<pre><code>SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
</code></pre>
<h3>You need to put this code on :</h3>
1.For Single Screen 
<pre><code>@override
 void initState() {
 // put it here
 super.initState();
 }
</code></pre>
2.For All pages in main.dart:
<pre><code> void main() {
 // put it here
 runApp(...);
 }
</code></pre>

entityMap|blocks|key|bof5u|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1plk3|隐藏和|7bgsr|把它带回来。|bfger|然而，将会有轻微的灰色区域，目前还没有解决这个问题的方法。当状态栏隐藏时，应用程序栏的高度保持不变。|e9gg4|请参阅github问题：|58l02|https://github.com/flutter/flutter/issues/14432^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|O|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|P|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|Q|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|R|9|@]|A|@]|B|$]]]]

You can use <code>SystemChrome.setEnabledSystemUIOverlays([])</code> to hide and <code>SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)</code> to bring it back again.

However, there will be slight grey area and there is not fix for this as of right now. When status bar is hidden, app bar's height remains the same.

See the github issue: <a href="https://github.com/flutter/flutter/issues/14432" rel="noreferrer">https://github.com/flutter/flutter/issues/14432</a>

entityMap|blocks|key|2qi3|text|对于单页(在页面文件中)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2fuk4|@override
++void+initState()+{
++++SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
++++super.initState();
++}

++@override
++void+dispose()+{
++++SystemChrome.setEnabledSystemUIOverlays(
++++++++[SystemUiOverlay.top,+SystemUiOverlay.bottom]);
++++super.dispose();
++}|code-block|syntax|javascript|7v5ko|对于所有页面(在main.dart中)：|a3sap|void+main()+{
++SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
++runApp(MaterialApp(
++++++debugShowCheckedModeBanner:+false,
++++++theme:+ThemeData(fontFamily:+'Poppins'),
++++++home:+SplashScreen()));
}|a8dp6|别忘了^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|O|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|Q|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|R|9|@]|A|@]|B|$]]]]

For single page (in page file):
<pre><code>@override
 void initState() {
 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
 super.initState();
 }

 @override
 void dispose() {
 SystemChrome.setEnabledSystemUIOverlays(
 [SystemUiOverlay.top, SystemUiOverlay.bottom]);
 super.dispose();
 }
</code></pre>
For All pages (in main.dart):
<pre><code>void main() {
 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
 runApp(MaterialApp(
 debugShowCheckedModeBanner: false,
 theme: ThemeData(fontFamily: 'Poppins'),
 home: SplashScreen()));
}
</code></pre>
Dont forget to <code>import 'package:flutter/services.dart'</code>

entityMap|blocks|key|c4b44|text|您可以在main函数中添加以下代码来隐藏状态栏。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2crhk|SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
++statusBarColor:+Colors.transparent,
));|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

You can add the below code in your main function to hide status bar.

<pre><code>SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
 statusBarColor: Colors.transparent,
));
</code></pre>

entityMap|blocks|key|6h7b5|text|这篇来自Jonah+Williams的评论可能在某些情况下也会有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|d6l4b|https://github.com/flutter/flutter/issues/24472#issuecomment-440015464|4i8qh|如果您不希望状态栏颜色被AppBar覆盖。|b3gjl|您不能为应用程序栏提供状态栏颜色，但您可以创建自己的批注区域。现在还不是很直观，但是你可以使用|cr240|若要重写由应用程序栏创建的子批注区域，请执行以下操作。|2p72g|在某个地方，也许是断头台的孩子：|22s7v|Scaffold(+body:+AnnotatedRegion(值:+const+Scaffold(+...+)，sized:+false，SystemUiOverlayStyle：...)+)；|agkgh|请注意，并非所有Android版本都支持状态栏颜色或图标亮度。有关注意事项，请参阅SystemUiOverlayStyle上的文档。^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|S|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|T|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|U|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|V|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|W|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|X|9|@]|A|@]|B|$]]]]

This comment from Jonah Williams might be helpful in some situations as well
<a href="https://github.com/flutter/flutter/issues/24472#issuecomment-440015464" rel="nofollow noreferrer">https://github.com/flutter/flutter/issues/24472#issuecomment-440015464</a>
if you don't want the status bar color be overridden by the AppBar.

<blockquote>
 You cannot provide a status bar color to the app bar, but you can
 create your own annotated region. It's not very intuitive right now,
 but you can use <code>sized: false</code> to override the child annotated region
 created by the app bar.
 
 Somewhere, perhaps as a child of the scaffold:

<pre><code>Scaffold(
 body: AnnotatedRegion&lt;SystemUiOverlayStyle&gt;(
 value: const SystemUiOverlayStyle(...),
 sized: false,
 child: ...
 )
);
</code></pre>
 
 Note that not all Android versions support status bar color or icon
 brightness. See the documentation on SystemUiOverlayStyle for the
 caveats.
</blockquote>

entityMap|blocks|key|ahtbf|text|Step1:在包下面导入|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3gcv5|import+'package:flutter/services.dart';|code-block|syntax|javascript|dj0qk|Step2:将以下代码添加到类的初始化状态，如下所示|dopt3|@override
++void+initState()+{
++++//+TODO:+implement+initState
++++super.initState();
++++SystemChrome.setEnabledSystemUIOverlays([]);

++}^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

Step1:Import below package

<pre><code>import 'package:flutter/services.dart';
</code></pre>

Step2: Add the following code to your class init state like below

<pre><code>@override
 void initState() {
 // TODO: implement initState
 super.initState();
 SystemChrome.setEnabledSystemUIOverlays([]);

 }
</code></pre>

entityMap|blocks|key|3mh09|text|i:要隐藏状态栏，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a834r|ii:使用SafeArea小工具它将确保你的应用程序不会占用状态栏区域。|91pgp|@override
Widget+build(BuildContext+context)+{
++++return+Scaffold(
++++++body:+SafeArea(
++++++++++child:+Container(
++++++++++++child:+Text('Do+not+take+status+bar+area+on+screen!'),
++++++++++),
++++++++);
}|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

i: To hide status bar:
<code>SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);</code>
ii: Use SafeArea Widget it will make sure that your app does not take status bar area.
<pre><code>@override
Widget build(BuildContext context) {
 return Scaffold(
 body: SafeArea(
 child: Container(
 child: Text('Do not take status bar area on screen!'),
 ),
 );
}
</code></pre>

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/027872a0811e3e72cf9334046d01d000.png|imageAlt|blocks|key|1b1v9|text|body:+MyAppBody(),|code-block|depth|inlineStyleRanges|entityRanges|syntax|javascript|et7ut|将其更改为|unstyled|9grpr|body:+SafeArea(child:+MyAppBody()),|dvv32|​|30m15|af1tp|?|atomic|offset|length|8i812|bqjqg^0|0|0|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|10|H|@]|I|@]|6|$J|K]]|$B|L|D|M|2|N|G|11|H|@]|I|@]|6|$]]|$B|O|D|P|2|F|G|12|H|@]|I|@]|6|$J|K]]|$B|Q|D|R|2|N|G|13|H|@]|I|@]|6|$]]|$B|S|D|-4|2|N|G|14|H|@]|I|@]|6|$]]|$B|T|D|U|2|V|G|15|H|@]|I|@$W|16|X|17|B|18]]|6|$]]|$B|Y|D|-4|2|N|G|19|H|@]|I|@]|6|$]]|$B|Z|D|R|2|N|G|1A|H|@]|I|@]|6|$]]]]

<pre><code> body: MyAppBody(),
</code></pre>
CHANGE THIS TO
<pre><code>body: SafeArea(child: MyAppBody()),
</code></pre>
<a href="https://i.stack.imgur.com/fm96o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fm96o.png" alt="enter image description here" /></a>

entityMap|blocks|key|djo3o|text|第一次添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|73ikb|你的Main函数。|feho1|如前所述，这会留下一个轻微的灰色区域。|9t6e9|我有一个简单的解决方法(只是一个变通方法，但在大多数情况下都是有效的)。|8e1us|在|14ud4|只需添加|ecqjj|backgroundColor:+Colors.transparent,
elevation:+0.0,|code-block|syntax|javascript|cod91|我希望这能有所帮助^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|V|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|W|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|X|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|Y|9|@]|A|@]|B|$]]|$2|M|4|N|6|O|8|Z|9|@]|A|@]|B|$P|Q]]|$2|R|4|S|6|7|8|10|9|@]|A|@]|B|$]]]]

First add <code>SystemChrome.setEnabledSystemUIOverlays([]);
</code> to your Main function.

This leaves a slight grey area as mentioned in previous answers.

I have a simple fix for that (Just a workaround, works in most cases though).

In <code>AppBar()</code> just add 

<pre><code>backgroundColor: Colors.transparent,
elevation: 0.0,
</code></pre>

I hope this helps

How to hide the Android Status Bar in a Flutter App?

<a href="https://i.stack.imgur.com/qnPhS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qnPhS.png" alt="Android Status Bar"></a>

问如何在颤动中隐藏安卓StatusBar
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在颤动中隐藏安卓StatusBarEN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在颤动中隐藏安卓StatusBar
EN