-
Notifications
You must be signed in to change notification settings - Fork 27.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support Material 3 in bottom sheet #112466
Changes from all commits
4e44c6d
4fe6b34
f4a628c
8db3d71
ea14ffd
2038d3e
32caa15
c7dedfe
0f0d45c
cc18ec9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
// Copyright 2014 The Flutter Authors. All rights reserved. | ||
// Use of this source code is governed by a BSD-style license that can be | ||
// found in the LICENSE file. | ||
|
||
import 'template.dart'; | ||
|
||
class BottomSheetTemplate extends TokenTemplate { | ||
const BottomSheetTemplate(super.blockName, super.fileName, super.tokens); | ||
|
||
@override | ||
String generate() => ''' | ||
// Generated version ${tokens["version"]} | ||
class _${blockName}DefaultsM3 extends BottomSheetThemeData { | ||
const _${blockName}DefaultsM3(this.context) | ||
: super( | ||
elevation: ${elevation("md.comp.sheet.bottom.docked.standard.container")}, | ||
modalElevation: ${elevation("md.comp.sheet.bottom.docked.modal.container")}, | ||
shape: ${shape("md.comp.sheet.bottom.docked.container")}, | ||
); | ||
|
||
final BuildContext context; | ||
|
||
@override | ||
Color? get backgroundColor => ${componentColor("md.comp.sheet.bottom.docked.container")}; | ||
|
||
@override | ||
Color? get surfaceTintColor => ${componentColor("md.comp.sheet.bottom.docked.container.surface-tint-layer")}; | ||
} | ||
'''; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
// Copyright 2014 The Flutter Authors. All rights reserved. | ||
// Use of this source code is governed by a BSD-style license that can be | ||
// found in the LICENSE file. | ||
|
||
// Flutter code sample for Material Design 3 TextFields. | ||
/// Flutter code sample for [showModalBottomSheet]. | ||
|
||
import 'package:flutter/material.dart'; | ||
|
||
void main() => runApp(const MyApp()); | ||
|
||
class MyApp extends StatelessWidget { | ||
const MyApp({super.key}); | ||
|
||
@override | ||
Widget build(BuildContext context) { | ||
return MaterialApp( | ||
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true), | ||
home: Scaffold( | ||
appBar: AppBar(title: const Text('Bottom Sheet Sample')), | ||
body: const MyStatelessWidget(), | ||
), | ||
); | ||
} | ||
} | ||
|
||
class MyStatelessWidget extends StatelessWidget { | ||
const MyStatelessWidget({super.key}); | ||
|
||
@override | ||
Widget build(BuildContext context) { | ||
return Center( | ||
child: ElevatedButton( | ||
child: const Text('showModalBottomSheet'), | ||
onPressed: () { | ||
showModalBottomSheet<void>( | ||
context: context, | ||
builder: (BuildContext context) { | ||
return SizedBox( | ||
height: 200, | ||
child: Center( | ||
child: Column( | ||
mainAxisAlignment: MainAxisAlignment.center, | ||
mainAxisSize: MainAxisSize.min, | ||
children: <Widget>[ | ||
const Text('Modal BottomSheet'), | ||
ElevatedButton( | ||
child: const Text('Close BottomSheet'), | ||
onPressed: () => Navigator.pop(context), | ||
), | ||
], | ||
), | ||
), | ||
); | ||
}, | ||
); | ||
}, | ||
), | ||
); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -274,16 +274,19 @@ class _BottomSheetState extends State<BottomSheet> { | |
@override | ||
Widget build(BuildContext context) { | ||
final BottomSheetThemeData bottomSheetTheme = Theme.of(context).bottomSheetTheme; | ||
final BottomSheetThemeData defaults = Theme.of(context).useMaterial3 ? _BottomSheetDefaultsM3(context) : const BottomSheetThemeData(); | ||
final BoxConstraints? constraints = widget.constraints ?? bottomSheetTheme.constraints; | ||
final Color? color = widget.backgroundColor ?? bottomSheetTheme.backgroundColor; | ||
final double elevation = widget.elevation ?? bottomSheetTheme.elevation ?? 0; | ||
final ShapeBorder? shape = widget.shape ?? bottomSheetTheme.shape; | ||
final Color? color = widget.backgroundColor ?? bottomSheetTheme.backgroundColor ?? defaults.backgroundColor; | ||
final Color? surfaceTintColor = bottomSheetTheme.surfaceTintColor ?? defaults.surfaceTintColor; | ||
final double elevation = widget.elevation ?? bottomSheetTheme.elevation ?? defaults.elevation ?? 0; | ||
final ShapeBorder? shape = widget.shape ?? bottomSheetTheme.shape ?? defaults.shape; | ||
final Clip clipBehavior = widget.clipBehavior ?? bottomSheetTheme.clipBehavior ?? Clip.none; | ||
|
||
Widget bottomSheet = Material( | ||
key: _childKey, | ||
color: color, | ||
elevation: elevation, | ||
surfaceTintColor: surfaceTintColor, | ||
shape: shape, | ||
clipBehavior: clipBehavior, | ||
child: NotificationListener<DraggableScrollableNotification>( | ||
|
@@ -526,10 +529,11 @@ class _ModalBottomSheetRoute<T> extends PopupRoute<T> { | |
child: Builder( | ||
builder: (BuildContext context) { | ||
final BottomSheetThemeData sheetTheme = Theme.of(context).bottomSheetTheme; | ||
final BottomSheetThemeData defaults = Theme.of(context).useMaterial3 ? _BottomSheetDefaultsM3(context) : const BottomSheetThemeData(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Are the M2 defaults really just an empty BottomSheetThemeData? I am surprised we didn't have some static constants for some of these. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah I didn't find any default value for M2 |
||
return _ModalBottomSheet<T>( | ||
route: this, | ||
backgroundColor: backgroundColor ?? sheetTheme.modalBackgroundColor ?? sheetTheme.backgroundColor, | ||
elevation: elevation ?? sheetTheme.modalElevation ?? sheetTheme.elevation, | ||
backgroundColor: backgroundColor ?? sheetTheme.modalBackgroundColor ?? sheetTheme.backgroundColor ?? defaults.backgroundColor, | ||
elevation: elevation ?? sheetTheme.modalElevation ?? defaults.modalElevation ?? sheetTheme.elevation, | ||
shape: shape, | ||
clipBehavior: clipBehavior, | ||
constraints: constraints, | ||
|
@@ -727,7 +731,7 @@ Future<T?> showModalBottomSheet<T>({ | |
clipBehavior: clipBehavior, | ||
constraints: constraints, | ||
isDismissible: isDismissible, | ||
modalBarrierColor: barrierColor, | ||
modalBarrierColor: barrierColor ?? Theme.of(context).bottomSheetTheme.modalBarrierColor, | ||
enableDrag: enableDrag, | ||
settings: routeSettings, | ||
transitionAnimationController: transitionAnimationController, | ||
|
@@ -806,3 +810,34 @@ PersistentBottomSheetController<T> showBottomSheet<T>({ | |
transitionAnimationController: transitionAnimationController, | ||
); | ||
} | ||
|
||
|
||
|
||
// BEGIN GENERATED TOKEN PROPERTIES - BottomSheet | ||
|
||
// Do not edit by hand. The code between the "BEGIN GENERATED" and | ||
// "END GENERATED" comments are generated from data in the Material | ||
// Design token database by the script: | ||
// dev/tools/gen_defaults/bin/gen_defaults.dart. | ||
|
||
// Token database version: v0_132 | ||
|
||
// Generated version v0_132 | ||
class _BottomSheetDefaultsM3 extends BottomSheetThemeData { | ||
const _BottomSheetDefaultsM3(this.context) | ||
: super( | ||
elevation: 1.0, | ||
modalElevation: 1.0, | ||
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(28.0))), | ||
); | ||
|
||
final BuildContext context; | ||
|
||
@override | ||
Color? get backgroundColor => Theme.of(context).colorScheme.surface; | ||
|
||
@override | ||
Color? get surfaceTintColor => Theme.of(context).colorScheme.surfaceTint; | ||
} | ||
|
||
// END GENERATED TOKEN PROPERTIES - BottomSheet |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice optimization.