Add clipBehavior to DialogTheme (#147635)

Fixes flutter/flutter#147634

Author: ValentinVignal

dev/tools/gen_defaults/lib/dialog_template.dart

@@ -18,6 +18,7 @@ class _${blockName}DefaultsM3 extends DialogTheme {
         alignment: Alignment.center,
         elevation: ${elevation("md.comp.dialog.container")},
         shape: ${shape("md.comp.dialog.container")},
+        clipBehavior: Clip.none,
       );
 
   final BuildContext context;
@@ -54,7 +55,7 @@ class DialogFullscreenTemplate extends TokenTemplate {
   @override
   String generate() => '''
 class _${blockName}DefaultsM3 extends DialogTheme {
-  const _${blockName}DefaultsM3(this.context);
+  const _${blockName}DefaultsM3(this.context): super(clipBehavior: Clip.none);
 
   final BuildContext context;
 

packages/flutter/lib/src/material/dialog.dart

@@ -55,7 +55,7 @@ class Dialog extends StatelessWidget {
     this.insetAnimationDuration = const Duration(milliseconds: 100),
     this.insetAnimationCurve = Curves.decelerate,
     this.insetPadding,
-    this.clipBehavior = Clip.none,
+    this.clipBehavior,
     this.shape,
     this.alignment,
     this.child,
@@ -186,9 +186,10 @@ class Dialog extends StatelessWidget {
   /// See the enum [Clip] for details of all possible options and their common
   /// use cases.
   ///
-  /// Defaults to [Clip.none].
+  /// If null, then [DialogTheme.clipBehavior] is used. If that is also null,
+  /// defaults to [Clip.none].
   /// {@endtemplate}
-  final Clip clipBehavior;
+  final Clip? clipBehavior;
 
   /// {@template flutter.material.dialog.shape}
   /// The shape of this dialog's border.
@@ -244,7 +245,7 @@ class Dialog extends StatelessWidget {
             surfaceTintColor: surfaceTintColor ?? dialogTheme.surfaceTintColor ?? defaults.surfaceTintColor,
             shape: shape ?? dialogTheme.shape ?? defaults.shape!,
             type: MaterialType.card,
-            clipBehavior: clipBehavior,
+            clipBehavior: clipBehavior ?? dialogTheme.clipBehavior ?? defaults.clipBehavior!,
             child: child,
           ),
         ),
@@ -393,7 +394,7 @@ class AlertDialog extends StatelessWidget {
     this.surfaceTintColor,
     this.semanticLabel,
     this.insetPadding,
-    this.clipBehavior = Clip.none,
+    this.clipBehavior,
     this.shape,
     this.alignment,
     this.scrollable = false,
@@ -686,7 +687,7 @@ class AlertDialog extends StatelessWidget {
   final EdgeInsets? insetPadding;
 
   /// {@macro flutter.material.dialog.clipBehavior}
-  final Clip clipBehavior;
+  final Clip? clipBehavior;
 
   /// {@macro flutter.material.dialog.shape}
   final ShapeBorder? shape;
@@ -920,7 +921,7 @@ class _AdaptiveAlertDialog extends AlertDialog {
     super.surfaceTintColor,
     super.semanticLabel,
     super.insetPadding,
-    super.clipBehavior = Clip.none,
+    super.clipBehavior,
     super.shape,
     super.alignment,
     super.scrollable = false,
@@ -1118,7 +1119,7 @@ class SimpleDialog extends StatelessWidget {
     this.surfaceTintColor,
     this.semanticLabel,
     this.insetPadding,
-    this.clipBehavior = Clip.none,
+    this.clipBehavior,
     this.shape,
     this.alignment,
   });
@@ -1195,7 +1196,7 @@ class SimpleDialog extends StatelessWidget {
   final EdgeInsets? insetPadding;
 
   /// {@macro flutter.material.dialog.clipBehavior}
-  final Clip clipBehavior;
+  final Clip? clipBehavior;
 
   /// {@macro flutter.material.dialog.shape}
   final ShapeBorder? shape;
@@ -1606,6 +1607,7 @@ class _DialogDefaultsM2 extends DialogTheme {
         alignment: Alignment.center,
         elevation: 24.0,
         shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4.0))),
+        clipBehavior: Clip.none,
       );
 
   final BuildContext context;
@@ -1644,6 +1646,7 @@ class _DialogDefaultsM3 extends DialogTheme {
         alignment: Alignment.center,
         elevation: 6.0,
         shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(28.0))),
+        clipBehavior: Clip.none,
       );
 
   final BuildContext context;
@@ -1682,7 +1685,7 @@ class _DialogDefaultsM3 extends DialogTheme {
 //   dev/tools/gen_defaults/bin/gen_defaults.dart.
 
 class _DialogFullscreenDefaultsM3 extends DialogTheme {
-  const _DialogFullscreenDefaultsM3(this.context);
+  const _DialogFullscreenDefaultsM3(this.context): super(clipBehavior: Clip.none);
 
   final BuildContext context;
 

packages/flutter/lib/src/material/dialog_theme.dart

@@ -40,6 +40,7 @@ class DialogTheme with Diagnosticable {
     this.actionsPadding,
     this.barrierColor,
     this.insetPadding,
+    this.clipBehavior,
   });
 
   /// Overrides the default value for [Dialog.backgroundColor].
@@ -80,6 +81,9 @@ class DialogTheme with Diagnosticable {
   /// Overrides the default value for [Dialog.insetPadding].
   final EdgeInsets? insetPadding;
 
+  /// Overrides the default value of [Dialog.clipBehavior].
+  final Clip? clipBehavior;
+
   /// Creates a copy of this object but with the given fields replaced with the
   /// new values.
   DialogTheme copyWith({
@@ -95,6 +99,7 @@ class DialogTheme with Diagnosticable {
     EdgeInsetsGeometry? actionsPadding,
     Color? barrierColor,
     EdgeInsets? insetPadding,
+    Clip? clipBehavior,
   }) {
     return DialogTheme(
       backgroundColor: backgroundColor ?? this.backgroundColor,
@@ -109,6 +114,7 @@ class DialogTheme with Diagnosticable {
       actionsPadding: actionsPadding ?? this.actionsPadding,
       barrierColor: barrierColor ?? this.barrierColor,
       insetPadding: insetPadding ?? this.insetPadding,
+      clipBehavior: clipBehavior ?? this.clipBehavior,
     );
   }
 
@@ -137,6 +143,7 @@ class DialogTheme with Diagnosticable {
       actionsPadding: EdgeInsetsGeometry.lerp(a?.actionsPadding, b?.actionsPadding, t),
       barrierColor: Color.lerp(a?.barrierColor, b?.barrierColor, t),
       insetPadding: EdgeInsets.lerp(a?.insetPadding, b?.insetPadding, t),
+      clipBehavior: t < 0.5 ? a?.clipBehavior : b?.clipBehavior,
     );
   }
 
@@ -154,6 +161,7 @@ class DialogTheme with Diagnosticable {
     actionsPadding,
     barrierColor,
     insetPadding,
+    clipBehavior
   ]);
 
   @override
@@ -176,7 +184,8 @@ class DialogTheme with Diagnosticable {
         && other.contentTextStyle == contentTextStyle
         && other.actionsPadding == actionsPadding
         && other.barrierColor == barrierColor
-        && other.insetPadding == insetPadding;
+        && other.insetPadding == insetPadding
+        && other.clipBehavior == clipBehavior;
   }
 
   @override
@@ -194,5 +203,6 @@ class DialogTheme with Diagnosticable {
     properties.add(DiagnosticsProperty<EdgeInsetsGeometry>('actionsPadding', actionsPadding, defaultValue: null));
     properties.add(ColorProperty('barrierColor', barrierColor));
     properties.add(DiagnosticsProperty<EdgeInsets>('insetPadding', insetPadding, defaultValue: null));
+    properties.add(DiagnosticsProperty<Clip>('clipBehavior', clipBehavior, defaultValue: null));
   }
 }

packages/flutter/test/material/dialog_theme_test.dart

@@ -39,10 +39,14 @@ MaterialApp _appWithDialog(WidgetTester tester, Widget dialog, { ThemeData? them
 
 final Key _painterKey = UniqueKey();
 
-Material _getMaterialFromDialog(WidgetTester tester) {
+Material _getMaterialAlertDialog(WidgetTester tester) {
   return tester.widget<Material>(find.descendant(of: find.byType(AlertDialog), matching: find.byType(Material)));
 }
 
+Material _getMaterialDialog(WidgetTester tester) {
+  return tester.widget<Material>(find.descendant(of: find.byType(Dialog), matching: find.byType(Material)));
+}
+
 RenderParagraph _getTextRenderObject(WidgetTester tester, String text) {
   return tester.element<StatelessElement>(find.text(text)).renderObject! as RenderParagraph;
 }
@@ -73,6 +77,7 @@ void main() {
       actionsPadding: EdgeInsets.all(8.0),
       barrierColor: Color(0xff000005),
       insetPadding: EdgeInsets.all(20.0),
+      clipBehavior: Clip.antiAlias,
     ).debugFillProperties(builder);
     final List<String> description = builder.properties
         .where((DiagnosticsNode n) => !n.isFiltered(DiagnosticLevel.info))
@@ -89,6 +94,7 @@ void main() {
       'actionsPadding: EdgeInsets.all(8.0)',
       'barrierColor: Color(0xff000005)',
       'insetPadding: EdgeInsets.all(20.0)',
+      'clipBehavior: Clip.antiAlias'
     ]);
   });
 
@@ -104,7 +110,7 @@ void main() {
     await tester.tap(find.text('X'));
     await tester.pumpAndSettle();
 
-    final Material materialWidget = _getMaterialFromDialog(tester);
+    final Material materialWidget = _getMaterialAlertDialog(tester);
     expect(materialWidget.color, customColor);
   });
 
@@ -130,7 +136,7 @@ void main() {
     await tester.tap(find.text('X'));
     await tester.pumpAndSettle();
 
-    final Material materialWidget = _getMaterialFromDialog(tester);
+    final Material materialWidget = _getMaterialAlertDialog(tester);
     expect(materialWidget.elevation, customElevation);
     expect(materialWidget.shadowColor, shadowColor);
     expect(materialWidget.surfaceTintColor, surfaceTintColor);
@@ -151,7 +157,7 @@ void main() {
     await tester.tap(find.text('X'));
     await tester.pumpAndSettle();
 
-    final Material materialWidget = _getMaterialFromDialog(tester);
+    final Material materialWidget = _getMaterialAlertDialog(tester);
     expect(materialWidget.shape, customBorder);
   });
 
@@ -548,4 +554,59 @@ void main() {
       ),
     );
   });
+
+  testWidgets('DialogTheme.clipBehavior updates the dialogs clip behavior', (WidgetTester tester) async {
+    const DialogTheme dialogTheme = DialogTheme(clipBehavior: Clip.hardEdge);
+    const Dialog dialog = Dialog(child: Placeholder());
+
+    await tester.pumpWidget(_appWithDialog(
+      tester,
+      dialog,
+      theme: ThemeData(dialogTheme: dialogTheme),
+    ));
+    await tester.tap(find.text('X'));
+    await tester.pumpAndSettle();
+
+    final Material materialWidget = _getMaterialDialog(tester);
+    expect(materialWidget.clipBehavior, dialogTheme.clipBehavior);
+  });
+
+  testWidgets('Dialog.clipBehavior takes priority over theme', (WidgetTester tester) async {
+    const Dialog dialog = Dialog(
+      clipBehavior: Clip.antiAlias,
+      child: Placeholder(),
+    );
+    final ThemeData theme = ThemeData(
+      dialogTheme: const DialogTheme(clipBehavior: Clip.hardEdge),
+    );
+
+    await tester.pumpWidget(
+      _appWithDialog(tester, dialog, theme: theme),
+    );
+    await tester.tap(find.text('X'));
+    await tester.pumpAndSettle();
+
+    final Material materialWidget = _getMaterialDialog(tester);
+    expect(materialWidget.clipBehavior, Clip.antiAlias);
+  });
+
+  testWidgets('Material2 - Dialog.clipBehavior takes priority over theme', (WidgetTester tester) async {
+    const Dialog dialog = Dialog(
+      clipBehavior: Clip.antiAlias,
+      child: Placeholder(),
+    );
+    final ThemeData theme = ThemeData(
+      useMaterial3: false,
+      dialogTheme: const DialogTheme(clipBehavior: Clip.hardEdge),
+    );
+
+    await tester.pumpWidget(
+      _appWithDialog(tester, dialog, theme: theme),
+    );
+    await tester.tap(find.text('X'));
+    await tester.pumpAndSettle();
+
+    final Material materialWidget = _getMaterialDialog(tester);
+    expect(materialWidget.clipBehavior, Clip.antiAlias);
+  });
 }