iOs home indicator bar problem

Widgets & Design

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?

What have you tried so far?

..

Did you check FlutterFlow's Documentation for this topic?
Yes
3
2 replies