Flutter开发问题：如何让BottomNavigationBar延伸至透明SystemNavigationBar下方

Hey there! I see you're working on replicating Google Files in Flutter and stuck on getting the NavigationBar to extend behind the transparent system navigation bar—let's fix that right up!

The main issue here is that your Scaffold isn't configured to let its content extend into the system navigation bar area, and we need to tweak a few settings to match Google Files' seamless look. Here's how to adjust your code:

Step 1: Refine System UI Overlay Settings #

First, let's update the system overlay style to remove the default navigation bar divider and ensure full transparency:

void main() {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent, // Removes the default divider line
  ));
  runApp(const Main());
}

Step 2: Configure Scaffold to Extend Content #

Add the extendBody: true property to your Scaffold—this is the key to letting the NavigationBar overlap with the transparent system navigation bar:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // Critical: allows content to extend into system nav bar area
      appBar: AppBar(
        title: const Text('Title'),
      ),
      body: const HomePage(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          debugPrint("Button pressed");
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: NavigationBar(
        backgroundColor: Theme.of(context).colorScheme.surface, // Match your theme's surface color
        surfaceTintColor: Colors.transparent, // Remove Material 3's default surface tint
        elevation: 0, // Optional: remove shadow if you don't want it
        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,
      ),
    );
  }
}

Why These Changes Work: #

• extendBody: true: Tells the Scaffold to let its body and bottom navigation bar expand into the system navigation bar's space. This only works when systemNavigationBarColor is transparent (which you already set up).
• systemNavigationBarDividerColor: Colors.transparent: Gets rid of the thin line that normally separates the app content from the system navigation bar, making the visual transition seamless like Google Files.
• surfaceTintColor: Colors.transparent: Removes the subtle tint that Material 3 applies to navigation bars by default, ensuring your navigation bar's background blends perfectly with the area behind it.

With these tweaks, your NavigationBar should now extend behind the transparent system navigation bar, matching the official Google Files app's look!

内容的提问来源于stack exchange，提问作者hendrikbl