Make the barrier panel on the Material Drawer non-dismissible #164810

romanejaquez · 2025-03-07T19:56:17Z

This PR entails making the modal barrier behind the Material Drawer dismissible / non-dismissible via a Scaffold flag named "drawerBarrierDismissible", as in:

Scaffold(
   drawerBarrierDismissible: false, // defaults to true so it behaves as normal
   ....
)

This is so as to force the Drawer to be opened / closed programmatically using either:

Scaffold.of(context).openEndDrawer() / openDrawer()

or

Scaffold.of(Utils.adminNav.currentContext!).closeDrawer() / closeEndDrawer()

and the user not closing the Drawer upon tapping on the modal barrier.

Pre-launch Checklist

I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
I read the [Tree Hygiene] wiki page, which explains my responsibilities.
I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
I signed the [CLA].
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is [test-exempt].
I followed the [breaking change policy] and added [Data Driven Fixes] where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on [Discord].

…roperty named drawerDismissible

packages/flutter/lib/src/material/drawer.dart

dkwingsmt · 2025-04-04T18:07:49Z

packages/flutter/lib/src/material/drawer.dart

+  // If set to false, prevents the barrier behind the [Drawer] from being dismissed.
+  // Defaults to true. The value of this flag also gets inherited by the parent Scaffold,
+  // or can be overridden if a [DrawerController] is extended and this value set accordingly.
+  final bool drawerDismissible;


I wonder why we call it drawerDismissible here instead of simply dismissible, since this is already known as a DrawerController. (I know some other properties are also prefixed with "drawer", which also appears weird to me.)

I'd totally be open to call it dismissible - I was just trying to keep the existing convention which I also thought it was a bit redundant but didn't want to have to change the rest if there was a purpose for it.

Got it. Can you rename it to dismissible?

dkwingsmt · 2025-04-04T18:08:18Z

packages/flutter/lib/src/material/scaffold.dart

+  /// If false, and a [drawer] is specified, then the barrier behind the drawer should not
+  /// respond to a tap event and thus remain open. The default behavior is to close upon the
+  /// user tapping on the barrier.


Same doc style guide problem as above.

+1, this should be split into 2 paragraphs so that the first paragraph is a single sentence, per the styleguide.

dkwingsmt · 2025-04-04T18:15:39Z

dev/a11y_assessments/test/drawer_test.dart

@@ -27,4 +27,109 @@ void main() {
    await tester.pumpAndSettle();
    expect(findHeadingLevelOnes, findsOne);
  });
+
+  testWidgets('drawer is dismissible', (WidgetTester tester) async {


Unless it's intentional, test cases should reside in packages/flutter/test/material/drawer_test.dart, not a11y_assessments.

no, not intentional. I actually saw some of the other drawer tests there so I wanted to put them along with the rest, but these can easily be moved wherever is more appropriate.

Co-authored-by: Tong Mu <[email protected]>

…missible"; moved tests topackages/flutter/test/material/drawer_test.dart

dkwingsmt · 2025-04-17T17:31:06Z

Can you move the test to the unit test file? (packages/flutter/test/material/drawer_test.dart) Also there are some analyser issues.



   info • Missing a newline at the end of the file • dev/a11y_assessments/lib/use_cases/drawer.dart:80:2 • eol_at_end_of_file
   info • The value of the argument is redundant because it matches the default value • packages/flutter/test/material/drawer_test.dart:772:30 • avoid_redundant_argument_values
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:774:54 • prefer_const_constructors
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:776:22 • prefer_const_constructors
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:779:20 • prefer_const_constructors
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:785:20 • prefer_const_constructors
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:786:22 • prefer_const_constructors
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:794:5 • always_specify_types
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:823:5 • always_specify_types
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:826:5 • always_specify_types
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:830:5 • always_specify_types
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:830:32 • prefer_const_constructors
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:831:5 • always_specify_types
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:850:54 • prefer_const_constructors
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:852:22 • prefer_const_constructors
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:855:20 • prefer_const_constructors
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:861:20 • prefer_const_constructors
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:862:22 • prefer_const_constructors
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:870:5 • always_specify_types
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:899:5 • always_specify_types
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:902:5 • always_specify_types
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:906:5 • always_specify_types
   info • Use 'const' with the constructor to improve performance • packages/flutter/test/material/drawer_test.dart:906:32 • prefer_const_constructors
   info • Missing type annotation • packages/flutter/test/material/drawer_test.dart:907:5 • always_specify_types

…ally_assessments; left the ones there as they were before

dkwingsmt · 2025-04-21T17:53:51Z

One analyzer issue missing

   info â�¢ Missing a newline at the end of the file â�¢ packages/flutter/test/material/drawer_test.dart:1005:2 â�¢ eol_at_end_of_file

dkwingsmt

LGTM

packages/flutter/test/material/drawer_test.dart

…omanejaquez/flutter into drawer_barrier_non_dismissible

justinmc

Just a few small things here, and it looks like the analyzer is failing. Thank you for the PR!

Is there an issue for this by the way?

justinmc · 2025-04-21T18:18:10Z

packages/flutter/lib/src/material/scaffold.dart

+  /// If false, and a [drawer] is specified, then the barrier behind the drawer should not
+  /// respond to a tap event and thus remain open. The default behavior is to close upon the
+  /// user tapping on the barrier.


+1, this should be split into 2 paragraphs so that the first paragraph is a single sentence, per the styleguide.

justinmc · 2025-04-21T18:18:51Z

packages/flutter/test/material/drawer_test.dart

+      ),
+    );
+
+    // check the flag is set at the Scaffold level


Nit: Capital letter at the start and period at the end, here and elsewhere.

Took care of the comments above. However for the comment on the scaffold.dart, for the first sentence I had to split it into 2 because it would exceed the max length on a comment line.
Fixed the punctuation and capitalization on the other comments - thank you for catching that.

justinmc · 2025-04-21T18:19:30Z

packages/flutter/test/material/drawer_test.dart

@@ -851,3 +1003,5 @@ void main() {
    });
  });
 }
+


Remove these newlines.

gotcha - addressed the newline issue on the drawer_test.dart, but for some reason the Linux analyzer keeps barking on the newline not being added.

Co-authored-by: Tong Mu <[email protected]>

romanejaquez · 2025-04-21T18:36:44Z

Just a few small things here, and it looks like the analyzer is failing. Thank you for the PR!

Is there an issue for this by the way?

dkwingsmt · 2025-04-23T18:23:12Z

The analyzer errors seem to be only format errors, which can be resolved by running dart format . under the packages/flutter directory.

romanejaquez · 2025-04-23T18:24:40Z

The analyzer errors seem to be only format errors, which can be resolved by running dart format . under the packages/flutter directory.

will do 👍

…omanejaquez/flutter into drawer_barrier_non_dismissible

dkwingsmt · 2025-05-01T01:20:31Z

Hi, the tree-status red check is not related to your PR, but actually that Flutter's CI being flaky. It will resolve with time.

I've requested @/justinmc for a secondary review. After a 2nd approval we can land this PR. You're not needed to do anything now (unless you want to tweak something, of course). :)

romanejaquez · 2025-05-01T01:22:58Z

Hi, the tree-status red check is not related to your PR, but actually that Flutter's CI being flaky. It will resolve with time.

I've requested @/justinmc for a secondary review. After a 2nd approval we can land this PR.

Sweet! Yeah I noticed that it succeeds one time, then it fails the other - so i thought of kicking it off once again and try my luck. It'd be great for this to make it in. Thanks @dkwingsmt for your help!

justinmc

LGTM with nits 👍

justinmc · 2025-05-01T17:39:37Z

packages/flutter/lib/src/material/scaffold.dart

+  /// If false, and a [drawer] is specified, then the barrier behind the drawer should not respond to a tap event and thus remain open.
+  /// The default behavior is to close upon the user tapping on the barrier.


There should be an empty line of /// in between these two.

Also, check the 80 character line limit.

justinmc · 2025-05-01T17:42:48Z

packages/flutter/lib/src/material/drawer.dart

@@ -339,6 +339,7 @@ class DrawerController extends StatefulWidget {
    this.scrimColor,
    this.edgeDragWidth,
    this.enableOpenDragGesture = true,
+    this.dismissible = true,


Nit: Maybe this should be called barrierDismissible or something like that to avoid people thinking that it means the drawer can not be closed at all? A bunch of routes like ModalRoute have barrierDismissible properties.

I'm happy to defer to you though @romanejaquez, if you think the current name is better then let's stick with it.

Similar naming in an in-flight PR: #166896

so you suggest naming it "barrierDismissible"? I kinda like it more than "drawerDismissible" now. I think we can change it to "barrierDismissible" across the board. how about "drawerBarrierDismissible"? too long?

justinmc · 2025-05-01T17:43:48Z

packages/flutter/lib/src/material/scaffold.dart

@@ -1708,6 +1708,7 @@ class Scaffold extends StatefulWidget {
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
+    this.drawerDismissible = true,


I guess this would become drawerBarrierDismissible if we went with that name from my other comment.

I thought drawerDismissible was more descriptive when it is set via the Scaffold, to go along with the other related drawer-related properties. I don't mind making it dismissible on both sides if y'all are ok with it. However, after @justinmc comment, i feel like we should rename it to drawerBarrierDismissible. Would it be too long of a name?

justinmc · 2025-05-01T17:45:51Z

packages/flutter/test/material/drawer_test.dart

+    final ScaffoldState state = tester.firstState(find.byType(Scaffold));
+    state.openEndDrawer();
+
+    await tester.pump();


Do you need this initial pump if you also pump a duration?

nah, removed it - must've been left over from my tests.

justinmc · 2025-05-01T17:46:00Z

packages/flutter/test/material/drawer_test.dart

+    state.openEndDrawer();
+
+    await tester.pump();
+    await tester.pump(const Duration(seconds: 1));


Would this be more accurate as 246ms?

flutter/packages/flutter/lib/src/material/drawer.dart

Line 63 in 2e9b38d

const Duration _kBaseSettleDuration = Duration(milliseconds: 246);

I might be dumb but why isn't this a pumpAndSettle?

replaced it with the pumpAndSettle and it worked as well, which I think is cleaner. I believe I was testing for the duration of the animation of the drawer, which was another PR that I had related to it. Will replace with the pumpAndSettle instead.

justinmc · 2025-05-01T17:47:02Z

packages/flutter/test/material/drawer_test.dart

+
+    expect(find.byType(Drawer), findsExactly(1));
+
+    // Tap on the modal barrier.


Did you mean to delete this comment?

yeah meant to remove that one. Will remove it.

make the barrier panel on the Material Drawer non-dismissible via a p…

cbc5f5b

…roperty named drawerDismissible

romanejaquez requested a review from matanlurey as a code owner March 7, 2025 19:56

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Mar 7, 2025

dkwingsmt self-requested a review March 19, 2025 18:21

dkwingsmt reviewed Apr 4, 2025

View reviewed changes

romanejaquez and others added 2 commits April 4, 2025 14:31

Update packages/flutter/lib/src/material/drawer.dart

80a5cfd

Co-authored-by: Tong Mu <[email protected]>

renamed DrawerController property "dismissible" instead of "drawerDis…

e108277

…missible"; moved tests topackages/flutter/test/material/drawer_test.dart

matanlurey removed their request for review April 9, 2025 18:56

Merge branch 'master' into drawer_barrier_non_dismissible

60e7a23

romanejaquez added 2 commits April 17, 2025 15:41

fixed analyzer issues with drawer tests; removed previous tests from …

bf9dd97

…ally_assessments; left the ones there as they were before

Merge branch 'master' into drawer_barrier_non_dismissible

6194cbc

dkwingsmt approved these changes Apr 21, 2025

View reviewed changes

packages/flutter/test/material/drawer_test.dart Outdated Show resolved Hide resolved

packages/flutter/test/material/drawer_test.dart Outdated Show resolved Hide resolved

romanejaquez added 2 commits April 21, 2025 14:06

fixing one more analyzer issue

0e932f6

Merge branch 'drawer_barrier_non_dismissible' of https://github.com/r…

4fc0072

…omanejaquez/flutter into drawer_barrier_non_dismissible

justinmc reviewed Apr 21, 2025

View reviewed changes

romanejaquez and others added 3 commits April 21, 2025 14:35

addressed PR comments

8ce48c7

Update packages/flutter/test/material/drawer_test.dart

6cbecca

Co-authored-by: Tong Mu <[email protected]>

Update packages/flutter/test/material/drawer_test.dart

626a7fd

Co-authored-by: Tong Mu <[email protected]>

Merge branch 'master' into drawer_barrier_non_dismissible

31a86d7

romanejaquez added 2 commits April 23, 2025 16:03

ran dart format on drawer_test file to fix linux analyzer issues

7be3d63

Merge branch 'drawer_barrier_non_dismissible' of https://github.com/r…

7b18c89

…omanejaquez/flutter into drawer_barrier_non_dismissible

dkwingsmt requested a review from justinmc April 23, 2025 22:24

romanejaquez added 2 commits April 24, 2025 09:36

Merge branch 'master' into drawer_barrier_non_dismissible

f9566d9

Merge branch 'master' into drawer_barrier_non_dismissible

74166c3

Merge branch 'master' into drawer_barrier_non_dismissible

6a8f91b

justinmc approved these changes May 1, 2025

View reviewed changes

romanejaquez added 3 commits May 4, 2025 12:51

applied review comments

1452f78

applied review comments

c40f9aa

updated reference to drawerBarrierDismissible

3aeb46c

@@ @@ -851,3 +1003,5 @@ void main() { @@
                   });
                 });
               }

		/// If false, and a [drawer] is specified, then the barrier behind the drawer should not respond to a tap event and thus remain open.
		/// The default behavior is to close upon the user tapping on the barrier.


		expect(find.byType(Drawer), findsExactly(1));

		// Tap on the modal barrier.

Make the barrier panel on the Material Drawer non-dismissible #164810

Are you sure you want to change the base?

Make the barrier panel on the Material Drawer non-dismissible #164810

Conversation

romanejaquez commented Mar 7, 2025 • edited Loading

Pre-launch Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dkwingsmt commented Apr 17, 2025

dkwingsmt commented Apr 21, 2025

dkwingsmt left a comment

Choose a reason for hiding this comment

justinmc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romanejaquez commented Apr 21, 2025

dkwingsmt commented Apr 23, 2025

romanejaquez commented Apr 23, 2025

dkwingsmt commented May 1, 2025 • edited Loading

romanejaquez commented May 1, 2025

justinmc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romanejaquez May 1, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romanejaquez May 1, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romanejaquez commented Mar 7, 2025 •

edited

Loading

dkwingsmt commented May 1, 2025 •

edited

Loading

romanejaquez May 1, 2025 •

edited

Loading

romanejaquez May 1, 2025 •

edited

Loading