{"id":147,"date":"2022-12-01T21:55:44","date_gmt":"2022-12-01T13:55:44","guid":{"rendered":"https:\/\/www.adaycode.com\/dev\/?p=147"},"modified":"2022-12-02T00:02:07","modified_gmt":"2022-12-01T16:02:07","slug":"how-to-hide-remove-status-bar-in-flutter","status":"publish","type":"post","link":"https:\/\/www.adaycode.com\/dev\/how-to-hide-remove-status-bar-in-flutter\/","title":{"rendered":"How to hide \/ remove status bar in Flutter"},"content":{"rendered":"\n

If you want your app to be in fullscreen mode, you may want an absolute fullscreen repelling all other elements such as time and battery level.<\/p>\n\n\n\n

To hide the status bar, it is much simpler than you think. Only 2 lines of code will do the job.<\/p>\n\n\n\n

The first additional code is to import package:flutter\/services.dart<\/mark>.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>'package:flutter\/material.dart'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>'package:flutter\/services.dart'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The second line of code is the following snippet:<\/p>\n\n\n\n
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>'package:flutter\/material.dart'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>'package:flutter\/services.dart'<\/span>;<\/span><\/span>\n<\/span>\nvoid<\/span> <\/span>main<\/span>() {<\/span><\/span>\n  <\/span>runApp<\/span>(<\/span>const<\/span> <\/span>MyApp<\/span>())<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nclass<\/span> <\/span>MyApp<\/span> <\/span>extends<\/span> <\/span>StatelessWidget<\/span> {<\/span><\/span>\n  <\/span>const<\/span> <\/span>MyApp<\/span>({<\/span>super<\/span>.<\/span>key})<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>@override<\/span><\/span>\n  <\/span>Widget<\/span> <\/span>build<\/span>(<\/span>BuildContext<\/span> context) {<\/span><\/span>\n    <\/span>SystemChrome<\/span>.<\/span>setEnabledSystemUIMode<\/span>(<\/span>SystemUiMode<\/span>.<\/span>immersiveSticky)<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> <\/span>MaterialApp<\/span>(<\/span><\/span>\n      home<\/span>:<\/span> <\/span>Scaffold<\/span>(<\/span><\/span>\n        appBar<\/span>:<\/span> <\/span>AppBar<\/span>(<\/span><\/span>\n          title<\/span>:<\/span> <\/span>const<\/span> <\/span>Text<\/span>(<\/span>'Welcome to Flutter'<\/span>)<\/span>,<\/span><\/span>\n        )<\/span>,<\/span><\/span>\n        body<\/span>:<\/span> <\/span>const<\/span> <\/span>Center<\/span>(<\/span><\/span>\n          child<\/span>:<\/span> <\/span>Text<\/span>(<\/span>'Hello World'<\/span>)<\/span>,<\/span><\/span>\n        )<\/span>,<\/span><\/span>\n      )<\/span>,<\/span><\/span>\n    )<\/span>;<\/span><\/span>\n  }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Here are the screenshots before and after the status bar has been removed:<\/p>\n\n\n\n
\"\"
Status bar removed<\/figcaption><\/figure>\n\n\n\n
You can put SystemChrome.setEnabledSystemUIMode<\/mark> inside a button’s onPressed<\/mark> function if you want the hiding effect to be dynamic or based on user preference.<\/p>\n","protected":false},"excerpt":{"rendered":"
If you want your app to be in fullscreen mode, you may want an absolute…<\/p>\n","protected":false},"author":2,"featured_media":163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[16,9,6,5,13,41,15,11,29,40,42],"class_list":["post-147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter-tutorials","tag-android-development","tag-app-development","tag-dart","tag-flutter","tag-flutter-tutorial","tag-hide","tag-ios-development","tag-programming","tag-remove","tag-status-bar","tag-ui"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.adaycode.com\/dev\/wp-content\/uploads\/2022\/12\/hide_status_bar_featured_v2.jpg?fit=1024%2C736&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/comments?post=147"}],"version-history":[{"count":3,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts\/147\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts\/147\/revisions\/154"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/media\/163"}],"wp:attachment":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/media?parent=147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/categories?post=147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/tags?post=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}