Skip to content

The highlight in NavigationDrawer is not being clipped properly by the footer widget #180233

Closed
#181050
Closed
The highlight in NavigationDrawer is not being clipped properly by the footer widget#180233
#181050
Labels
P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found in release: 3.38Found to occur in 3.38found in release: 3.40Found to occur in 3.40frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@re-ynd
re-ynd
opened on Dec 23, 2025

Steps to reproduce

  1. Create an empty web app project flutter create temp --platforms web --org com.bug --empty
  2. Replace the build(BuildContext context) method with the code from code sample below
  3. Run the web app flutter run -d chrome
  4. Open the left navigation drawer
  5. reduce the vertical window size of the browser until the selected nav item "Test 7" is partially covered by the footer ("Test" button)

Expected results

The footer should cover or clip the highlight

Actual results

The footer is hovering over the highlight. The navigation item itself is being clipped (which is the correct behavior) but the highlight is not being clipped.

Code sample

Code sample 
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: Center(
          child: Text('Hello World!'),
        ),
        drawer: NavigationDrawer(
          selectedIndex: 7,
          footer: OutlinedButton(onPressed: (){}, child: Text('Test')),
          children: [
            for (int i = 0; i < 10; i++)
              NavigationDrawerDestination(
                icon: Icon(Icons.settings),
                label: Text('Test $i'),
              ),
          ],
        ),
      ),
    );
  }

Screenshots or Video

Screenshots / Video demonstration Image

Logs

Logs 




Flutter Doctor output


Doctor output

[✓] Flutter (Channel stable, 3.38.4, on NixOS 26.05 (Yarara) 6.18.1, locale en_IN) [54ms]
    • Flutter version 3.38.4 on channel stable at /nix/store/5hy4pnf1wmiad19kw1zrmlmawf2cdrcy-flutter-wrapped-3.38.4-sdk-links
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision nixpkgs000 (), 1970-01-01 00:00:00
    • Engine revision a5cb96369e
    • Dart version 3.10.3
    • DevTools version 2.51.1
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations,
      enable-native-assets, omit-legacy-version-file, enable-lldb-debugging

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [2.8s]
    • Android SDK at /nix/store/i10cyal10bv4cgc0p0bf6j45spyyascx-androidsdk/libexec/android-sdk
    • Emulator version unknown
    • Platform android-36.1, build-tools 35.0.0
    • ANDROID_HOME = /nix/store/i10cyal10bv4cgc0p0bf6j45spyyascx-androidsdk/libexec/android-sdk
    • ANDROID_SDK_ROOT = /nix/store/i10cyal10bv4cgc0p0bf6j45spyyascx-androidsdk/libexec/android-sdk
    • Java binary at: /nix/store/65qpdkc33j5wqzxvz8c23zhgms8hl35y-openjdk-21.0.9+10/lib/openjdk/bin/java
      This JDK is specified by the JAVA_HOME environment variable.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.9+-nixos)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Chrome - develop for the web [18ms]
    • CHROME_EXECUTABLE = /run/current-system/sw/bin/google-chrome-stable

[✓] Linux toolchain - develop for Linux desktop [425ms]
    • clang version 21.1.2
    • cmake version 4.1.2
    • ninja version 1.13.1
    • pkg-config version 0.29.2
    ! Unable to access driver information using 'eglinfo'.
      It is likely available from your distribution (e.g.: apt install mesa-utils)

[✓] Connected device (2 available) [417ms]
    • Linux (desktop) • linux  • linux-x64      • NixOS 26.05 (Yarara) 6.18.1
    • Chrome (web)    • chrome • web-javascript • Google Chrome 143.0.7499.146

[✓] Network resources [587ms]
    • All expected network resources are available.

! Doctor found issues in 1 category.


Metadata
Metadata
Assignees
No one assigned
    Labels
    P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found in release: 3.38Found to occur in 3.38found in release: 3.40Found to occur in 3.40frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team
    Type
    No type
    Fields
    No fields configured for issues without a type.
    Projects
    No projects
    Milestone
    No milestone
    Relationships
    None yet
    Development
    No branches or pull requests
    Issue actions