> ## Documentation Index
> Fetch the complete documentation index at: https://docs.clariodesk.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flutter prebuilt UI

> Present a themeable support inbox with one call. No UI to build.

If you don't need custom UI, the prebuilt screens get you a working support
experience in minutes. They render inside a self-owned modal with a private
nested navigator, so your router (GoRouter, Navigator 2.0) is never touched.

## Open a screen

The host pushes one route; the SDK owns everything inside it.

```dart theme={null}
ClarioDesk.openInbox(context);
```

From there, the SDK handles inbox → ticket detail → compose → image viewer
internally. Control returns to your app when the user dismisses the modal.

## The four screens

| Screen            | What it does                               |
| ----------------- | ------------------------------------------ |
| **Support inbox** | The user's list of tickets.                |
| **Ticket detail** | The message thread, with a reply composer. |
| **New ticket**    | Subject + body form.                       |
| **Bug report**    | Title + description + optional screenshot. |

## Theming

The prebuilt UI takes a single typed theme passed at `init`. Customization is
deliberately small: colors and the app bar only. Anything beyond this means
building your own UI with the [headless methods](/flutter/api-reference).

```dart theme={null}
await ClarioDesk.init(
  apiKey: 'pk_live_…',
  theme: ClarioDeskTheme(
    primaryColor: const Color(0xFFD4FF00),
    backgroundColor: const Color(0xFF0D0E0C),
    surfaceColor: const Color(0xFF1A1A1A),
    textColor: const Color(0xFFFAFAF7),
    mutedTextColor: const Color(0xFF8B8B82),
    appBar: ClarioDeskAppBarTheme(
      backgroundColor: const Color(0xFF0D0E0C),
      foregroundColor: const Color(0xFFFAFAF7),
      title: 'Support',
    ),
  ),
);
```

| Property                 | Notes                                 |
| ------------------------ | ------------------------------------- |
| `primaryColor`           | Buttons, links, accents.              |
| `backgroundColor`        | Screen background.                    |
| `surfaceColor`           | Cards, message bubbles, input fields. |
| `textColor`              | Primary text.                         |
| `mutedTextColor`         | Secondary text, timestamps.           |
| `appBar.backgroundColor` | App bar background.                   |
| `appBar.foregroundColor` | App bar title + icons.                |
| `appBar.title`           | Override the default "Support" title. |

<Note>
  No font, layout, spacing, or radius customization in v1. That's "build your own
  UI" territory. The point of the theme is to keep the prebuilt screens from
  looking out of place, not to be a full design system.
</Note>