Deepyr Documentation

Toast (default position)

The default position is bottom-end.

Preview

New message arrived.

Dart

// In a real application, the Toast component would be placed at a high level
// in your component tree, often just inside the `<body>`.
Toast(
  [
    Alert([text('New message arrived.')], style: [Alert.info]),
  ],
  // Default position is [Toast.bottom, Toast.end]
)

Top-Start Position

Preview

New message arrived.

Message sent successfully.

Dart

Toast(
  [
    Alert([text('New mail arrived.')], style: [Alert.info]),
    Alert([text('Message sent successfully.')], style: [Alert.success]),
  ],
  style: [Toast.top, Toast.start],
)

Top-Center Position

Preview

New message arrived.

Message sent successfully.

Dart

Toast(
  [/* Alerts */],
  style: [Toast.top, Toast.center],
)

Top-End Position

Preview

New message arrived.

Message sent successfully.

Dart

Toast(
  [/* Alerts */],
  style: [Toast.top, Toast.end],
)

Middle-Start Position

Preview

New message arrived.

Message sent successfully.

Dart

Toast(
  [/* Alerts */],
  style: [Toast.middle, Toast.start],
)

Middle-Center Position

Preview

New message arrived.

Message sent successfully.

Dart

Toast(
  [/* Alerts */],
  style: [Toast.middle, Toast.center],
)

Middle-End Position

Preview

New message arrived.

Message sent successfully.

Dart

Toast(
  [/* Alerts */],
  style: [Toast.middle, Toast.end],
)

Bottom-Start Position

Preview

New message arrived.

Message sent successfully.

Dart

Toast(
  [/* Alerts */],
  style: [Toast.bottom, Toast.start],
)

Bottom-Center Position

Preview

New message arrived.

Message sent successfully.

Dart

Toast(
  [/* Alerts */],
  style: [Toast.bottom, Toast.center],
)

Bottom-End Position

Preview

New message arrived.

Message sent successfully.

Dart

Toast(
  [/* Alerts */],
  style: [Toast.bottom, Toast.end],
)