Blocks / feedback

Delete confirmation

Asks to confirm a destructive action: an alert that says what will be erased, a red delete button and a button to back out.

Pro

Import

Delete confirmation is part of Fliin Pro. With a license key, sign in once with fliin login, then add it in a Flutter app where fliin init has run:

fliin login
fliin add confirm-delete

Also installs: core, button, dialog, icons

Examples

Open

Before deleting for good: showFlDialog opens the confirmation, which pops true when the user confirms. Say what will be lost, and name the action after it.

import 'package:your_app/ui/fliin/components/button/fl_button.dart';
import 'package:your_app/ui/fliin/components/confirm_delete/fl_confirm_delete.dart';
import 'package:your_app/ui/fliin/components/dialog/fl_dialog.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return FlButton(
      label: 'Delete account',
      variant: FlButtonVariant.dangerSoft,
      onPressed: () async {
        final deleted = await showFlDialog<bool>(context: context, builder: (_) => const DeleteAccountDialog());
        if (deleted ?? false) {
          // Delete the account here.
        }
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const FlConfirmDelete(
      title: 'Delete your account?',
      message: 'Your profile, settings and history will be erased. This cannot be undone.',
      confirmLabel: 'Delete',
      cancelLabel: 'Cancel',
    );
  }
}

Inline

An alert dialog: stacked: false sets Cancel then the destructive verb on one line, icon shows what is removed, closeLabel adds the close button. showFlConfirmDelete returns true only on confirmation.

import 'package:your_app/ui/fliin/components/button/fl_button.dart';
import 'package:your_app/ui/fliin/components/confirm_delete/fl_confirm_delete.dart';
import 'package:your_app/ui/fliin/core/fliin.dart';
import 'package:your_app/ui/fliin/icons/fl_icons.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return FlButton(
      label: 'Remove Leah',
      variant: FlButtonVariant.dangerSoft,
      onPressed: () async {
        final removed = await showFlConfirmDelete(
          context,
          icon: FlIcon(FlIcons.person),
          stacked: false,
          closeLabel: 'Close',
          title: 'Remove Leah from the team?',
          message: 'She will lose access to the team’s projects. You can invite her again.',
          confirmLabel: 'Remove',
          cancelLabel: 'Cancel',
        );
        if (removed) {
          // Remove the member here.
        }
      },
    );
  }
}

/// The same dialog, open in the catalog.
class RemoveMemberDialog extends StatelessWidget {
  const RemoveMemberDialog({super.key});

  @override
  Widget build(BuildContext context) {
    return FlConfirmDelete(
      icon: FlIcon(FlIcons.person),
      stacked: false,
      closeLabel: 'Close',
      title: 'Remove Leah from the team?',
      message: 'She will lose access to the team’s projects. You can invite her again.',
      confirmLabel: 'Remove',
      cancelLabel: 'Cancel',
    );
  }
}

Usage

The code the reference images render:

final example = Navigator(
  onGenerateInitialRoutes: (navigator, _) => [
    PageRouteBuilder<void>(
      pageBuilder: (context, _, _) => ColoredBox(
        color: FlScope.of(context).colors.surface,
        child: const SizedBox.expand(),
      ),
    ),
    FlDialogRoute<bool>(
      context: context,
      builder: (context) => FlConfirmDelete(
        title: (variant.dir == TextDirection.rtl
            ? "حذف حسابك؟"
            : "Delete your account?"),
        message: (variant.dir == TextDirection.rtl
            ? "سيتم مسح ملفك الشخصي وإعداداتك وسجلك. لا يمكن التراجع عن ذلك."
            : "Your profile, settings and history will be erased. This cannot be undone."),
        confirmLabel: (variant.dir == TextDirection.rtl ? "حذف" : "Delete"),
        cancelLabel: (variant.dir == TextDirection.rtl ? "إلغاء" : "Cancel"),
      ),
    ),
  ],
);

API

FlConfirmDelete: class extends StatelessWidget
FlConfirmDelete.new: const new({super.key, required String title, required String message, required String confirmLabel, required String cancelLabel, Widget? icon, bool showIcon, bool stacked, String? closeLabel})
FlConfirmDelete.title: get String
FlConfirmDelete.message: get String
FlConfirmDelete.confirmLabel: get String
FlConfirmDelete.cancelLabel: get String
FlConfirmDelete.icon: get Widget?
FlConfirmDelete.showIcon: get bool
FlConfirmDelete.stacked: get bool
FlConfirmDelete.closeLabel: get String?
FlConfirmDelete.build: Widget(BuildContext context)
showFlConfirmDelete: Future<bool>(BuildContext context, {required String title, required String message, required String confirmLabel, required String cancelLabel, Widget? icon, bool showIcon, bool stacked, String? closeLabel})

Reference renders

The 16 images published with version 0.2.2, rendered by the shared harness on macOS with Flutter 3.47.7. fliin verify confirm-delete compares your copy to them.