Flutter prebuilt UI - ClarioDesk

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.

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.

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.

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.