From e32a5c3f25101b6e2e71f077f3c9cae2f06f8620 Mon Sep 17 00:00:00 2001 From: Jayesh Jain Date: Sat, 15 Aug 2026 15:24:32 +0530 Subject: [PATCH] Respect ColorScheme.scrim in Drawer, ModalBottomSheet, and Dialog barriers Drawer's scrim, showModalBottomSheet's barrier, and showDialog's barrier all hardcoded Colors.black54 and ignored a custom ColorScheme.scrim. Each now falls back to colorScheme.scrim at the same alpha instead of the literal black54, so default behavior is unchanged but a custom scrim color set via ColorScheme.fromSeed(..., scrim: ...) is honored. Fixes #190824 --- .../material_ui/lib/src/bottom_sheet.dart | 5 ++- packages/material_ui/lib/src/dialog.dart | 2 +- packages/material_ui/lib/src/drawer.dart | 4 ++- .../change_2026_08_15_scrim_color.yaml | 3 ++ .../material_ui/test/bottom_sheet_test.dart | 31 +++++++++++++++++++ packages/material_ui/test/dialog_test.dart | 26 ++++++++++++++++ packages/material_ui/test/drawer_test.dart | 30 ++++++++++++++++++ 7 files changed, 98 insertions(+), 3 deletions(-) create mode 100644 packages/material_ui/pending_changelogs/change_2026_08_15_scrim_color.yaml diff --git a/packages/material_ui/lib/src/bottom_sheet.dart b/packages/material_ui/lib/src/bottom_sheet.dart index b1666bc3f843..ea84516c93f8 100644 --- a/packages/material_ui/lib/src/bottom_sheet.dart +++ b/packages/material_ui/lib/src/bottom_sheet.dart @@ -1342,7 +1342,10 @@ Future showModalBottomSheet({ clipBehavior: clipBehavior, constraints: constraints, isDismissible: isDismissible, - modalBarrierColor: barrierColor ?? Theme.of(context).bottomSheetTheme.modalBarrierColor, + modalBarrierColor: + barrierColor ?? + Theme.of(context).bottomSheetTheme.modalBarrierColor ?? + Theme.of(context).colorScheme.scrim.withValues(alpha: Colors.black54.a), enableDrag: enableDrag, showDragHandle: showDragHandle, settings: routeSettings, diff --git a/packages/material_ui/lib/src/dialog.dart b/packages/material_ui/lib/src/dialog.dart index 4d68231347d5..3a151840cc9e 100644 --- a/packages/material_ui/lib/src/dialog.dart +++ b/packages/material_ui/lib/src/dialog.dart @@ -1706,7 +1706,7 @@ Future showDialog({ barrierColor ?? DialogTheme.of(context).barrierColor ?? Theme.of(context).dialogTheme.barrierColor ?? - Colors.black54, + Theme.of(context).colorScheme.scrim.withValues(alpha: Colors.black54.a), barrierDismissible: barrierDismissible, barrierLabel: barrierLabel, useSafeArea: useSafeArea, diff --git a/packages/material_ui/lib/src/drawer.dart b/packages/material_ui/lib/src/drawer.dart index 5e4414ba7b3f..2ad47987c987 100644 --- a/packages/material_ui/lib/src/drawer.dart +++ b/packages/material_ui/lib/src/drawer.dart @@ -713,7 +713,9 @@ class DrawerControllerState extends State with SingleTickerPro }; final Color scrimColor = - widget.scrimColor ?? DrawerTheme.of(context).scrimColor ?? Colors.black54; + widget.scrimColor ?? + DrawerTheme.of(context).scrimColor ?? + Theme.of(context).colorScheme.scrim.withValues(alpha: Colors.black54.a); final Color effectiveScrimColor = scrimColor.withValues( alpha: scrimColor.a * _controller.value, ); diff --git a/packages/material_ui/pending_changelogs/change_2026_08_15_scrim_color.yaml b/packages/material_ui/pending_changelogs/change_2026_08_15_scrim_color.yaml new file mode 100644 index 000000000000..5fb2fc58f43a --- /dev/null +++ b/packages/material_ui/pending_changelogs/change_2026_08_15_scrim_color.yaml @@ -0,0 +1,3 @@ +changelog: | + - Fixes `Drawer`, `showModalBottomSheet`, and `showDialog` ignoring a custom `ColorScheme.scrim` and always using `Colors.black54` for their scrim/barrier. +version: patch diff --git a/packages/material_ui/test/bottom_sheet_test.dart b/packages/material_ui/test/bottom_sheet_test.dart index 59a118eb777e..9c24a771d918 100644 --- a/packages/material_ui/test/bottom_sheet_test.dart +++ b/packages/material_ui/test/bottom_sheet_test.dart @@ -1018,6 +1018,37 @@ void main() { expect(modalBarrier.color, barrierColor); }); + testWidgets('Modal barrier color respects ColorScheme.scrim when not overridden', ( + WidgetTester tester, + ) async { + final scaffoldKey = GlobalKey(); + + await tester.pumpWidget( + MaterialApp( + theme: ThemeData(colorScheme: const ColorScheme.light(scrim: Colors.red)), + home: Scaffold( + key: scaffoldKey, + body: const Center(child: Text('body')), + ), + ), + ); + + unawaited( + showModalBottomSheet( + context: scaffoldKey.currentContext!, + builder: (BuildContext context) { + return const Text('BottomSheet'); + }, + ), + ); + + await tester.pump(); + await tester.pump(const Duration(seconds: 1)); + + final ModalBarrier modalBarrier = tester.widget(find.byType(ModalBarrier).last); + expect(modalBarrier.color, isSameColorAs(Colors.red.withValues(alpha: Colors.black54.a))); + }); + testWidgets('Material3 - BottomSheet uses fallback values', (WidgetTester tester) async { const Color surfaceColor = Colors.pink; const Color surfaceTintColor = Colors.blue; diff --git a/packages/material_ui/test/dialog_test.dart b/packages/material_ui/test/dialog_test.dart index ab59e78b1081..bfc56ea65021 100644 --- a/packages/material_ui/test/dialog_test.dart +++ b/packages/material_ui/test/dialog_test.dart @@ -603,6 +603,32 @@ void main() { expect(tester.widget(find.byType(ModalBarrier).last).color, Colors.pink); }); + testWidgets('Barrier color respects ColorScheme.scrim when not overridden', ( + WidgetTester tester, + ) async { + await tester.pumpWidget( + MaterialApp( + theme: ThemeData(colorScheme: const ColorScheme.light(scrim: Colors.red)), + home: const Center(child: Text('Test')), + ), + ); + final BuildContext context = tester.element(find.text('Test')); + + unawaited( + showDialog( + context: context, + builder: (BuildContext context) { + return const Text('Dialog'); + }, + ), + ); + await tester.pumpAndSettle(); + expect( + tester.widget(find.byType(ModalBarrier).last).color, + isSameColorAs(Colors.red.withValues(alpha: Colors.black54.a)), + ); + }); + testWidgets('Dialog hides underlying semantics tree', (WidgetTester tester) async { final semantics = SemanticsTester(tester); const buttonText = 'A button covered by dialog overlay'; diff --git a/packages/material_ui/test/drawer_test.dart b/packages/material_ui/test/drawer_test.dart index 27c240efd484..11f4a061d84a 100644 --- a/packages/material_ui/test/drawer_test.dart +++ b/packages/material_ui/test/drawer_test.dart @@ -209,6 +209,36 @@ void main() { await checkScrim(const Color(0xFF323232)); }); + testWidgets('Drawer scrim respects ColorScheme.scrim when not overridden', ( + WidgetTester tester, + ) async { + Widget getScrim() { + return tester + .widget( + find.descendant( + of: find.byType(DrawerController), + matching: find.byWidgetPredicate((Widget widget) { + return widget is Semantics && widget.properties.label == 'Dismiss'; + }), + ), + ) + .child!; + } + + final scaffoldKey = GlobalKey(); + await tester.pumpWidget( + MaterialApp( + theme: ThemeData(colorScheme: const ColorScheme.light(scrim: Colors.red)), + home: Scaffold(key: scaffoldKey, drawer: const Drawer()), + ), + ); + + scaffoldKey.currentState!.openDrawer(); + await tester.pumpAndSettle(); + final scrim = getScrim() as ColoredBox; + expect(scrim.color, isSameColorAs(Colors.red.withValues(alpha: Colors.black54.a))); + }); + testWidgets('Open/close drawers by flinging', (WidgetTester tester) async { await tester.pumpWidget( const MaterialApp(