{"id":157,"date":"2022-12-01T23:50:56","date_gmt":"2022-12-01T15:50:56","guid":{"rendered":"https:\/\/www.adaycode.com\/dev\/?p=157"},"modified":"2022-12-01T23:50:59","modified_gmt":"2022-12-01T15:50:59","slug":"how-order-of-safearea-affect-status-bar-in-flutter","status":"publish","type":"post","link":"https:\/\/www.adaycode.com\/dev\/how-order-of-safearea-affect-status-bar-in-flutter\/","title":{"rendered":"How Order of SafeArea affect Status Bar in Flutter"},"content":{"rendered":"\n

People may not notice the order of the SafeArea<\/mark> widget has a prominent impact on the status bar which shows the clock and battery level.<\/p>\n\n\n\n

SafeArea<\/mark> widget will try its best to avoid influence (such as round corners, status bar, notch) by the operating system. Therefore, it will indent its child by enough padding to avoid the top status bar.<\/p>\n\n\n\n

If you are using Scaffold<\/mark> with an AppBar<\/mark>, there is no need to wrap the Scaffold<\/mark> in a SafeArea<\/mark>. Flutter will calculate the correct spacing at the top screen and the background colour of the status bar will be the same as the AppBar’s.<\/p>\n\n\n\n

\"\"
Without SafeArea<\/figcaption><\/figure>\n\n\n\n

On the other hand, if you wrap the the Scaffold<\/mark> in a SafeArea<\/mark>, the background of the status bar will become the black (system’s default value), not the AppBar’s background colour.<\/p>\n\n\n\n

\"\"
Scaffold wrapped with SafeArea<\/figcaption><\/figure>\n\n\n\n

Here is the code snippet:<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
  <\/span>@override<\/span><\/span>\n  <\/span>Widget<\/span> <\/span>build<\/span>(<\/span>BuildContext<\/span> context) {<\/span><\/span>\n    <\/span>return<\/span> <\/span>MaterialApp<\/span>(<\/span><\/span>\n      debugShowCheckedModeBanner<\/span>:<\/span> <\/span>false<\/span>,<\/span><\/span>\n      home<\/span>:<\/span> <\/span>SafeArea<\/span>(<\/span><\/span>\n        child<\/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>\/\/ SafeArea<\/span><\/span>\n    )<\/span>;<\/span><\/span>\n  }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Unless you want the background colour of the status bar to follow the operating system’s default value rather than the AppBar’s colour, a Scaffold<\/mark> should not be wrapped with a SafeArea<\/mark>.<\/p>\n","protected":false},"excerpt":{"rendered":"
People may not notice the order of the SafeArea widget has a prominent impact on…<\/p>\n","protected":false},"author":2,"featured_media":162,"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,15,11,22,42],"class_list":["post-157","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-ios-development","tag-programming","tag-tip","tag-ui"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.adaycode.com\/dev\/wp-content\/uploads\/2022\/12\/flutter_safearea_featured.jpg?fit=1024%2C736&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts\/157","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=157"}],"version-history":[{"count":2,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"predecessor-version":[{"id":161,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts\/157\/revisions\/161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/media\/162"}],"wp:attachment":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}