Flutter bottomNavigationBar extend behind systemNavigationBar

Question

I'm currently playing around with flutter by recreating the google files app. I followed some tutorials and stuff but are now stuck at a problem I can't find a solution for. I want the bottomNavigationBar to extend behind the systemNavigationBar which I made transparent.

The left image is my flutter app, the right one is the real deal.

Here's the code for that so far:

void main() {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent));

  runApp(const Main());
}

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  static const _brandColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    // Wrap MaterialApp with a DynamicColorBuilder.
    return DynamicColorBuilder(
      builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
        ColorScheme lightColorScheme;
        ColorScheme darkColorScheme;

        if (lightDynamic != null && darkDynamic != null) {
          lightColorScheme = lightDynamic.harmonized();
          darkColorScheme = darkDynamic.harmonized();
        } else {
          lightColorScheme = ColorScheme.fromSeed(
            seedColor: _brandColor,
          );
          darkColorScheme = ColorScheme.fromSeed(
            seedColor: _brandColor,
            brightness: Brightness.dark,
          );
        }

        return MaterialApp(
          theme: ThemeData(
            colorScheme: lightColorScheme,
            useMaterial3: true,
          ),
          darkTheme: ThemeData(
            colorScheme: darkColorScheme,
            useMaterial3: true,
          ),
          home: const RootPage(),
          debugShowCheckedModeBanner: false,
        );
      },
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Title'),
      ),
      body: const HomePage(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          debugPrint("Button pressed");
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: NavigationBar(
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home_filled), label: "Start"),
          NavigationDestination(
              icon: Icon(Icons.star_outline), label: "Markiert"),
          NavigationDestination(
              icon: Icon(Icons.people_alt_outlined), label: "Freigegeben"),
          NavigationDestination(
              icon: Icon(Icons.folder_open_outlined), label: "Dateien"),
        ],
        onDestinationSelected: (int i) {
          setState(() {
            currentPage = i;
          });
        },
        selectedIndex: currentPage,
      ),
    );
  }
}

It's working on my side, [take a look](https://imgur.com/yoM9MZb). Are you testing it on the Simulator or a real device? — lepsch, Aug 30 '22 at 13:09
@lepsch that's interesting. I was testing on android 11-13 on emulators as well as on my pixel 6. All of them had the same problem. On ios it seems to be working fine. I'm wondering if that's a flutter issue or if i have to do something to make it work on android... — hendrikbl, Aug 30 '22 at 13:26
[Take a look at this](https://stackoverflow.com/questions/56608171). It looks like support for the gesture navigation bar is still in progress. — lepsch, Aug 30 '22 at 16:16

score 0 · Answer 1 · answered Mar 07 '23 at 18:53

this may be a little late, but maybe it helps future visitors.

If you use case is to simply "extend" the color of your BottomNavigationBar you could wrap your App with this:

AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle(
    systemNavigationBarColor: Theme.of(context).bottomAppBarTheme.color,
  ),
  child: child ?? const Placeholder(),
)

I personally put this in the top level builder in my MaterialApp.

Flutter bottomNavigationBar extend behind systemNavigationBar

1 Answers1