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
This commit is contained in:
parent
9a68bffb7b
commit
1f602cb6ca
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user