From 1f602cb6ca116546dc16dec95cf36f68ccd117b5 Mon Sep 17 00:00:00 2001 From: Pierre-Louis <6655696+guidezpl@users.noreply.github.com> Date: Thu, 27 Apr 2023 09:28:11 +0200 Subject: [PATCH] Provide default constraints for M3 bottom sheets (#120065) This PR constrains M3 bottom sheets to 640dp max width by default. `constraints` can be used to provide different `minWidth` and `maxWidth`. This is not a breaking change per the breaking change policy. Part of https://github.com/flutter/flutter/issues/118619 Part of https://github.com/flutter/flutter/issues/111448 ## 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. - [x] 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] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. [Contributor Guide]: https://github.com/flutter/flutter/wiki/Tree-hygiene#overview [Tree Hygiene]: https://github.com/flutter/flutter/wiki/Tree-hygiene [test-exempt]: https://github.com/flutter/flutter/wiki/Tree-hygiene#tests [Flutter Style Guide]: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo [Features we expect every widget to implement]: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/wiki/Chat --- .../lib/bottom_sheet_template.dart | 8 +++++- .../lib/src/material/bottom_sheet.dart | 25 ++++++++++--------- .../test/material/bottom_sheet_test.dart | 11 ++++---- 3 files changed, 26 insertions(+), 18 deletions(-) diff --git a/dev/tools/gen_defaults/lib/bottom_sheet_template.dart b/dev/tools/gen_defaults/lib/bottom_sheet_template.dart index b6cdc10022..e355b639e6 100644 --- a/dev/tools/gen_defaults/lib/bottom_sheet_template.dart +++ b/dev/tools/gen_defaults/lib/bottom_sheet_template.dart @@ -5,7 +5,10 @@ import 'template.dart'; class BottomSheetTemplate extends TokenTemplate { - const BottomSheetTemplate(super.blockName, super.fileName, super.tokens, { + const BottomSheetTemplate( + super.blockName, + super.fileName, + super.tokens, { super.colorSchemePrefix = '_colors.', }); @@ -37,6 +40,9 @@ class _${blockName}DefaultsM3 extends BottomSheetThemeData { @override Size? get dragHandleSize => ${size("md.comp.sheet.bottom.docked.drag-handle")}; + + @override + BoxConstraints? get constraints => const BoxConstraints(maxWidth: 640.0); } '''; } diff --git a/packages/flutter/lib/src/material/bottom_sheet.dart b/packages/flutter/lib/src/material/bottom_sheet.dart index c4d587ef48..3b59572a99 100644 --- a/packages/flutter/lib/src/material/bottom_sheet.dart +++ b/packages/flutter/lib/src/material/bottom_sheet.dart @@ -210,14 +210,13 @@ class BottomSheet extends StatefulWidget { /// Defines minimum and maximum sizes for a [BottomSheet]. /// - /// Typically a bottom sheet will cover the entire width of its - /// parent. Consider limiting the width by setting smaller constraints - /// for large screens. - /// /// If null, then the ambient [ThemeData.bottomSheetTheme]'s /// [BottomSheetThemeData.constraints] will be used. If that - /// is null then the bottom sheet's size will be constrained - /// by its parent (usually a [Scaffold]). + /// is null and [ThemeData.useMaterial3] is true, then the bottom sheet + /// will have a max width of 640dp. If [ThemeData.useMaterial3] is false, then + /// the bottom sheet's size will be constrained by its parent + /// (usually a [Scaffold]). In this case, consider limiting the width by + /// setting smaller constraints for large screens. /// /// If constraints are specified (either in this property or in the /// theme), the bottom sheet will be aligned to the bottom-center of @@ -882,14 +881,13 @@ class ModalBottomSheetRoute extends PopupRoute { /// Defines minimum and maximum sizes for a [BottomSheet]. /// - /// Typically a bottom sheet will cover the entire width of its - /// parent. Consider limiting the width by setting smaller constraints - /// for large screens. - /// /// If null, the ambient [ThemeData.bottomSheetTheme]'s /// [BottomSheetThemeData.constraints] will be used. If that - /// is null, the bottom sheet's size will be constrained - /// by its parent (usually a [Scaffold]). + /// is null and [ThemeData.useMaterial3] is true, then the bottom sheet + /// will have a max width of 640dp. If [ThemeData.useMaterial3] is false, then + /// the bottom sheet's size will be constrained by its parent + /// (usually a [Scaffold]). In this case, consider limiting the width by + /// setting smaller constraints for large screens. /// /// If constraints are specified (either in this property or in the /// theme), the bottom sheet will be aligned to the bottom-center of @@ -1335,6 +1333,9 @@ class _BottomSheetDefaultsM3 extends BottomSheetThemeData { @override Size? get dragHandleSize => const Size(32, 4); + + @override + BoxConstraints? get constraints => const BoxConstraints(maxWidth: 640.0); } // END GENERATED TOKEN PROPERTIES - BottomSheet diff --git a/packages/flutter/test/material/bottom_sheet_test.dart b/packages/flutter/test/material/bottom_sheet_test.dart index 39bd42fa85..8a002286d7 100644 --- a/packages/flutter/test/material/bottom_sheet_test.dart +++ b/packages/flutter/test/material/bottom_sheet_test.dart @@ -900,16 +900,17 @@ void main() { ), )); - final Material material = tester.widget( - find.descendant( - of: find.byType(BottomSheet), - matching: find.byType(Material), - ), + final Finder finder = find.descendant( + of: find.byType(BottomSheet), + matching: find.byType(Material), ); + final Material material = tester.widget(finder); + expect(material.color, surfaceColor); expect(material.surfaceTintColor, surfaceTintColor); expect(material.elevation, 1.0); expect(material.shape, defaultShape); + expect(tester.getSize(finder).width, 640); }); testWidgets('BottomSheet has transparent shadow in material3', (WidgetTester tester) async {