diff --git a/example/lib/demo/screens/color_picker/color_picker_screen.dart b/example/lib/demo/screens/color_picker/color_picker_screen.dart
index e4f2b5d..1711100 100644
--- a/example/lib/demo/screens/color_picker/color_picker_screen.dart
+++ b/example/lib/demo/screens/color_picker/color_picker_screen.dart
@@ -1,3 +1,4 @@
+import 'package:color_picker_example/demo/screens/color_picker/picker_indicators/premade_dialog_picker_color_indicator.dart';
 import 'package:flutter/material.dart';
 
 import '../../utils/app.dart';
@@ -165,6 +166,7 @@ class _Column1 extends StatelessWidget {
         ),
         // Show the color selected in a dialog and open a dialog to change it.
         const DialogPickerColorIndicator(),
+        const PremadeDialogPickerColorIndicator(),
         // Show the color selected in the picker in a Card below.
         const CardPickerColorIndicator(),
         // Show the picker meta remote control widget.
diff --git a/example/lib/demo/screens/color_picker/picker_indicators/dialog_picker_color_indicator.dart b/example/lib/demo/screens/color_picker/picker_indicators/dialog_picker_color_indicator.dart
index 7ae54cb..be52d04 100644
--- a/example/lib/demo/screens/color_picker/picker_indicators/dialog_picker_color_indicator.dart
+++ b/example/lib/demo/screens/color_picker/picker_indicators/dialog_picker_color_indicator.dart
@@ -13,7 +13,8 @@ class DialogPickerColorIndicator extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return ListTile(
-      title: const Text('Click this color to update it from a dialog'),
+      title: const Text('Click to update color from a dialog. Uses '
+          '`ColorPicker.showPickerDialog`.'),
       subtitle: Text(
           // ignore: lines_longer_than_80_chars
           '${ColorTools.materialNameAndARGBCode(ref.watch(dialogPickerColorPod), colorSwatchNameMap: App.colorsNameMap)} '
diff --git a/example/lib/demo/screens/color_picker/picker_indicators/premade_dialog_picker_color_indicator.dart b/example/lib/demo/screens/color_picker/picker_indicators/premade_dialog_picker_color_indicator.dart
new file mode 100644
index 0000000..8ecdeb0
--- /dev/null
+++ b/example/lib/demo/screens/color_picker/picker_indicators/premade_dialog_picker_color_indicator.dart
@@ -0,0 +1,168 @@
+import 'package:flex_color_picker/flex_color_picker.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../../pods/pods.dart';
+import '../../../utils/app.dart';
+
+@immutable
+class PremadeDialogPickerColorIndicator extends ConsumerWidget {
+  const PremadeDialogPickerColorIndicator({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return ListTile(
+      title: const Text('Click to update only when dialog is closed. '
+          'Uses `showColorPickerDialog`.'),
+      subtitle: Text(
+          // ignore: lines_longer_than_80_chars
+          '${ColorTools.materialNameAndARGBCode(ref.watch(dialogPickerColorPod), colorSwatchNameMap: App.colorsNameMap)} '
+          'aka ${ColorTools.nameThatColor(ref.watch(dialogPickerColorPod))}'),
+      trailing: ColorIndicator(
+        height: ref.watch(sizePod),
+        width: ref.watch(sizePod),
+        borderRadius: ref.watch(borderRadiusPod),
+        elevation: ref.watch(elevationPod),
+        color: ref.watch(dialogPickerColorPod),
+        hasBorder: ref.watch(hasBorderPod),
+        onSelectFocus: false,
+        onSelect: () async {
+          ref.read(dialogPickerColorPod.notifier).state =
+              await dialogColor(context, ref, ref.read(dialogPickerColorPod));
+        },
+      ),
+    );
+  }
+
+  // Wait for the dialog to return color selection result.
+  Future<Color> dialogColor(
+      BuildContext context, WidgetRef ref, Color color) async {
+    final ThemeData theme = Theme.of(context);
+    return showColorPickerDialog(
+      // The dialog needs a context, we pass it in.
+      context,
+      // We use the dialogSelectColor, as its starting color.
+      color,
+      crossAxisAlignment: ref.watch(alignmentPod),
+      padding: EdgeInsets.all(ref.watch(paddingPod)),
+      enableShadesSelection: ref.watch(enableShadesSelectionPod),
+      includeIndex850: ref.watch(includeIndex850Pod),
+      enableTonalPalette: ref.watch(enableTonesSelectionPod),
+      enableOpacity: ref.watch(enableOpacityPod),
+      opacityTrackHeight: ref.watch(opacityTrackHeightPod),
+      opacityTrackWidth: ref.watch(opacityTrackWidthPod),
+      opacityThumbRadius: ref.watch(opacityThumbRadiusPod),
+      copyPasteBehavior: ColorPickerCopyPasteBehavior(
+        ctrlC: ref.watch(ctrlCPod),
+        ctrlV: ref.watch(ctrlVPod),
+        autoFocus: ref.watch(autoFocusPod),
+        copyButton: ref.watch(copyButtonPod),
+        pasteButton: ref.watch(pasteButtonPod),
+        copyFormat: ref.watch(copyFormatPod),
+        longPressMenu: ref.watch(longPressMenuPod),
+        secondaryMenu: ref.watch(secondaryMenuPod),
+        secondaryOnDesktopLongOnDevice: ref.watch(secondaryDesktopOtherLongPod),
+        secondaryOnDesktopLongOnDeviceAndWeb:
+            ref.watch(secondaryDesktopWebLongPod),
+        editFieldCopyButton: ref.watch(editFieldCopyButtonPod),
+        parseShortHexCode: ref.watch(parseShortHexCodePod),
+        editUsesParsedPaste: ref.watch(editUsesParsedPastePod),
+        snackBarParseError: ref.watch(snackbarParseErrorPod),
+        feedbackParseError: ref.watch(feedbackParseErrorPod),
+      ),
+      actionButtons: ColorPickerActionButtons(
+        // Make sure that you only enable the OK and Cancel button in the
+        // toolbar when the picker is used in a dialog.
+        okButton: ref.watch(okButtonPod),
+        closeButton: ref.watch(closeButtonPod),
+        closeIsLast: ref.watch(closeIsLastPod),
+        dialogActionButtons: ref.watch(dialogActionButtonsPod),
+        dialogActionOnlyOkButton: ref.watch(dialogActionOnlyOkButtonPod),
+        dialogActionOrder: ref.watch(dialogActionsOrderPod),
+        dialogActionIcons: ref.watch(dialogActionIconsPod),
+        dialogOkButtonType: ColorPickerActionButtonType.filled,
+        dialogCancelButtonType: ColorPickerActionButtonType.filledTonal,
+      ),
+      width: ref.watch(sizePod),
+      height: ref.watch(sizePod),
+      tonalColorSameSize: ref.watch(tonalSameSizePod),
+      spacing: ref.watch(spacingPod),
+      runSpacing: ref.watch(runSpacingPod),
+      elevation: ref.watch(elevationPod),
+      hasBorder: ref.watch(hasBorderPod),
+      borderRadius: ref.watch(borderRadiusPod),
+      columnSpacing: ref.watch(columnSpacingPod),
+      toolbarSpacing: 0,
+      wheelDiameter: ref.watch(wheelDiameterPod),
+      wheelWidth: ref.watch(wheelWidthPod),
+      wheelHasBorder: ref.watch(wheelHasBorderPod),
+      wheelSquarePadding: ref.watch(wheelSquarePaddingPod),
+      wheelSquareBorderRadius: ref.watch(wheelSquareBorderRadiusPod),
+      enableTooltips: ref.watch(enableTooltipsPod),
+      pickersEnabled: ref.watch(pickersEnabledPod),
+      pickerTypeLabels: const <ColorPickerType, String>{
+        ColorPickerType.both: 'P & A',
+        ColorPickerType.bw: 'B & W',
+      },
+      selectedPickerTypeColor: theme.colorScheme.primary,
+      title: ref.watch(showTitlePod)
+          ? Text(
+              'ColorPicker',
+              style: theme.textTheme.titleLarge,
+            )
+          : null,
+      heading: ref.watch(showHeadingPod)
+          ? Text(
+              'Select color',
+              style: theme.textTheme.headlineSmall,
+            )
+          : null,
+      subheading: ref.watch(showSubheadingPod)
+          ? Text(
+              'Select color shade',
+              style: theme.textTheme.titleMedium,
+            )
+          : null,
+      tonalSubheading: ref.watch(showTonalSubheadingPod)
+          ? Text(
+              'Material 3 tonal palette',
+              style: theme.textTheme.titleMedium,
+            )
+          : null,
+      wheelSubheading: ref.watch(showSubheadingPod)
+          ? Text(
+              'Selected color and its color swatch',
+              style: theme.textTheme.titleMedium,
+            )
+          : null,
+      opacitySubheading: ref.watch(showOpacitySubheadingPod)
+          ? Text(
+              'Opacity',
+              style: theme.textTheme.titleMedium,
+            )
+          : null,
+      recentColorsSubheading: ref.watch(showRecentSubheadingPod)
+          ? Text(
+              'Recent colors',
+              style: theme.textTheme.titleMedium,
+            )
+          : null,
+      showMaterialName: ref.watch(showMaterialNamePod),
+      showColorName: ref.watch(showColorNamePod),
+      showColorCode: ref.watch(showColorCodePod),
+      colorCodeHasColor: ref.watch(colorCodeHasColorPod),
+      colorCodeReadOnly: ref.watch(colorCodeReadOnlyPod),
+      showColorValue: ref.watch(showColorValuePod),
+      showRecentColors: ref.watch(showRecentColorsPod),
+      recentColors: ref.watch(dialogRecentColorsPod),
+      maxRecentColors: 5,
+      customColorSwatchesAndNames: App.colorsNameMap,
+      customSecondaryColorSwatchesAndNames: App.colorsOptionsMap,
+      dialogElevation: 2,
+      // Let's make an even more transparent barrier color than black12
+      barrierColor: const Color(0x33000000), // 6% opacity black
+      constraints:
+          const BoxConstraints(minHeight: 580, minWidth: 480, maxWidth: 480),
+    );
+  }
+}