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

dogfooding/linux/flutter/generated_plugin_registrant.cc

@@ -9,6 +9,7 @@
 #include <desktop_drop/desktop_drop_plugin.h>
 #include <file_selector_linux/file_selector_plugin.h>
 #include <record_linux/record_linux_plugin.h>
+#include <stream_thumbnail/stream_thumbnail_plugin.h>
 #include <stream_webrtc_flutter/flutter_web_r_t_c_plugin.h>
 #include <url_launcher_linux/url_launcher_plugin.h>
 
@@ -22,6 +23,9 @@ void fl_register_plugins(FlPluginRegistry* registry) {
   g_autoptr(FlPluginRegistrar) record_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "RecordLinuxPlugin");
   record_linux_plugin_register_with_registrar(record_linux_registrar);
+  g_autoptr(FlPluginRegistrar) stream_thumbnail_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "StreamThumbnailPlugin");
+  stream_thumbnail_plugin_register_with_registrar(stream_thumbnail_registrar);
   g_autoptr(FlPluginRegistrar) stream_webrtc_flutter_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "FlutterWebRTCPlugin");
   flutter_web_r_t_c_plugin_register_with_registrar(stream_webrtc_flutter_registrar);

dogfooding/linux/flutter/generated_plugins.cmake

@@ -6,6 +6,7 @@ list(APPEND FLUTTER_PLUGIN_LIST
   desktop_drop
   file_selector_linux
   record_linux
+  stream_thumbnail
   stream_webrtc_flutter
   url_launcher_linux
 )

dogfooding/pubspec.yaml

@@ -4,8 +4,8 @@ publish_to: none
 description: Flutter Dogfooding App to showcase Video SDK.
 
 environment:
-  sdk: ">=3.10.0 <4.0.0"
-  flutter: ">=3.38.1"
+  sdk: ">=3.12.0 <4.0.0"
+  flutter: ">=3.44.0"
 
 resolution: workspace
 

dogfooding/windows/flutter/generated_plugins.cmake

@@ -13,8 +13,8 @@ list(APPEND FLUTTER_PLUGIN_LIST
   permission_handler_windows
   record_windows
   share_plus
+  stream_thumbnail
   stream_webrtc_flutter
-  thumblr_windows
   url_launcher_windows
 )
 

packages/stream_video_flutter/CHANGELOG.md

@@ -19,6 +19,13 @@
 - Added `StreamDesktopScreenShareSelectorThemeData` on `StreamVideoTheme`, and `StreamDesktopScreenShareSelectorTheme` to restyle the selector over a subtree.
 - Added `desktopScreenShareRefresh`, `desktopScreenShareNoSources`, `desktopScreenShareLoadFailed` and `desktopScreenShareRetry` to the localizations, in English and Dutch.
 - Added `ViewportVisibilityReporter`, which measures how much of its child is on screen and reports it to `Call.viewportVisibility`.
+- Redesigned the incoming and outgoing ringing 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; 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.
+- Added `CallRingingButton`, the 64px round button answering, declining and cancelling are drawn with. It is `CallControlButton` at the size the ringing designs give it, optionally with a label under it.
+- `CallControlButton` takes a `themeStyle`, handed to the button as `props.themeStyle`. It resolves after the ambient `StreamButtonTheme`, so it reaches that one button — where a nested `StreamButtonTheme` would be dropped for the `positive` tone, which brings one of its own.
+- Added `StreamRingingCameraController`, which opens the camera the outgoing screen previews and hands it to the call as `TrackOption.provided`, so the call carries on with the camera the caller was already previewing rather than opening a second one. `StreamOutgoingCallContent` makes one unless it is given one.
+- Added `StreamIncomingCallThemeData` and `StreamOutgoingCallThemeData` on `StreamVideoTheme`, with `StreamIncomingCallTheme` and `StreamOutgoingCallTheme` to restyle either over a subtree. Both carry a `StreamRingingCallStyle`, which `StreamIncomingCallContent.style` and `StreamOutgoingCallContent.style` override per call site.
+- Added `RingingCallBackground`, the outgoing screen's default background, so a `callBackgroundWidgetBuilder` has something to build on.
+- Added ringing strings to the localizations, in English and Dutch: `ringingIncomingCall`, `ringingCalling`, `ringingAccept`, `ringingDecline`, `ringingNobody`, `ringingTwoCallers` and `ringingManyCallers`. The ringing screens' text was hardcoded English.
 - `StreamLayoutButton` draws the participant layout in effect and offers the rest through a `StreamAdaptiveMenuAnchor`.
 - `StreamLayoutButton.defaultLayouts` is `auto` and `speakerBottom`, so the button toggles unless it is given more.
 - Added layout strings to the localizations, in English and Dutch: `layoutMenuTitle`, `layoutSelectTooltip`, `layoutDefault`, `layoutGrid`, `layoutSpeakerTop`, `layoutSpeakerBottom`, `layoutSpeakerLeft`, `layoutSpeakerRight` and `layoutSpeakerOneToOne`.
@@ -235,6 +242,8 @@
 
 ### ⚠️ Deprecated
 
+- `StreamIncomingOutgoingCallThemeData`, `StreamIncomingOutgoingCallTheme` and `StreamVideoTheme.incomingCallTheme` / `outgoingCallTheme` are deprecated in favour of `StreamIncomingCallThemeData` and `StreamOutgoingCallThemeData`. The ringing screens are built on the design system now and no longer read them, so a theme set through them has no effect. The old pair also shared one inherited widget, so the two screens could never be themed apart.
+
 - `ParticipantLayoutMode.spotlight` is `speakerTop` now, and `pictureInPicture` is `speakerOneToOne`. `dart fix --apply` migrates both.
 - `StreamLocalVideoThemeData`, `StreamLocalVideoTheme` and `StreamVideoTheme.localVideoTheme` are deprecated in favour of `StreamFloatingParticipantTileThemeData`. `StreamLocalVideo` only positions the self-view now, so nothing reads them.
 - Every call control is named `Stream<Thing>Button` now, matching the split buttons, the `CallControlButton` / `CallFeatureButton` primitives, and the design system's own components. `ToggleMicrophoneOption` is `StreamMicrophoneButton`, and alongside it `ToggleCameraOption`, `ToggleScreenShareOption`, `ToggleRecordingOption`, `ToggleClosedCaptionsOption`, `ToggleLayoutOption`, `ToggleSpeakerphoneOption`, `FlipCameraOption`, `AddReactionOption` and `LeaveCallOption` become `StreamCameraButton`, `StreamScreenShareButton`, `StreamRecordingButton`, `StreamClosedCaptionsButton`, `StreamLayoutButton`, `StreamSpeakerphoneButton`, `StreamFlipCameraButton`, `StreamAddReactionButton` and `StreamLeaveCallButton`.
@@ -252,6 +261,10 @@
 - `ScreenShareThumbnailWidget` is `StreamDesktopScreenShareThumbnail` now, and takes the thumbnail from the source it is given rather than subscribing for one.
 - `StreamVideoRenderer` is a `StatelessWidget` and wraps its child in a `ViewportVisibilityReporter`, which does the measuring.
 - `CallParticipantsSpotlightView.padding` is a nullable `EdgeInsetsGeometry?` rather than a non-nullable `EdgeInsets`, and falls back to `StreamCallParticipantsSpotlightStyle.padding` (8px horizontal) when it is null. Code reading the field needs to handle null; code passing one is unaffected. A new `spacing` sets the gaps.
+- `StreamIncomingCallContent` and `StreamOutgoingCallContent` no longer take `singleParticipantAvatarTheme`, `multipleParticipantAvatarTheme`, `singleParticipantTextStyle`, `multipleParticipantTextStyle` or `callingLabelTextStyle`. The redesigned screens style one name and many the same, and size a group avatar on its own scale, so there is nothing left for a separate "multiple" theme to reach. Pass a `StreamRingingCallStyle` through `style:` or the new themes instead.
+- More than one person ringing is drawn as a `StreamAvatarGroup` rather than two or three separate avatars, and named "A, B, and N others" rather than "A, B and +N more".
+- The outgoing screen reads its camera state from `StreamRingingCameraController` rather than from `CallConnectOptions.camera.isEnabled`, which is false for a provided track.
+
 - `ParticipantLayoutMode.auto` is the default layout of `StreamCallContent`, `StreamCallParticipants` and `RegularCallParticipantsContent`, and renders what `grid` used to. The livestream widgets still default to `grid`.
 - `ParticipantLayoutMode.grid` gives the local participant a tile of its own instead of floating them over the grid.
 - `ParticipantLayoutMode.auto` floats the self-view on mobile only while at most two other people are in the call, and gives the local participant a tile beyond that.

packages/stream_video_flutter/example/pubspec.yaml

@@ -8,8 +8,8 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 version: 1.0.1+1
 
 environment:
-  sdk: ">=3.10.0 <4.0.0"
-  flutter: ">=3.38.1"
+  sdk: ">=3.12.0 <4.0.0"
+  flutter: ">=3.44.0"
 
 resolution: workspace
 

packages/stream_video_flutter/lib/src/call_controls/call_control_button.dart

@@ -46,6 +46,7 @@ class CallControlButton extends StatelessWidget {
     this.showErrorBadge = false,
     this.onPressed,
     this.tooltip,
+    this.themeStyle,
   });
 
   /// The icon of the button.
@@ -70,6 +71,14 @@ class CallControlButton extends StatelessWidget {
   /// The message shown when the button is long-pressed or hovered.
   final String? tooltip;
 
+  /// Overrides handed to this button alone.
+  ///
+  /// Resolved after the ambient [StreamButtonTheme], so it reaches this button
+  /// without restyling every other control around it. A nested
+  /// [StreamButtonTheme] would not compose the same way: only the nearest one
+  /// is read.
+  final StreamButtonThemeStyle? themeStyle;
+
   @override
   Widget build(BuildContext context) {
     final button = StreamCallButtonBadge(
@@ -78,6 +87,7 @@ class CallControlButton extends StatelessWidget {
         icon: icon,
         onPressed: onPressed,
         tooltip: tooltip,
+        themeStyle: themeStyle,
         style: switch (tone) {
           .positive => .primary,
           .neutral => .secondary,

packages/stream_video_flutter/lib/src/call_controls/call_ringing_button.dart

@@ -0,0 +1,105 @@
+import 'package:flutter/material.dart';
+
+import '../../stream_video_flutter.dart';
+
+/// The oversized round button a ringing screen is built on: answering,
+/// declining, and hanging up a call that has not been picked up yet.
+///
+/// It is the same button as [CallControlButton] — same tones, same colours —
+/// drawn at the size the ringing designs give it, which no [StreamButtonSize]
+/// names. Use [CallControlButton] for the controls that sit alongside it, and
+/// anywhere inside a call.
+///
+/// {@tool snippet}
+///
+/// ```dart
+/// CallRingingButton(
+///   icon: Icon(context.streamIcons.phoneFill),
+///   tone: .positive,
+///   label: 'Accept',
+///   onPressed: call.accept,
+/// )
+/// ```
+/// {@end-tool}
+class CallRingingButton extends StatelessWidget {
+  /// Creates a new instance of [CallRingingButton].
+  const CallRingingButton({
+    super.key,
+    required this.icon,
+    required this.tone,
+    this.label,
+    this.labelStyle,
+    this.onPressed,
+    this.tooltip,
+  });
+
+  /// The diameter of the button.
+  ///
+  /// Already well past the minimum tap target, which is why the button drops
+  /// the padding Material would otherwise add around it.
+  static const double diameter = 64;
+
+  /// The size of the icon the button carries.
+  static const double iconSize = 32;
+
+  /// The icon of the button.
+  final Widget icon;
+
+  /// What pressing this button means.
+  final CallControlTone tone;
+
+  /// The text under the button, or null to leave it unlabelled.
+  final String? label;
+
+  /// The style of [label].
+  ///
+  /// Defaults to `textTheme.captionEmphasis` in `colorScheme.textSecondary`,
+  /// which is text on a surface. A button placed on top of video or an image
+  /// needs a color that reads there instead.
+  final TextStyle? labelStyle;
+
+  /// The callback to invoke when the user taps on the button.
+  ///
+  /// Null renders the button disabled.
+  final VoidCallback? onPressed;
+
+  /// The message shown when the button is long-pressed or hovered.
+  final String? tooltip;
+
+  @override
+  Widget build(BuildContext context) {
+    final button = CallControlButton(
+      icon: icon,
+      tone: tone,
+      onPressed: onPressed,
+      tooltip: tooltip,
+      themeStyle: StreamButtonThemeStyle.from(
+        fixedSize: const Size.square(diameter),
+        minimumSize: const Size.square(diameter),
+        iconSize: iconSize,
+        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+      ),
+    );
+
+    if (label case final label?) {
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          button,
+          SizedBox(height: context.streamSpacing.sm),
+          Text(
+            label,
+            textAlign: TextAlign.center,
+            style:
+                labelStyle ??
+                context.streamTextTheme.captionEmphasis.copyWith(
+                  color: context.streamColorScheme.textSecondary,
+                ),
+          ),
+        ],
+      );
+    }
+
+    return button;
+  }
+}