Android Statusbar Overlap Issue In Flutter

Question

I am building an app in flutter, the app bar is overlapping the status bar mainly in Oneplus and Motorola mobiles phones. I'm sharing the code files of my project

HomeView

class HomeView extends GetView<HomeController> { const HomeView({super.key});
 @override Widget build(BuildContext context) {
 return AnnotatedRegion<SystemUiOverlayStyle>(
 value: SystemUiOverlayStyle.light.copyWith(
 statusBarColor: Colors.transparent,
 statusBarIconBrightness: Brightness.light,
 ),
 child: SafeArea(
 child: Scaffold(
 appBar: AppBar(
 title: Obx(() {
 if (controller.tabIndex.value == 0) {
 return DropdownButton<String>(
 isExpanded: false,
 dropdownColor: AppColors.kWhiteColor,
 value: controller.selectedLocationId.value,
 onChanged: (selectedValue) {
 controller.selectedLocationId.value =
 selectedValue.toString();
 },
 items: controller.locationDropDownMenuItem.value,
 iconEnabledColor: AppColors.kBlackColor,
 underline: Container(),
 style: TextStyle(
 fontSize: 14,
 fontWeight: FontWeight.w500,
 color: AppColors.kBlackColor,
 ),
 );
 } else {
 return Text('Flutter App');
 }
 }),
 actions: [
 appBarAActionItem(
 iconData: Icons.account_balance_wallet_outlined,
 onTap: () => Get.toNamed(Routes.WALLET),
 ),
 appBarAActionItem(
 iconData: Icons.notifications_none_outlined,
 onTap: () => Get.toNamed(Routes.NOTIFICATIONS),
 ),
 ],
 ),
 drawer: NavigationDrawerWidget(),
 body: Obx(
 () => IndexedStack(
 index: controller.tabIndex.value,
 children: [
 MeetingRoomView(
 locationId: controller.selectedLocationId.value,
 ),
 TicketView(),
 ],
 ),
 ),
 bottomNavigationBar: Obx(
 () => BottomNavigationBar(
 onTap: controller.changeTabIndex,
 currentIndex: controller.tabIndex.value,
 unselectedItemColor: AppColors.kBlackColor,
 selectedItemColor: AppColors.kDodgerBlueColor,
 type: BottomNavigationBarType.fixed,
 backgroundColor: Colors.white,
 elevation: 0,
 showSelectedLabels: true,
 showUnselectedLabels: true,
 items: [
 bottomNavigationBarItem(
 Icons.meeting_room_outlined,
 'Meeting Room',
 ),
 bottomNavigationBarItem(
 Icons.support_agent_outlined,
 'Tickets',
 ),
 ],
 ),
 ),
 ),
 ),
 ); }
 bottomNavigationBarItem(IconData icon, String label) {
 return BottomNavigationBarItem(
 icon: Icon(icon),
 label: label,
 ); }
 appBarAActionItem({
 required IconData iconData,
 required VoidCallback onTap, }) {
 return Padding(
 padding: EdgeInsets.only(
 right: 20,
 bottom: 12,
 ),
 child: GestureDetector(
 onTap: onTap,
 child: Icon(
 iconData,
 color: AppColors.kBlackColor,
 ),
 ),
 ); } }

Android Manifest File

 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
 <uses-permission android:name="android.permission.INTERNET" />
 
 <application
 android:name="${applicationName}"
 android:icon="@mipmap/ic_launcher"
 android:label="Flutter App">
 <activity
 android:name=".MainActivity"
 android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
 android:exported="true"
 android:hardwareAccelerated="true"
 android:launchMode="singleTop"
 android:taskAffinity=""
 android:theme="@style/LaunchTheme"
 android:windowSoftInputMode="adjustResize">
 <meta-data
 android:name="io.flutter.embedding.android.NormalTheme"
 android:resource="@style/NormalTheme" />
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 <meta-data
 android:name="flutterEmbedding"
 android:value="2" />
 </application>
 <queries>
 <intent>
 <action android:name="android.intent.action.PROCESS_TEXT" />
 <data android:mimeType="text/plain" />
 </intent>
 </queries>
 </manifest>

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
 <item name="android:windowBackground">@drawable/launch_background</item>
 <item name="android:windowNoTitle">true</item>
 <item name="android:statusBarColor">@android:color/transparent</item>
 </style>
 <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
 <item name="android:windowBackground">?android:colorBackground</item>
 <item name="android:windowNoTitle">true</item>
 <item name="android:statusBarColor">@android:color/transparent</item>
 </style>
</resources>

I'm also adding the issue image and required image for better understanding my issue.

Issue image

Issue Version

Required image

Required Version

• Nikhil Guleria: Remove SafeArea Widget

Answer 1

The issue is caused by using both SafeArea and a Scaffold with a default AppBar. Itcauses double padding on some devices

Remove the SafeArea wrapping the Scaffold.

@override
Widget build(BuildContext context) {
 return AnnotatedRegion<SystemUiOverlayStyle>(
 value: SystemUiOverlayStyle.light.copyWith(
 statusBarColor: Colors.transparent,
 statusBarIconBrightness: Brightness.light,
 ),
 child: Scaffold(
 appBar: AppBar(
 // ... your app bar code ...
 ),
 drawer: NavigationDrawerWidget(),
 body: Obx(
 () => IndexedStack(
 index: controller.tabIndex.value,
 children: [
 MeetingRoomView(
 locationId: controller.selectedLocationId.value,
 ),
 TicketView(),
 ],
 ),
 ),
 bottomNavigationBar: Obx(
 () => BottomNavigationBar(
 // ... your bottom nav code ...
 ),
 ),
 ),
 );
}