Style toasts, confirm dialogs and dropdown menus

- Toasts take the action's button color, an optional close (x) button,
  corner radius, border, shadows (e.g. a hard stamped shadow), padding,
  max width, message and button fonts, icon size and a bottom offset per
  screen size.
- The built-in confirm dialog takes a border and shadows in place of its
  elevation, title/message/button fonts, and outlined buttons with their
  own radius, colors and shadows (a filled cancel button included).
- FeedbackTheme gains border, shadows, buttonBorder and buttonShadows;
  fromNodes reads the outline and shadow most tappable shapes share.
- A dropdown with a menuStyle opens a card anchored under the field: color,
  border, radius, shadows, offset, row height and padding, a highlighted,
  bolder selected row with a check mark. Rows (and the field) can show a
  per-item image from an itemImage template like ${item.image}.
- A data-source dropdown finds its selected item by content.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01F3B1XCZZ7QGvZLUGgSG5H4

Author: claude

CHANGELOG.md

@@ -1,5 +1,17 @@
 ## Unreleased
 
+- Toasts, the built-in confirm dialog and dropdown menus take the new
+  `ShowToastAction`, `ConfirmAction` and `DropdownProperties.menuStyle`
+  styling: toast action color, close button, radius, border, hard shadows,
+  fonts, icon size and per-screen-size bottom offsets; confirm dialog border,
+  shadows, fonts and outlined, shadowed buttons; and a dropdown menu drawn as
+  a card anchored under the field with a border, shadows, a highlighted
+  selected row with a check mark and per-item images (`itemImage`).
+- `FeedbackTheme` has `border`, `shadows`, `buttonBorder` and
+  `buttonShadows`; `FeedbackTheme.fromNodes` reads the outline and shadow
+  most of a layout's tappable shapes share for the confirm dialog's buttons.
+- A data-source dropdown finds its selected item by content, so a map value
+  selects the equal item.
 - Render `LineChartNode` with `PassiveLineChartTransformer` and
   `PassiveLineChartWidget`: bands, grid, gradient area, area bands, a
   polyline or Catmull-Rom curve, reference lines, x axis, markers, vertical

lib/src/functions/app_confirm_dialog.dart

@@ -12,8 +12,9 @@ typedef ConfirmOutcome = ({bool confirmed, Map<String, dynamic>? values});
 ///
 /// Without a [ConfirmAction.dialogId] the dialog is built here and takes the
 /// look of the layout that shows it ([FeedbackTheme.of]): its font, surface,
-/// text and primary colors and its buttons' corner radius. The action's own
-/// colors and radius override that look.
+/// text and primary colors and its buttons' corner radius, outline and
+/// shadows. The action's own colors, radii, borders, shadows and text styles
+/// override that look.
 ///
 /// With a [ConfirmAction.dialogId] the dialog is that canvas. A button in it
 /// answers with a "Navigate back" action whose params hold
@@ -95,6 +96,21 @@ class AppConfirmDialog {
         textColor: action.textColor?.toFlutterColor(),
         confirmColor: action.confirmColor?.toFlutterColor(),
         cornerRadius: action.cornerRadius,
+        border: action.border == null ? null : borderSideOf(action.border!),
+        shadows: action.shadows == null ? null : boxShadowsOf(action.shadows),
+        titleStyle: action.titleStyle,
+        messageStyle: action.messageStyle,
+        buttonStyle: action.buttonStyle,
+        buttonRadius: action.buttonRadius,
+        buttonBorder: action.buttonBorder == null
+            ? null
+            : borderSideOf(action.buttonBorder!),
+        buttonShadows: action.buttonShadows == null
+            ? null
+            : boxShadowsOf(action.buttonShadows),
+        confirmTextColor: action.confirmTextColor?.toFlutterColor(),
+        cancelColor: action.cancelColor?.toFlutterColor(),
+        cancelTextColor: action.cancelTextColor?.toFlutterColor(),
       ),
     );
     return (confirmed: confirmed ?? false, values: null);
@@ -117,6 +133,17 @@ class ThemedConfirmDialog extends StatelessWidget {
     this.textColor,
     this.confirmColor,
     this.cornerRadius,
+    this.border,
+    this.shadows,
+    this.titleStyle,
+    this.messageStyle,
+    this.buttonStyle,
+    this.buttonRadius,
+    this.buttonBorder,
+    this.buttonShadows,
+    this.confirmTextColor,
+    this.cancelColor,
+    this.cancelTextColor,
   });
 
   /// The app's look.
@@ -149,6 +176,40 @@ class ThemedConfirmDialog extends StatelessWidget {
   /// Overrides the dialog's corner radius.
   final double? cornerRadius;
 
+  /// Overrides the theme's dialog outline.
+  final BorderSide? border;
+
+  /// Overrides the theme's dialog shadows; set, they replace the elevation.
+  final List<BoxShadow>? shadows;
+
+  /// Changes to the title's font, size and color.
+  final TextStyleModel? titleStyle;
+
+  /// Changes to the message's font, size and color.
+  final TextStyleModel? messageStyle;
+
+  /// Changes to the buttons' font, size and label color.
+  final TextStyleModel? buttonStyle;
+
+  /// Overrides the theme's button corner radius.
+  final double? buttonRadius;
+
+  /// Overrides the theme's button outline.
+  final BorderSide? buttonBorder;
+
+  /// Overrides the theme's button shadows. The cancel button takes them only
+  /// when it has a [cancelColor].
+  final List<BoxShadow>? buttonShadows;
+
+  /// Label color of the confirm button.
+  final Color? confirmTextColor;
+
+  /// Fill of the cancel button; null leaves it a text button.
+  final Color? cancelColor;
+
+  /// Label color of the cancel button.
+  final Color? cancelTextColor;
+
   @override
   Widget build(BuildContext context) {
     final Color surface = backgroundColor ?? theme.surface;
@@ -159,105 +220,157 @@ class ThemedConfirmDialog extends StatelessWidget {
             : ResolvedFeedbackTheme.onColor(surface));
     final Color confirmFill =
         confirmColor ?? (destructive ? theme.error : theme.primary);
-    final Color onConfirm = ResolvedFeedbackTheme.onColor(confirmFill);
     final double radius = cornerRadius ?? theme.radius;
+    final double buttonCorner = buttonRadius ?? theme.buttonRadius;
+    final BorderSide buttonSide =
+        buttonBorder ?? theme.buttonBorder ?? BorderSide.none;
+    final List<BoxShadow> buttonShadowList =
+        buttonShadows ?? theme.buttonShadows ?? const [];
     final OutlinedBorder buttonShape = RoundedRectangleBorder(
-      borderRadius: BorderRadius.circular(theme.buttonRadius),
+      borderRadius: BorderRadius.circular(buttonCorner),
     );
-    final TextStyle buttonText = theme.buttonStyle.copyWith(
-      fontSize: 15,
-      height: 1.2,
+    final TextStyle buttonText = buttonStyle.applyTo(
+      theme.buttonStyle.copyWith(fontSize: 15, height: 1.2),
     );
+    final Color onConfirm =
+        buttonStyle?.color?.toFlutterColor() ??
+        confirmTextColor ??
+        ResolvedFeedbackTheme.onColor(confirmFill);
+    final Color onCancel =
+        buttonStyle?.color?.toFlutterColor() ?? cancelTextColor ?? onSurface;
     const Size buttonSize = Size(64, 44);
     const EdgeInsets buttonPadding = EdgeInsets.symmetric(horizontal: 18);
+    final BorderSide? dialogSide = border ?? theme.border;
+    final List<BoxShadow>? dialogShadows = shadows ?? theme.shadows;
 
-    return Theme(
-      data: theme.apply(Theme.of(context)),
-      child: Dialog(
-        backgroundColor: surface,
-        surfaceTintColor: Colors.transparent,
-        elevation: 8,
-        insetPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(radius),
-        ),
-        child: ConstrainedBox(
-          constraints: const BoxConstraints(maxWidth: 400),
-          child: Semantics(
-            scopesRoute: true,
-            namesRoute: true,
-            explicitChildNodes: true,
-            label: title.isEmpty ? null : title,
-            child: Padding(
-              padding: const EdgeInsets.fromLTRB(24, 24, 24, 16),
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  if (title.isNotEmpty)
-                    Text(
-                      title,
-                      style: theme.titleStyle.copyWith(
-                        fontSize: 18,
-                        height: 1.3,
-                        color: onSurface,
-                      ),
+    Widget withShadow(Widget button) => buttonShadowList.isEmpty
+        ? button
+        : DecoratedBox(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(buttonCorner),
+              boxShadow: buttonShadowList,
+            ),
+            child: button,
+          );
+
+    final Widget cancel = TextButton(
+      key: const ValueKey('codelessly-confirm-cancel'),
+      onPressed: () => Navigator.of(context).pop(false),
+      style: TextButton.styleFrom(
+        foregroundColor: onCancel,
+        backgroundColor: cancelColor,
+        textStyle: buttonText,
+        shape: buttonShape,
+        side: buttonSide,
+        minimumSize: buttonSize,
+        padding: buttonPadding,
+      ),
+      child: Text(cancelLabel),
+    );
+    final Widget confirm = FilledButton(
+      key: const ValueKey('codelessly-confirm-ok'),
+      onPressed: () => Navigator.of(context).pop(true),
+      style: FilledButton.styleFrom(
+        backgroundColor: confirmFill,
+        foregroundColor: onConfirm,
+        textStyle: buttonText,
+        shape: buttonShape,
+        side: buttonSide,
+        minimumSize: buttonSize,
+        padding: buttonPadding,
+      ),
+      child: Text(confirmLabel),
+    );
+
+    Widget content = ConstrainedBox(
+      constraints: const BoxConstraints(maxWidth: 400),
+      child: Semantics(
+        scopesRoute: true,
+        namesRoute: true,
+        explicitChildNodes: true,
+        label: title.isEmpty ? null : title,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(24, 24, 24, 16),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              if (title.isNotEmpty)
+                Text(
+                  title,
+                  style: titleStyle.applyTo(
+                    theme.titleStyle.copyWith(
+                      fontSize: 18,
+                      height: 1.3,
+                      color: onSurface,
                     ),
-                  if (title.isNotEmpty && message.isNotEmpty)
-                    const SizedBox(height: 8),
-                  if (message.isNotEmpty)
-                    Flexible(
-                      child: SingleChildScrollView(
-                        child: Text(
-                          message,
-                          style: theme.bodyStyle.copyWith(
-                            fontSize: 15,
-                            height: 1.45,
-                            color: onSurface.withValues(alpha: 0.74),
-                          ),
+                  ),
+                ),
+              if (title.isNotEmpty && message.isNotEmpty)
+                const SizedBox(height: 8),
+              if (message.isNotEmpty)
+                Flexible(
+                  child: SingleChildScrollView(
+                    child: Text(
+                      message,
+                      style: messageStyle.applyTo(
+                        theme.bodyStyle.copyWith(
+                          fontSize: 15,
+                          height: 1.45,
+                          color: onSurface.withValues(alpha: 0.74),
                         ),
                       ),
                     ),
-                  const SizedBox(height: 20),
-                  OverflowBar(
-                    alignment: MainAxisAlignment.end,
-                    overflowAlignment: OverflowBarAlignment.end,
-                    spacing: 8,
-                    overflowSpacing: 8,
-                    children: [
-                      TextButton(
-                        key: const ValueKey('codelessly-confirm-cancel'),
-                        onPressed: () => Navigator.of(context).pop(false),
-                        style: TextButton.styleFrom(
-                          foregroundColor: onSurface,
-                          textStyle: buttonText,
-                          shape: buttonShape,
-                          minimumSize: buttonSize,
-                          padding: buttonPadding,
-                        ),
-                        child: Text(cancelLabel),
-                      ),
-                      FilledButton(
-                        key: const ValueKey('codelessly-confirm-ok'),
-                        onPressed: () => Navigator.of(context).pop(true),
-                        style: FilledButton.styleFrom(
-                          backgroundColor: confirmFill,
-                          foregroundColor: onConfirm,
-                          textStyle: buttonText,
-                          shape: buttonShape,
-                          minimumSize: buttonSize,
-                          padding: buttonPadding,
-                        ),
-                        child: Text(confirmLabel),
-                      ),
-                    ],
                   ),
+                ),
+              const SizedBox(height: 20),
+              OverflowBar(
+                alignment: MainAxisAlignment.end,
+                overflowAlignment: OverflowBarAlignment.end,
+                // Outlined or shadowed buttons need room between them.
+                spacing: buttonShadowList.isEmpty ? 8 : 12,
+                overflowSpacing: 8,
+                children: [
+                  cancelColor != null ? withShadow(cancel) : cancel,
+                  withShadow(confirm),
                 ],
               ),
-            ),
+            ],
           ),
         ),
       ),
     );
+    // Shadows of its own replace the dialog's elevation: they are drawn
+    // around a box that carries its fill and outline.
+    if (dialogShadows != null) {
+      content = DecoratedBox(
+        key: const ValueKey('codelessly-confirm-surface'),
+        decoration: BoxDecoration(
+          color: surface,
+          borderRadius: BorderRadius.circular(radius),
+          border: dialogSide == null ? null : Border.fromBorderSide(dialogSide),
+          boxShadow: dialogShadows,
+        ),
+        child: content,
+      );
+    }
+
+    return Theme(
+      data: theme.apply(Theme.of(context)),
+      child: Dialog(
+        backgroundColor: dialogShadows != null ? Colors.transparent : surface,
+        surfaceTintColor: Colors.transparent,
+        shadowColor: dialogShadows != null ? Colors.transparent : null,
+        elevation: dialogShadows != null ? 0 : 8,
+        insetPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(radius),
+          side: dialogShadows == null
+              ? dialogSide ?? BorderSide.none
+              : BorderSide.none,
+        ),
+        child: content,
+      ),
+    );
   }
 }