Call Container

Similar to Flutter’s out-of-the-box Container widget, StreamCallContainer serves as a convenient widget for handling everything related to video and calling. It is the easiest way to setup a screen that shows incoming, outgoing and active call screens which contain the current participants video feeds and the call controls.

CallContainer sets up the following functionality by connecting multiple components:

• StreamOutgoingCallContent: When the user is calling other people. Shows other participants avatars and controls for switching audio/video and canceling the call.
• StreamIncomingCallContent: When the user is being called by another person. Shows the incoming call screen.
• StreamCallContent: When the user is in an active call.

In this section we will cover this higher level component which enables you to quickly implement a video calling app.

Customizing Call Container

const StreamCallContainer({
  super.key,
  required this.call,
  this.callConnectOptions,
  this.onBackPressed,
  this.onLeaveCallTap,
  this.onAcceptCallTap,
  this.onDeclineCallTap,
  this.onCancelCallTap,
  this.incomingCallBuilder,
  this.outgoingCallBuilder,
  this.callContentBuilder,
  this.pictureInPictureConfiguration = const PictureInPictureConfiguration(),
});

Developers can easily respond to user actions, such as accepting or declining a call, by using exposed callbacks and builders.

To replace default screens, such as the one displayed when an incoming call is detected, developers can use one of the many optional builders available.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamCallContainer(
        call: widget.call,
        incomingCallBuilder: (context, call, callState) {
          return CustomIncomingCallScreen(call: call, state: callState);
        },
      ),
    );
  }

All the builders exposed by StreamCallContainer provide users with an ongoing Call object and the associated CallState. These can be used to subscribe to changes and display different UI options depending on the events.

If your use case does not require ringing, incoming, or outgoing capabilities similar to Google Meet, then our CallScreen widget may be a better option. Keep reading to learn how to use it in your application.