# Setting up Message Inbox for Flutter

Message Inbox (the "bell icon" App Inbox) for Flutter ships as a separate `pushwoosh_inbox` package, install it alongside the base `pushwoosh_flutter` package.

## Prerequisites

- The [base Pushwoosh Flutter SDK](/developer/pushwoosh-sdk/cross-platform-frameworks/flutter/integration/basic-integration-guide/) already integrated and sending pushes.

## Add the package

Add `pushwoosh_inbox` to your `pubspec.yaml`. Check [pub.dev](https://pub.dev/packages/pushwoosh_inbox) for the current version:

```yaml title="pubspec.yaml"
dependencies:
  pushwoosh_inbox: '^2.3.24'
```

## Show the inbox

```dart
import 'package:pushwoosh_inbox/pushwoosh_inbox.dart';

PushwooshInbox.presentInboxUI();
```

This opens a native screen (a view controller on iOS, an Activity on Android) with the SDK's default appearance.

## Customize the style

Pass a `PWInboxStyle` to `presentInboxUI()`. Every field is optional and keeps its default value when left unset. Image fields are Flutter asset paths and must be declared in your `pubspec.yaml`:

| Field | Customizes |
|---|---|
| `dateFormat` | Date formatting, e.g. `"dd.MMMM.yyyy"` |
| `defaultImage` | The default icon next to a message with no image |
| `unreadImage` | The unread-messages mark (iOS only) |
| `listErrorImage` | Shown when loading the list fails |
| `listEmptyImage` | Shown when the list has no messages |
| `listErrorMessage` | Error text (not localized) |
| `listEmptyMessage` | Empty-list text (not localized) |
| `barTitle` | The inbox screen's title |
| `defaultTextColor` | Default text color (iOS only) |
| `accentColor` | Accent color |
| `backgroundColor` | Background color |
| `highlightColor` | Selection color |
| `titleColor` | Message title color |
| `readTitleColor` | Title color for read messages (Android only) |
| `descriptionColor` | Message description color |
| `readDescriptionColor` | Description color for read messages (Android only) |
| `dateColor` | Message date color |
| `readDateColor` | Date color for read messages (Android only) |
| `dividerColor` | Separator color |
| `barBackgroundColor` | The title bar's background color |
| `barAccentColor` | The title bar's back-button color |
| `barTextColor` | The title bar's text color |
| `imageTypeColor` | The unread action icon color, e.g. deep link or URL (Android only) |
| `readImageTypeColor` | The read action icon color (Android only) |

```dart
PWInboxStyle style = PWInboxStyle();
style.barTitle = "Messages";
style.barBackgroundColor = "#3AD29F";
style.accentColor = "#6750A4";
style.listEmptyMessage = "No messages yet";
style.defaultImage = "assets/images/logo.png";
PushwooshInbox.presentInboxUI(style: style);
```

## Manage messages programmatically

Load the message list, read counts, and act on individual messages without opening the built-in screen. This is useful for a custom inbox UI or an unread badge:

```dart
try {
  List<InboxMessage> messages = await PushwooshInbox.loadMessages();
  for (final message in messages) {
    print("${message.title}: ${message.message}");
  }

  int? unread = await PushwooshInbox.unreadMessagesCount();
  int? total = await PushwooshInbox.messagesCount();
  int? notActedOn = await PushwooshInbox.messagesWithNoActionPerformedCount();
} catch (error) {
  print("Failed to load inbox data: $error");
}

PushwooshInbox.readMessage(messageCode);
PushwooshInbox.deleteMessage(messageCode);
PushwooshInbox.performAction(messageCode); // runs the message's default action, e.g. opening a URL
```

`loadCachedMessages()` returns the last locally cached list without a network call on Android. On iOS it currently behaves the same as `loadMessages()` and still calls the network.