SDKsFlutter

Appearance

Theme Koah ads in Flutter with KoahThemeProvider.

Theming

💡

See how it looks in the playground.

To customize the appearance of Koah ads, wrap your widget tree with KoahThemeProvider once and every Koah ad below it picks the theme up automatically:

KoahThemeProvider(
  theme: const KoahTheme(
    colorScheme: KoahColorScheme.auto,
    accentColor: Color(0xFF22C55E),
  ),
  child: MyApp(),
)

To see a full list of the available theme properties, see Theme properties in the reference.

Upgrading from 0.x? Follow the migration guide — 1.0 renames the card constructors and replaces the sizing parameters.

Sizing

Koah ads are fully resizable. Size each axis independently with the width and height parameters:

omit the parameter (null) — the ad wraps its content
KoahAxisSize.fixed(dp) — an exact size
KoahAxisSize.range(min: ..., max: ...) — a bounded band (at least one bound required)
KoahAxisSize.fill() — fill the parent

💡

Leaving an axis unbounded (null) allows more ad formats, improving fill rates and revenue.

// Cap the width for a compact slot; leave height unbounded so the card can't clip.
KoahCard(
  adContext: KoahAdContext.conversation(question: q, answer: a),
  cacheKey: 'msg-1',
  width: KoahAxisSize.range(max: 384),
)

KoahAxisSize.fill() needs a parent that bounds that axis — a fill axis inside an axis the parent leaves unbounded (like the scroll axis of a scroller) throws at the slot's first layout.

If a served ad turns out not to fit a fixed or capped height, the card renders nothing and emits a SlotTooSmall event instead of clipping. See Formats for the full sizing model.

Card chrome

KoahCard renders inside the standard chrome (surface background, 0.5dp border, padding) by default. Pass chrome: KoahCardChrome.bare to render borderless and embed the ad directly into your own surface like a chat row or list cell:

KoahCard(
  adContext: KoahAdContext.conversation(question: q, answer: a),
  cacheKey: 'msg-1',
  chrome: KoahCardChrome.bare,
)