Unverified Commit 1f602cb6 authored by Pierre-Louis's avatar Pierre-Louis Committed by GitHub

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].

<!-- Links -->
[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
parent 9a68bffb
......@@ -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);
}
''';
}
......@@ -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<T> extends PopupRoute<T> {
/// 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
......@@ -900,16 +900,17 @@ void main() {
),
));
final Material material = tester.widget<Material>(
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<Material>(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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment