Skip to content

NavigationDrawer active indicator offset with SvgPicture #169436

Closed
#169497
Closed
NavigationDrawer active indicator offset with SvgPicture#169436
#169497
Assignees
bleroux
Labels
c: regressionIt was better in the past than it is nowfound in release: 3.32Found to occur in 3.32found in release: 3.33Found to occur in 3.33frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages team

Description

@ferraridamiano
ferraridamiano
opened on May 25, 2025

Steps to reproduce

In the latest flutter stable release when there is a SvgPicture as a header of a NavigationDrawer the active indicator is shifted by some pixels. The result is as expected as soon as you interact with the UI

  1. Copy the code below
  2. Include whatever svg in the asset folder of your pubspec.yaml
  3. Run the app (tested both android and linux)

Expected results

No offset of the active indicator

Actual results

Offset of the active indicator

Code sample

Code sample 
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() => runApp(const NavigationDrawerApp());

class NavigationDrawerApp extends StatelessWidget {
  const NavigationDrawerApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Navigation Drawer')),
        drawer: NavigationDrawer(
          selectedIndex: 0,
          children: [
            SvgPicture.asset('assets/star.svg', width: 150),
            NavigationDrawerDestination(
              icon: Icon(Icons.inbox_outlined),
              label: const Text('Inbox'),
            ),
            NavigationDrawerDestination(
              icon: Icon(Icons.send_outlined),
              label: const Text('Outbox'),
            ),
            NavigationDrawerDestination(
              icon: Icon(Icons.favorite_border),
              label: const Text('Favorites'),
            ),
          ],
        ),
        body: SizedBox(),
      ),
    );
  }
}
pubspec.yaml 
name: mysample
description: "A new Flutter project."
version: 1.0.0+1
environment:
  sdk: ^3.8.0

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^2.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:
    - assets/

Screenshots or Video

Video (android)
document_5884126004636556425.mp4
Video (linux)
Screencast.From.2025-05-26.20-24-02.mp4

Logs

No response

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel stable, 3.32.0, on EndeavourOS 6.14.6-arch1-1, locale en_US.UTF-8) [98ms]
    • Flutter version 3.32.0 on channel stable at /usr/bin/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision be698c48a6 (6 days ago), 2025-05-19 12:59:14 -0700
    • Engine revision 1881800949
    • Dart version 3.8.0
    • DevTools version 2.45.1

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [1,511ms]
    • Android SDK at /home/damiano/Android/Sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /usr/lib/jvm/java-17-openjdk/bin/java
      This JDK is specified in your Flutter configuration.
      To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 17.0.15+6)
    • All Android licenses accepted.

[✓] Chrome - develop for the web [18ms]
    • CHROME_EXECUTABLE = /var/lib/flatpak/app/com.google.Chrome/current/active/files/extra/chrome

[✓] Linux toolchain - develop for Linux desktop [307ms]
    • clang version 19.1.7
    • cmake version 3.28.1
    • ninja version 1.11.1
    • pkg-config version 2.4.3
    • OpenGL core renderer: AMD Radeon Graphics (radeonsi, renoir, ACO, DRM 3.61, 6.14.6-arch1-1)
    • OpenGL core version: 4.6 (Core Profile) Mesa 25.1.1-arch1.1
    • OpenGL core shading language version: 4.60
    • OpenGL ES renderer: AMD Radeon Graphics (radeonsi, renoir, ACO, DRM 3.61, 6.14.6-arch1-1)
    • OpenGL ES version: OpenGL ES 3.2 Mesa 25.1.1-arch1.1
    • OpenGL ES shading language version: OpenGL ES GLSL ES 3.20
    • GL_EXT_framebuffer_blit: yes
    • GL_EXT_texture_format_BGRA8888: yes

[!] Android Studio (version unknown) [16ms]
    • Android Studio at /opt/android-studio/
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to determine Android Studio version.
    • android-studio-dir = /opt/android-studio/
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13368085-b895.109)

[!] Android Studio (version unknown) [14ms]
    • Android Studio at /opt/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13368085-b895.109)

[✓] Connected device (3 available) [314ms]
    • Pixel 7a (mobile) • 37281JEHN00912 • android-arm64  • Android 15 (API 35)
    • Linux (desktop)   • linux          • linux-x64      • EndeavourOS 6.14.6-arch1-1
    • Chrome (web)      • chrome         • web-javascript • Google Chrome 136.0.7103.113

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

Activity

  1. tirth-patel-nc
    added
    in triagePresently being triaged by the triage team
    on May 26, 2025

  2. tirth-patel-nc commented on May 26, 2025

    @tirth-patel-nc
    tirth-patel-nc
    on May 26, 2025
    Member

    thanks for the bug report @ferraridamiano. could you clarify what you mean by “active indicator is shifted by some pixels”? are you referring to extra space above the svg?

  3. tirth-patel-nc
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on May 26, 2025

  4. ferraridamiano commented on May 26, 2025

    @ferraridamiano
    ferraridamiano
    on May 26, 2025
    ContributorAuthor

    @tirth-patel-nc Thanks for looking into this. Apologies for the previous lack of clarity.

    Issue: The header icon (star) in the NavigationDrawer is incorrectly highlighted with a light purple pill shape when the drawer is opened.

    Expected Behavior: The star icon, being a simple header and not a NavigationDestination, should not be highlighted. The highlighting should only apply to actual NavigationDestination items based on the selectedIndex

    Details:

    • As shown in the attached videos, the star header gets the active highlight.
    • The NavigationDrawer's children are defined as:
      1. The star icon (header element, not a NavigationDestination).
      2. Three NavigationDestination elements.
    • The selectedIndex is intentionally fixed and should not be influenced by, or apply to, the header element.

    This suggests the highlighting logic might be incorrectly targeting the header.

    Edit: I just updated the example code and the videos to better see the issue

  5. github-actions
    removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on May 26, 2025

  6. tirth-patel-nc commented on May 27, 2025

    @tirth-patel-nc
    tirth-patel-nc
    on May 27, 2025
    Member

    Triage Report

    Thank you for the explanation. I was able to reproduce the issue using the provided code sample on the stable (3.32.0) and master (3.33.0-1.0.pre.228) channels on Android, iOS, & macOS. On web it is working fine.

    However I didn't observe this issue on stable (3.29.3).

    thanks to @bleroux for pointing out and confirming the regression and the commit that introduced it.

    3.29.3 3.32.0 Master
    3.29.3.mov
    3.32.0.mov
    Master.mov

    but when I specify the height parameter of the SVG, it works fine and I don’t see the glitch. I also tried using Image.asset, and when I provide both width and height, it works fine there too. I tested with the FlutterLogo widget, which has a size parameter, and it also worked fine.

    Simulator.Screen.Recording.-.iPhone.16.Plus.-.2025-05-27.at.12.52.23.mp4
    Code Sample (Same as OP) 
    import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() => runApp(const NavigationDrawerApp());

class NavigationDrawerApp extends StatelessWidget {
  const NavigationDrawerApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Navigation Drawer')),
        drawer: NavigationDrawer(
          selectedIndex: 0,
          children: [
            SvgPicture.asset('assets/star.svg', width: 150), // adding height fixes it
            NavigationDrawerDestination(
              icon: Icon(Icons.inbox_outlined),
              label: const Text('Inbox'),
            ),
            NavigationDrawerDestination(
              icon: Icon(Icons.send_outlined),
              label: const Text('Outbox'),
            ),
            NavigationDrawerDestination(
              icon: Icon(Icons.favorite_border),
              label: const Text('Favorites'),
            ),
          ],
        ),
        body: SizedBox(),
      ),
    );
  }
}
    stable (3.29.3) - flutter doctor -v 
    [✓] Flutter (Channel stable, 3.29.3, on macOS 15.4.1 24E263 darwin-arm64, locale
    en-IN) [970ms]
    • Flutter version 3.29.3 on channel stable at
      /Users/tirthpatel/Development/flutter_stable/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea121f8859 (4 weeks ago), 2025-04-11 19:10:07 +0000
    • Engine revision cf56914b32
    • Dart version 3.7.2
    • DevTools version 2.42.3

[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
    [855ms]
    • Android SDK at /Users/tirthpatel/Library/Android/sdk
    • Platform android-36, build-tools 36.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on
      this machine.
      To manually set the JDK path, use: `flutter config
      --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13355223-b631.42)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [556ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [9ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.3) [9ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13355223-b631.42)

[✓] VS Code (version 1.99.3) [8ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available) [5.5s]
    • macOS (desktop)                 • macos                 • darwin-arm64   •
      macOS 15.4.1 24E263 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         •
      macOS 15.4.1 24E263 darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript •
      Google Chrome 135.0.7049.115

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

• No issues found!
    stable (3.32.0) - flutter doctor -v 
    [✓] Flutter (Channel stable, 3.32.0, on macOS 15.4.1 24E263 darwin-arm64, locale en-IN) [446ms]
    • Flutter version 3.32.0 on channel stable at /Users/tirthpatel/Development/flutter_stable_latest/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision be698c48a6 (34 hours ago), 2025-05-19 12:59:14 -0700
    • Engine revision 1881800949
    • Dart version 3.8.0
    • DevTools version 2.45.1

[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [827ms]
    • Android SDK at /Users/tirthpatel/Library/Android/sdk
    • Platform android-36, build-tools 36.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13355223-b631.42)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [448ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [9ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.3) [8ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13355223-b631.42)

[✓] VS Code (version 1.100.2) [8ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.110.0

[✓] Connected device (2 available) [5.6s]
    • macOS (desktop) • macos  • darwin-arm64   • macOS 15.4.1 24E263 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 136.0.7103.114

[✓] Network resources [1,624ms]
    • All expected network resources are available.

• No issues found!
    master (3.33.0-1.0.pre.228) - flutter doctor -v 
    [✓] Flutter (Channel master, 3.33.0-1.0.pre.228, on macOS 15.4.1 24E263 darwin-arm64, locale en-IN) [4.1s]
    • Flutter version 3.33.0-1.0.pre.228 on channel master at /Users/tirthpatel/Development/flutter_master/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4e75d56bda (6 hours ago), 2025-05-27 07:25:42 +0800
    • Engine revision 4e75d56bda
    • Dart version 3.9.0 (build 3.9.0-172.0.dev)
    • DevTools version 2.46.0

[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [849ms]
    • Android SDK at /Users/tirthpatel/Library/Android/sdk
    • Emulator version 35.4.9.0 (build_id 13025442) (CL:N/A)
    • Platform android-36, build-tools 36.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13355223-b631.42)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [605ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [8ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.3) [8ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13355223-b631.42)

[✓] VS Code (version 1.100.2) [7ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.110.0

[✓] Connected device (2 available) [5.6s]
    • macOS (desktop) • macos  • darwin-arm64   • macOS 15.4.1 24E263 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 136.0.7103.114

[✓] Network resources [1,670ms]
    • All expected network resources are available.

• No issues found!
  7. tirth-patel-nc
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    c: regressionIt was better in the past than it is now
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.32Found to occur in 3.32
    found in release: 3.33Found to occur in 3.33
    and removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    in triagePresently being triaged by the triage team
    on May 27, 2025

  8. 2 remaining items

  9. bleroux
    added this to Nevercodeon May 27, 2025
  10. github-project-automation
    moved this to To do in Nevercodeon May 27, 2025

  11. ferraridamiano commented on May 27, 2025

    @ferraridamiano
    ferraridamiano
    on May 27, 2025
    ContributorAuthor

    @tirth-patel-nc I can confirm that the issue were not present in the previous stable release. I also confirm that if I add the height the issue is fixed

  12. github-merge-queue
    added a commit that references this issue on Jun 2, 2025

    Revert "Fix NavigationBar indicator overlay color (#164484)" (#169497)

    0b3ba80
  13. auto-submit
    closed this as completedin #169497on Jun 2, 2025
  14. github-project-automation
    moved this from To do to Done (PR merged) in Nevercodeon Jun 2, 2025
  15. tirth-patel-nc
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Jun 2, 2025
  16. flutteractionsbot
    added a commit that references this issue on Jun 5, 2025

    Revert "Fix NavigationBar indicator overlay color (flutter#164484)" (f…

    00ee00d
  17. auto-submit
    added a commit that references this issue on Jun 5, 2025

    [CP-stable]Revert "Fix NavigationBar indicator overlay color (#164484)…

    46a4c05
  18. TahaTesser
    reopened this on Jun 12, 2025
  19. github-project-automation
    moved this from Done (PR merged) to In progress in Nevercodeon Jun 12, 2025
  20. TahaTesser
    closed this as completedon Jun 12, 2025
  21. github-project-automation
    moved this from In progress to Done (PR merged) in Nevercodeon Jun 12, 2025

  22. github-actions commented on Jun 26, 2025

    @github-actions
    github-actionsbot
    on Jun 26, 2025 – with GitHub Actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  23. github-actions
    locked as resolved and limited conversation to collaborators on Jun 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

c: regressionIt was better in the past than it is nowfound in release: 3.32Found to occur in 3.32found in release: 3.33Found to occur in 3.33frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages team

Type

No type

Projects

  • Nevercode
    Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions