ArcaneToast
Temporary notification message
Live Demo

ArcaneToast#

A toast notification component for displaying temporary messages to users.

Basic Usage#

ArcaneToast.show(
  context,
  message: 'Changes saved successfully',
)

Toast Types#

// Success
ArcaneToast.success(context, message: 'Saved successfully')

// Error
ArcaneToast.error(context, message: 'Something went wrong')

// Warning
ArcaneToast.warning(context, message: 'Please check your input')

// Info
ArcaneToast.info(context, message: 'New update available')

Properties#

PropertyTypeDefaultDescription
messageStringrequiredToast message
variant ToastVariant default_ Toast type
duration Duration 4s Display duration
position ToastPosition bottomRight Screen position
action ToastAction? null Action button
icon Component? null Custom icon
dismissible bool true Show close button

Positions#

// Bottom right (default)
ArcaneToast.show(
  context,
  message: 'Message',
  position: ToastPosition.bottomRight,
)

// Bottom left
ArcaneToast.show(
  context,
  message: 'Message',
  position: ToastPosition.bottomLeft,
)

// Top right
ArcaneToast.show(
  context,
  message: 'Message',
  position: ToastPosition.topRight,
)

// Top left
ArcaneToast.show(
  context,
  message: 'Message',
  position: ToastPosition.topLeft,
)

// Top center
ArcaneToast.show(
  context,
  message: 'Message',
  position: ToastPosition.topCenter,
)

// Bottom center
ArcaneToast.show(
  context,
  message: 'Message',
  position: ToastPosition.bottomCenter,
)

With Action#

ArcaneToast.show(
  context,
  message: 'File deleted',
  action: ToastAction(
    label: 'Undo',
    onPressed: undoDelete,
  ),
)

Custom Duration#

ArcaneToast.show(
  context,
  message: 'Quick message',
  duration: Duration(seconds: 2),
)

// Persistent (no auto-dismiss)
ArcaneToast.show(
  context,
  message: 'Important message',
  duration: Duration.zero,
)

Examples#

Form Submission#

void submitForm() async {
  try {
    await saveData();
    ArcaneToast.success(
      context,
      message: 'Form submitted successfully!',
    );
  } catch (e) {
    ArcaneToast.error(
      context,
      message: 'Failed to submit form. Please try again.',
      action: ToastAction(
        label: 'Retry',
        onPressed: submitForm,
      ),
    );
  }
}

Copy to Clipboard#

void copyToClipboard(String text) {
  clipboard.write(text);
  ArcaneToast.success(
    context,
    message: 'Copied to clipboard',
    icon: span([text('📋')]),
    duration: Duration(seconds: 2),
  );
}

Undo Action#

void deleteItem(Item item) {
  removeItem(item);
  ArcaneToast.show(
    context,
    message: 'Item deleted',
    action: ToastAction(
      label: 'Undo',
      onPressed: () => restoreItem(item),
    ),
  );
}

Network Status#

void showOfflineToast() {
  ArcaneToast.warning(
    context,
    message: 'You are offline. Some features may be limited.',
    position: ToastPosition.topCenter,
    duration: Duration.zero, // Stay until dismissed
  );
}

Multiple Toasts#

void processItems(List<Item> items) async {
  for (var item in items) {
    try {
      await process(item);
      ArcaneToast.success(
        context,
        message: 'Processed ${item.name}',
        duration: Duration(seconds: 2),
      );
    } catch (e) {
      ArcaneToast.error(
        context,
        message: 'Failed to process ${item.name}',
      );
    }
  }
}

Update Available#

void showUpdateToast() {
  ArcaneToast.info(
    context,
    message: 'A new version is available',
    position: ToastPosition.topCenter,
    action: ToastAction(
      label: 'Update now',
      onPressed: performUpdate,
    ),
  );
}

Toast Container#

To use toasts, wrap your app with ArcaneToastContainer:

ArcaneApp(
  child: ArcaneToastContainer(
    child: YourApp(),
  ),
)