Call Content

Similar to StreamCallContainer, CallContent allows for the display of participants on a call, while providing options for customization and custom UI. The widget manages the display of video rendering and call controls.

However, unlike StreamCallContainer, the sole responsibility of StreamCallContent is to render the call participants and controls. StreamCallContent does not monitor or respond to call lifecycle events, such as incoming and outgoing calls.

  const StreamCallContent({
    super.key,
    required this.call,
    required this.callState,
    this.onBackPressed,
    this.onLeaveCallTap,
    this.callAppBarBuilder,
    this.overlayAppBarBuilder,
    this.callParticipantsBuilder,
    this.callControlsBuilder,
    this.layoutMode = ParticipantLayoutMode.grid,
    this.enablePictureInPicture = false,
    this.callPictureInPictureBuilder,
  });

To customize StreamCallContent, one of the following builders can be used:

callControlsBuilder
callParticipantsBuilder
overlayAppBarBuilder
callAppBarBuilder

class CallScreen extends StatefulWidget {
  const CallScreen({
    super.key,
    required this.call,
    required this.chatChannel,
    this.callConnectOptions = const CallConnectOptions(),
  });

  final Call call;
  final CallConnectOptions callConnectOptions;
  final Channel chatChannel;

  @override
  State<CallScreen> createState() => _CallScreenState();
}

class _CallScreenState extends State<CallScreen> {
  void showChatDialog(BuildContext context) {
    showBottomSheet<dynamic>(
      context: context,
      backgroundColor: const Color(0xFF101418),
      builder: (_) {
        return const FractionallySizedBox(
          heightFactor: 0.8,
          child: Material(
	    child: Center(
	      child: Text('TODO Chat UI'),
	    ),
	  ),
        );
      },
    );
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamCallContent(
        call: widget.call,
        callState: widget.call.state.value,
        callControlsBuilder: (
            BuildContext context,
            Call call,
            CallState callState,
            ) {
          final localParticipant = callState.localParticipant!;
          return StreamCallControls(
            options: [
              CallControlOption(
                icon: const Icon(Icons.chat_outlined),
                onPressed: () => showChatDialog(context),
              ),
              ToggleMicrophoneOption(
                call: call,
                localParticipant: localParticipant,
              ),
              ToggleCameraOption(
                call: call,
                localParticipant: localParticipant,
              ),
              LeaveCallOption(
                call: call,
                onLeaveCallTap: () => call.leave(),
              ),
            ],
          );
        },
      ),
    );
  }
}

In the above example, we’re overriding the default call controls using callControlsBuilder to add a button to display an in-app dialog for chat.

To learn more how call controls work in Stream Video, continue reading to the next chapter 😃.

Video Renderer

Call Controls