mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
Step 1 of 3: Add opt-in fixing Dialog border radius to match Material Spec (#56084)
This commit is contained in:
parent
e384757fac
commit
04860d7256
@ -2,9 +2,10 @@
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
// TODO(shihaohong): remove ignoring deprecated member use analysis
|
||||
// when AlertDialog.scrollable parameter is removed. See
|
||||
// https://flutter.dev/go/scrollable-alert-dialog for more details.
|
||||
// TODO(shihaohong-Piinks): remove ignoring deprecated member use analysis
|
||||
// * when AlertDialog.scrollable parameter is removed. See
|
||||
// https://flutter.dev/go/scrollable-alert-dialog for more details.
|
||||
// * when Dialog.useMaterialBorderRadius parameter is removed.
|
||||
// ignore_for_file: deprecated_member_use_from_same_package
|
||||
|
||||
import 'dart:async';
|
||||
@ -55,7 +56,9 @@ class Dialog extends StatelessWidget {
|
||||
this.clipBehavior = Clip.none,
|
||||
this.shape,
|
||||
this.child,
|
||||
bool useMaterialBorderRadius,
|
||||
}) : assert(clipBehavior != null),
|
||||
useMaterialBorderRadius = useMaterialBorderRadius ?? false,
|
||||
super(key: key);
|
||||
|
||||
/// {@template flutter.material.dialog.backgroundColor}
|
||||
@ -117,7 +120,8 @@ class Dialog extends StatelessWidget {
|
||||
///
|
||||
/// Defines the dialog's [Material.shape].
|
||||
///
|
||||
/// The default shape is a [RoundedRectangleBorder] with a radius of 2.0.
|
||||
/// The default shape is a [RoundedRectangleBorder] with a radius of 2.0
|
||||
/// (temporarily, set [useMaterialBorderRadius] to match Material guidelines).
|
||||
/// {@endtemplate}
|
||||
final ShapeBorder shape;
|
||||
|
||||
@ -126,8 +130,19 @@ class Dialog extends StatelessWidget {
|
||||
/// {@macro flutter.widgets.child}
|
||||
final Widget child;
|
||||
|
||||
// TODO(johnsonmh): Update default dialog border radius to 4.0 to match material spec.
|
||||
/// Indicates whether the [Dialog.shape]'s default [RoundedRectangleBorder]
|
||||
/// should have a radius of 4.0 pixels to match Material Design, or use the
|
||||
/// prior default of 2.0 pixels.
|
||||
@Deprecated(
|
||||
'Set useMaterialBorderRadius to `true`. This parameter will be removed and '
|
||||
'was introduced to migrate Dialog to the correct border radius by default. '
|
||||
'This feature was deprecated after v1.18.0.'
|
||||
)
|
||||
final bool useMaterialBorderRadius;
|
||||
|
||||
static const RoundedRectangleBorder _defaultDialogShape =
|
||||
RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4.0)));
|
||||
static const RoundedRectangleBorder _oldDefaultDialogShape =
|
||||
RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(2.0)));
|
||||
static const double _defaultElevation = 24.0;
|
||||
|
||||
@ -151,7 +166,11 @@ class Dialog extends StatelessWidget {
|
||||
child: Material(
|
||||
color: backgroundColor ?? dialogTheme.backgroundColor ?? Theme.of(context).dialogBackgroundColor,
|
||||
elevation: elevation ?? dialogTheme.elevation ?? _defaultElevation,
|
||||
shape: shape ?? dialogTheme.shape ?? _defaultDialogShape,
|
||||
shape: shape ?? dialogTheme.shape ?? (
|
||||
useMaterialBorderRadius ?
|
||||
_defaultDialogShape :
|
||||
_oldDefaultDialogShape
|
||||
),
|
||||
type: MaterialType.card,
|
||||
clipBehavior: clipBehavior,
|
||||
child: child,
|
||||
@ -260,8 +279,10 @@ class AlertDialog extends StatelessWidget {
|
||||
this.clipBehavior = Clip.none,
|
||||
this.shape,
|
||||
this.scrollable = false,
|
||||
bool useMaterialBorderRadius,
|
||||
}) : assert(contentPadding != null),
|
||||
assert(clipBehavior != null),
|
||||
useMaterialBorderRadius = useMaterialBorderRadius ?? false,
|
||||
super(key: key);
|
||||
|
||||
/// The (optional) title of the dialog is displayed in a large font at the top
|
||||
@ -449,6 +470,16 @@ class AlertDialog extends StatelessWidget {
|
||||
)
|
||||
final bool scrollable;
|
||||
|
||||
/// Indicates whether the [Dialog.shape]'s default [RoundedRectangleBorder]
|
||||
/// should have a radius of 4.0 pixels to match Material Design, or use the
|
||||
/// prior default of 2.0 pixels.
|
||||
@Deprecated(
|
||||
'Set useMaterialBorderRadius to `true`. This parameter will be removed and '
|
||||
'was introduced to migrate Dialog to the correct border radius by default. '
|
||||
'This feature was deprecated after v1.18.0.'
|
||||
)
|
||||
final bool useMaterialBorderRadius;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
assert(debugCheckHasMaterialLocalizations(context));
|
||||
@ -560,6 +591,7 @@ class AlertDialog extends StatelessWidget {
|
||||
clipBehavior: clipBehavior,
|
||||
shape: shape,
|
||||
child: dialogChild,
|
||||
useMaterialBorderRadius: useMaterialBorderRadius,
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -719,8 +751,10 @@ class SimpleDialog extends StatelessWidget {
|
||||
this.elevation,
|
||||
this.semanticLabel,
|
||||
this.shape,
|
||||
bool useMaterialBorderRadius,
|
||||
}) : assert(titlePadding != null),
|
||||
assert(contentPadding != null),
|
||||
useMaterialBorderRadius = useMaterialBorderRadius ?? false,
|
||||
super(key: key);
|
||||
|
||||
/// The (optional) title of the dialog is displayed in a large font at the top
|
||||
@ -789,6 +823,16 @@ class SimpleDialog extends StatelessWidget {
|
||||
/// {@macro flutter.material.dialog.shape}
|
||||
final ShapeBorder shape;
|
||||
|
||||
/// Indicates whether the [Dialog.shape]'s default [RoundedRectangleBorder]
|
||||
/// should have a radius of 4.0 pixels to match Material Design, or use the
|
||||
/// prior default of 2.0 pixels.
|
||||
@Deprecated(
|
||||
'Set useMaterialBorderRadius to `true`. This parameter will be removed and '
|
||||
'was introduced to migrate Dialog to the correct border radius by default. '
|
||||
'This feature was deprecated after v1.18.0.'
|
||||
)
|
||||
final bool useMaterialBorderRadius;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
assert(debugCheckHasMaterialLocalizations(context));
|
||||
@ -848,6 +892,7 @@ class SimpleDialog extends StatelessWidget {
|
||||
elevation: elevation,
|
||||
shape: shape,
|
||||
child: dialogChild,
|
||||
useMaterialBorderRadius: useMaterialBorderRadius,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -503,6 +503,7 @@ class _DatePickerDialogState extends State<_DatePickerDialog> {
|
||||
),
|
||||
),
|
||||
insetPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
|
||||
// TODO(Piinks): remove once border radius migration is complete
|
||||
// The default dialog shape is radius 2 rounded rect, but the spec has
|
||||
// been updated to 4, so we will use that here for the Date Picker, but
|
||||
// only if there isn't one provided in the theme.
|
||||
|
||||
@ -407,9 +407,7 @@ class _DateRangePickerDialogState extends State<_DateRangePickerDialog> {
|
||||
final DialogTheme dialogTheme = Theme.of(context).dialogTheme;
|
||||
size = orientation == Orientation.portrait ? _inputPortraitDialogSize : _inputLandscapeDialogSize;
|
||||
insetPadding = const EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0);
|
||||
// The default dialog shape is radius 2 rounded rect, but the spec has
|
||||
// been updated to 4, so we will use that here for the Input Date Range
|
||||
// Picker, but only if there isn't one provided in the theme.
|
||||
// TODO(Piinks): remove once border radius migration is complete
|
||||
shape = dialogTheme.shape ?? const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(4.0))
|
||||
);
|
||||
|
||||
@ -23,6 +23,10 @@ import 'theme.dart';
|
||||
import 'theme_data.dart';
|
||||
import 'time.dart';
|
||||
|
||||
// TODO(Piinks): remove ignoring deprecated member use analysis
|
||||
// * when Dialog.useMaterialBorderRadius parameter is removed.
|
||||
// ignore_for_file: deprecated_member_use_from_same_package
|
||||
|
||||
// Examples can assume:
|
||||
// BuildContext context;
|
||||
|
||||
@ -1501,12 +1505,24 @@ class _TimePickerDialog extends StatefulWidget {
|
||||
const _TimePickerDialog({
|
||||
Key key,
|
||||
@required this.initialTime,
|
||||
bool useMaterialBorderRadius,
|
||||
}) : assert(initialTime != null),
|
||||
useMaterialBorderRadius = useMaterialBorderRadius ?? false,
|
||||
super(key: key);
|
||||
|
||||
/// The time initially selected when the dialog is shown.
|
||||
final TimeOfDay initialTime;
|
||||
|
||||
/// Indicates whether the [Dialog.shape]'s default [RoundedRectangleBorder]
|
||||
/// should have a radius of 4.0 pixels to match Material Design, or use the
|
||||
/// prior default of 2.0 pixels.
|
||||
@Deprecated(
|
||||
'Set useMaterialBorderRadius to `true`. This parameter will be removed and '
|
||||
'was introduced to migrate Dialog to the correct border radius by default. '
|
||||
'This feature was deprecated after v1.18.0.'
|
||||
)
|
||||
final bool useMaterialBorderRadius;
|
||||
|
||||
@override
|
||||
_TimePickerDialogState createState() => _TimePickerDialogState();
|
||||
}
|
||||
@ -1650,6 +1666,7 @@ class _TimePickerDialogState extends State<_TimePickerDialog> {
|
||||
);
|
||||
|
||||
final Dialog dialog = Dialog(
|
||||
useMaterialBorderRadius: widget.useMaterialBorderRadius,
|
||||
child: OrientationBuilder(
|
||||
builder: (BuildContext context, Orientation orientation) {
|
||||
final Widget header = _TimePickerHeader(
|
||||
@ -1744,6 +1761,11 @@ class _TimePickerDialogState extends State<_TimePickerDialog> {
|
||||
/// The returned Future resolves to the time selected by the user when the user
|
||||
/// closes the dialog. If the user cancels the dialog, null is returned.
|
||||
///
|
||||
/// The [useMaterialBorderRadius] parameter specifies whether th default
|
||||
/// [Dialog.shape] of the time picker, a [RoundedRectangleBorder], should have a
|
||||
/// radius of 4.0 pixels to match Material Design, or use the prior default of
|
||||
/// 2.0 pixels.
|
||||
///
|
||||
/// {@tool snippet}
|
||||
/// Show a dialog with [initialTime] equal to the current time.
|
||||
///
|
||||
@ -1806,13 +1828,22 @@ Future<TimeOfDay> showTimePicker({
|
||||
TransitionBuilder builder,
|
||||
bool useRootNavigator = true,
|
||||
RouteSettings routeSettings,
|
||||
@Deprecated(
|
||||
'Set useMaterialBorderRadius to `true`. This parameter will be removed and '
|
||||
'was introduced to migrate Dialog to the correct border radius by default. '
|
||||
'This feature was deprecated after v1.18.0.'
|
||||
)
|
||||
bool useMaterialBorderRadius,
|
||||
}) async {
|
||||
assert(context != null);
|
||||
assert(initialTime != null);
|
||||
assert(useRootNavigator != null);
|
||||
assert(debugCheckHasMaterialLocalizations(context));
|
||||
|
||||
final Widget dialog = _TimePickerDialog(initialTime: initialTime);
|
||||
final Widget dialog = _TimePickerDialog(
|
||||
initialTime: initialTime,
|
||||
useMaterialBorderRadius: useMaterialBorderRadius ?? false,
|
||||
);
|
||||
return await showDialog<TimeOfDay>(
|
||||
context: context,
|
||||
useRootNavigator: useRootNavigator,
|
||||
|
||||
@ -44,7 +44,7 @@ RenderParagraph _getTextRenderObjectFromDialog(WidgetTester tester, String text)
|
||||
return tester.element<StatelessElement>(find.descendant(of: find.byType(AlertDialog), matching: find.text(text))).renderObject as RenderParagraph;
|
||||
}
|
||||
|
||||
const ShapeBorder _defaultDialogShape = RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(2.0)));
|
||||
const ShapeBorder _defaultDialogShape = RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4.0)));
|
||||
|
||||
void main() {
|
||||
testWidgets('Dialog is scrollable', (WidgetTester tester) async {
|
||||
@ -94,6 +94,7 @@ void main() {
|
||||
title: Text('Title'),
|
||||
content: Text('Y'),
|
||||
actions: <Widget>[ ],
|
||||
useMaterialBorderRadius: true,
|
||||
);
|
||||
await tester.pumpWidget(_buildAppWithDialog(dialog, theme: ThemeData(brightness: Brightness.dark)));
|
||||
|
||||
@ -189,6 +190,7 @@ void main() {
|
||||
const AlertDialog dialog = AlertDialog(
|
||||
actions: <Widget>[ ],
|
||||
shape: null,
|
||||
useMaterialBorderRadius: true,
|
||||
);
|
||||
await tester.pumpWidget(_buildAppWithDialog(dialog));
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user