Call Controls

By default, StreamCallContent renders controls for the user to interact with, such as leaving a call, controlling their microphone and camera, etc.

However, in cases where developers want to override these controls, they can use the StreamCallControls class.

If left unmodified, Stream Call Content uses the .withDefaultOptions constructor.

List<Widget> defaultCallControlOptions({
  required Call call,
  required CallParticipantState localParticipant,
  VoidCallback? onLeaveCallTap,
}) {
  return [
    ToggleSpeakerphoneOption(call: call),
    ToggleCameraOption(call: call, localParticipant: localParticipant),
    ToggleMicrophoneOption(call: call, localParticipant: localParticipant),
    FlipCameraOption(call: call, localParticipant: localParticipant),
    LeaveCallOption(call: call, onLeaveCallTap: onLeaveCallTap),
  ];
}

Developers can supply a list of custom options for their call using the default constructor. It's common to use a combination of both Stream default options and custom options. For example, you can use Stream's default buttons for leaving the call, controlling the microphone, and camera, while including a custom option to perform an activity specific to your application, such as sending a custom event or reaction.

StreamCallContent(
  call: call,
  callState: callState,
  callControlsBuilder: (
    BuildContext context,
    Call call,
    CallState callState,
  ) {
    final localParticipant = callState.localParticipant!;
    return StreamCallControls(
      options: [
    // Custom call option toggles the chat while on a call.
        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(),
        ),
      ],
    );
  },
);

As an example, the above snippet demonstrates how a custom CallControlOption can be used to display a chat dialog while a user is on a call.