AlertDialog.adaptive constructor

const AlertDialog.adaptive({ Key? key, Widget? icon, EdgeInsetsGeometry? iconPadding, Color? iconColor, Widget? title, EdgeInsetsGeometry? titlePadding, TextStyle? titleTextStyle, Widget? content, EdgeInsetsGeometry? contentPadding, TextStyle? contentTextStyle, List<Widget>? actions, EdgeInsetsGeometry? actionsPadding, MainAxisAlignment? actionsAlignment, OverflowBarAlignment? actionsOverflowAlignment, VerticalDirection? actionsOverflowDirection, double? actionsOverflowButtonSpacing, EdgeInsetsGeometry? buttonPadding, Color? backgroundColor, double? elevation, Color? shadowColor, Color? surfaceTintColor, String? semanticLabel, EdgeInsets insetPadding, Clip? clipBehavior, ShapeBorder? shape, AlignmentGeometry? alignment, BoxConstraints? constraints, bool scrollable, ScrollController? scrollController, ScrollController? actionScrollController, Duration insetAnimationDuration, Curve insetAnimationCurve, })

Creates an adaptive AlertDialog based on whether the target platform is iOS or macOS, following Material design's Cross-platform guidelines.

On iOS and macOS, this constructor creates a CupertinoAlertDialog. On other platforms, this creates a Material design AlertDialog.

Typically passed as a child of showAdaptiveDialog, which will display the alert differently based on platform.

If a CupertinoAlertDialog is created only these parameters are used: title, content, actions, scrollController, actionScrollController, insetAnimationDuration, and insetAnimationCurve. If a material AlertDialog is created, scrollController, actionScrollController, insetAnimationDuration, and insetAnimationCurve are ignored.

The target platform is based on the current Theme: ThemeData.platform.

This demo shows a TextButton which when pressed, calls showAdaptiveDialog. When called, this method displays an adaptive dialog above the current contents of the app, with different behaviors depending on target platform.

CupertinoDialogAction is conditionally used as the child to show more platform specific design.

To see it in action, copy and run this code snippet on DartPad.

import 'package:cupertino_ui/cupertino_ui.dart';
import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [AlertDialog].

void main() => runApp(const AdaptiveAlertDialogApp());

class AdaptiveAlertDialogApp extends StatelessWidget {
  const AdaptiveAlertDialogApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Try this: set the platform to .android and see the difference
      theme: ThemeData(platform: .iOS),
      home: Scaffold(
        appBar: AppBar(title: const Text('AlertDialog Sample')),
        body: const Center(child: AdaptiveDialogExample()),
      ),
    );
  }
}

class AdaptiveDialogExample extends StatelessWidget {
  const AdaptiveDialogExample({super.key});

  Widget adaptiveAction({
    required BuildContext context,
    required VoidCallback onPressed,
    required Widget child,
  }) {
    final ThemeData theme = Theme.of(context);
    switch (theme.platform) {
      case .android:
      case .fuchsia:
      case .linux:
      case .windows:
        return TextButton(onPressed: onPressed, child: child);
      case .iOS:
      case .macOS:
        return CupertinoDialogAction(onPressed: onPressed, child: child);
    }
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () => showAdaptiveDialog<String>(
        context: context,
        builder: (BuildContext context) => AlertDialog.adaptive(
          title: const Text('AlertDialog Title'),
          content: const Text('AlertDialog description'),
          actions: <Widget>[
            adaptiveAction(
              context: context,
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            adaptiveAction(
              context: context,
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        ),
      ),
      child: const Text('Show Dialog'),
    );
  }
}

Implementation

// TODO(framework): Replace the following block with a @dartpad directive
// when it's supported. https://github.com/dart-lang/dartdoc/issues/4123
/// {@macro material_ui.dartpad_guide}
///
/// {@example /example/lib/dialog/adaptive_alert_dialog.0.dart#body}
///
/// </callout-box>
const factory AlertDialog.adaptive({
  Key? key,
  Widget? icon,
  EdgeInsetsGeometry? iconPadding,
  Color? iconColor,
  Widget? title,
  EdgeInsetsGeometry? titlePadding,
  TextStyle? titleTextStyle,
  Widget? content,
  EdgeInsetsGeometry? contentPadding,
  TextStyle? contentTextStyle,
  List<Widget>? actions,
  EdgeInsetsGeometry? actionsPadding,
  MainAxisAlignment? actionsAlignment,
  OverflowBarAlignment? actionsOverflowAlignment,
  VerticalDirection? actionsOverflowDirection,
  double? actionsOverflowButtonSpacing,
  EdgeInsetsGeometry? buttonPadding,
  Color? backgroundColor,
  double? elevation,
  Color? shadowColor,
  Color? surfaceTintColor,
  String? semanticLabel,
  EdgeInsets insetPadding,
  Clip? clipBehavior,
  ShapeBorder? shape,
  AlignmentGeometry? alignment,
  BoxConstraints? constraints,
  bool scrollable,
  ScrollController? scrollController,
  ScrollController? actionScrollController,
  Duration insetAnimationDuration,
  Curve insetAnimationCurve,
}) = _AdaptiveAlertDialog;