Hi, today I tested my app on iOS for the first time, and everything worked correctly except for the home indicator. The home indicator is equivalent to the navigation bar on Android.
To configure the appearance of both the status bar and the navigation bar (and therefore the home indicator), I'm using the following custom action, which I load on the "on page load" event for each page.
import 'package:flutter/services.dart';
Future<void> setAdaptiveSystemUI(BuildContext context) async {
final brightness = Theme.of(context).brightness;
final bool isDarkMode = brightness == Brightness.dark;
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
//Set status bar
statusBarColor: Colors.transparent,
statusBarIconBrightness: isDarkMode ? Brightness.light : Brightness.dark,
statusBarBrightness: isDarkMode ? Brightness.dark : Brightness.light,
// Set navigation bar
systemNavigationBarColor:
isDarkMode ? const Color(0xFF060815) : Colors.white,
systemNavigationBarIconBrightness:
isDarkMode ? Brightness.light : Brightness.dark,
));
}
However, the issue I’m encountering on iOS is that the home indicator appears transparent, which makes the background content visible. The navigation menu has a solid color as expected, but then the home indicator is transparent, creating an empty rectangle where the underlying content is visible.
Does anyone know how to fix this?