fix: clip ink highlights in NavigationDrawer when footer is present (#181050)
Fixes: #180233
| Before | After |
|--------|-------|
| <img width="498" height="459" alt="image"
src="https://github.com/user-attachments/assets/9b301178-0f3f-4dfb-89d7-30e9bdc7442a"
/> | <img width="640" height="607" alt="image"
src="https://github.com/user-attachments/assets/13a15f70-32df-42fd-ab14-56629de0a004"
/> |
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [ ] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
diff --git a/packages/flutter/lib/src/material/navigation_drawer.dart b/packages/flutter/lib/src/material/navigation_drawer.dart
index 6f78f50..8a16764 100644
--- a/packages/flutter/lib/src/material/navigation_drawer.dart
+++ b/packages/flutter/lib/src/material/navigation_drawer.dart
@@ -191,7 +191,12 @@
child: Column(
children: <Widget>[
?header,
- Expanded(child: ListView(children: wrappedChildren)),
+ Expanded(
+ child: Material(
+ type: MaterialType.transparency,
+ child: ListView(children: wrappedChildren),
+ ),
+ ),
?footer,
],
),
diff --git a/packages/flutter/test/material/navigation_drawer_test.dart b/packages/flutter/test/material/navigation_drawer_test.dart
index a35af5f..8b90468 100644
--- a/packages/flutter/test/material/navigation_drawer_test.dart
+++ b/packages/flutter/test/material/navigation_drawer_test.dart
@@ -544,6 +544,53 @@
);
expect(tester.getSize(find.byType(NavigationDrawer)), Size.zero);
});
+
+ // Regression test for https://github.com/flutter/flutter/issues/180233
+ testWidgets(
+ 'NavigationDrawer ink effects are bounded within scrollable area when footer is present',
+ (WidgetTester tester) async {
+ final scaffoldKey = GlobalKey<ScaffoldState>();
+ widgetSetup(tester, 800, viewHeight: 400);
+
+ await tester.pumpWidget(
+ _buildWidget(
+ scaffoldKey,
+ NavigationDrawer(
+ footer: const Padding(padding: EdgeInsets.all(16.0), child: Text('Footer')),
+ children: <Widget>[
+ for (int i = 0; i < 10; i++)
+ NavigationDrawerDestination(icon: const Icon(Icons.home), label: Text('Item $i')),
+ ],
+ ),
+ ),
+ );
+
+ scaffoldKey.currentState!.openDrawer();
+ await tester.pumpAndSettle();
+
+ final Finder footerFinder = find
+ .ancestor(of: find.text('Footer'), matching: find.byType(Padding))
+ .first;
+ expect(footerFinder, findsOneWidget);
+ final Rect footerRect = tester.getRect(footerFinder);
+
+ final Finder inkWellFinder = find.descendant(
+ of: find.byType(NavigationDrawerDestination).first,
+ matching: find.byType(InkWell),
+ );
+ expect(inkWellFinder, findsOneWidget);
+
+ final inkMaterial = Material.of(tester.element(inkWellFinder)) as RenderBox;
+
+ final Offset inkMaterialTopLeft = inkMaterial.localToGlobal(Offset.zero);
+ final Offset inkMaterialBottomRight = inkMaterial.localToGlobal(
+ Offset(inkMaterial.size.width, inkMaterial.size.height),
+ );
+ final inkMaterialRect = Rect.fromPoints(inkMaterialTopLeft, inkMaterialBottomRight);
+
+ expect(inkMaterialRect.bottom, equals(footerRect.top));
+ },
+ );
}
Widget _buildWidget(GlobalKey<ScaffoldState> scaffoldKey, Widget child, {bool? useMaterial3}) {