feat(ui): redesign the incoming and outgoing ringing screens

[renefloor]

🎯 Goal

Rebuild the incoming and outgoing ringing screens on the design system, and bring the Android full-screen incoming call in line with them.

🛠 Implementation details

The Flutter screens. Both are an avatar over a name and a status line, with the call controls below. The incoming screen sits on the app surface and keeps the microphone and camera toggles the design drops; the outgoing one is drawn on top of the caller's own camera, blurred behind a scrim, and falls back to the flat scrim when the camera is off. It keeps its simpler button layout rather than the design's in-call bars.

StreamRingingCameraController opens the camera the outgoing screen previews and hands it to the call as TrackOption.provided, so answering carries on with that camera rather than opening a second one.

CallRingingButton is the 64px round button answering, declining and cancelling are drawn with — a size no StreamButtonSize names. CallControlButton gains a themeStyle pass-through to carry it: it resolves after the ambient StreamButtonTheme, where a nested one would be dropped for the positive tone, which already brings a theme of its own.

Theming. StreamIncomingCallThemeData and StreamOutgoingCallThemeData land on StreamVideoTheme, each carrying a StreamRingingCallStyle that StreamIncomingCallContent.style and StreamOutgoingCallContent.style override per call site. The internal pieces take the resolved defaults rather than the all-nullable style, so nothing can hand them a style full of nulls.

Localization. The ringing screens' text was hardcoded English; it now comes from the localizations, in English and Dutch.

Android full-screen incoming call. The activity follows the same design: the app surface rather than the blue default, a 104dp avatar, 64dp accept and decline buttons centred 80dp apart above the bottom. Call.kt no longer defaults fullScreenBackgroundColor and fullScreenTextColor, so the resource defaults are actually reached — the bundle always carried a colour before, and the full-screen UI stayed blue whatever the resources said. An integrator's own colour still paints all four labels, and a malformed colour is logged rather than silently ignored.

🚧 Blocked on two other repos

The root pubspec.yaml pins both by SHA. Both pins come off before this merges:

• feat(ui): add the 104px avatar, group and presence sizes stream-core-flutter#189 — the 104px avatar, group and presence sizes the screens are built on.
• fix(ui): keep compiling when the design system adds an avatar size stream-chat-flutter#2974 — those sizes are source-breaking for chat's exhaustive switches. Only the dogfooding app pulls chat in, so the SDK packages and CI were unaffected; the app was not.

🎨 UI Changes

Before	After
img	img

🧪 Testing

Golden tests cover both screens; the committed goldens/ci/*.png are updated in this branch. The Android activity is not covered by tests — try it by ringing the dogfooding app with the screen locked.

🤖 Generated with Claude Code

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}