How to Implement Screen Share in Flutter Video Call App for iOS?
Tags: flutter, dart
Published: 2024-04-24 07:24:34

---
title: How to Implement Screen Share in Flutter Video Call App for iOS?
published: true
date: 2024-04-23 09:20:53 UTC
tags: flutter, dart
canonical_url: https://www.videosdk.live/blog/implement-screen-share-flutter-video-call-app-for-ios
---

## 📌 Introduction
 ![How to Implement Screen Share in Flutter Video Call App for iOS?](https://assets.videosdk.live/static-assets/ghost/2024/04/Screen-Share-Flutter-iOS.png)

screen sharing functionality into your [Flutter video call app for iOS](https://www.videosdk.live/blog/video-calling-in-flutter) to enhance user experience and collaboration. With screen sharing, users can seamlessly share their screen content during video calls, fostering effective communication and teamwork. Utilizing Flutter's versatile framework, integrate a user-friendly interface that allows users to initiate screen sharing with just a few taps. VideoSDK offers easy-to-use APIs and [comprehensive documentation](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/concept-and-architecture), simplifying the integration process for developers.

**Benefits of Implementing Screen Share in Flutter iOS Video Call App:**

1. **Enhanced Collaboration:** Screen sharing facilitates real-time sharing of information, fostering better collaboration among users.
2. **Improved Communication:** Visual demonstrations and presentations help convey complex ideas more effectively, leading to clearer communication.
3. **Increased Productivity:** With the ability to share screens, teams can work together more efficiently, reducing misunderstandings and saving time.
4. **Interactive Learning:** Educators and trainers can use screen sharing to demonstrate concepts, conduct workshops, and engage learners interactively.
5. **Client Presentations:** Professionals can showcase designs, reports, or demos directly to clients, enhancing engagement and understanding.

**Use cases of Screen Share in Flutter iOS Video Call App:**

1. **Remote Work:** Teams working remotely can collaborate effectively by sharing screens during meetings, brainstorming sessions, and code reviews.
2. **Education:** Teachers can use screen sharing to present slideshows, demonstrate software, or conduct virtual experiments for remote students.
3. **Technical Support:** IT professionals can troubleshoot software issues by remotely accessing and viewing users' screens to identify and resolve problems.

In this article, we'll explore how to integrate screen sharing into your Flutter video calling app for iOS using VideoSDK. We'll cover everything from managing permissions to leveraging VideoSDK's tools and seamlessly integrating the feature into your app's interface.

### 🚀 Getting Started with VideoSDK

To take advantage of Screen Share for iOS, we must use the capabilities that the VideoSDK offers. Before diving into the implementation steps, let's ensure you complete the necessary prerequisites.

### Create a VideoSDK Account

Go to your [VideoSDK dashboard](https://www.videosdk.live/signup?utm_source=organicseo&utm_medium=devto&utm_campaign=screenshare_flutter_ios) and sign up if you don't have an account. This account gives you access to the required Video SDK token, which acts as an authentication key that allows your application to interact with VideoSDK functionality.

### Generate your Auth Token

Visit your VideoSDK dashboard and navigate to the "API Key" section to generate your auth token. This token is crucial in authorizing your application to use VideoSDK features.

For a more visual understanding of the account creation and token generation process, consider referring to the [provided tutorial](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/authentication-and-tokens#1-generating-token-from-dashboard).

### Prerequisites[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#prerequisites)

Before proceeding, ensure that your development environment meets the following requirements:

- VideoSDK Developer Account (if you do not have one, follow [**VideoSDK Dashboard**](https://www.videosdk.live/signup?utm_source=organicseo&utm_medium=devto&utm_campaign=screenshare_flutter_ios)
- The basic understanding of Flutter.
- **[Flutter Video SDK](https://pub.dev/packages/videosdk)**
- Have Flutter installed on your device.

## 🛠️ Install VideoSDK[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#install-video-sdk)

Install the VideoSDK using the below-mentioned flutter command. Make sure you are in your Flutter app directory before you run this command.

```dart
$ flutter pub add videosdk

//run this command to add http library to perform network call to generate roomId
$ flutter pub add http
```

### VideoSDK Compatibility
<!--kg-card-begin: html-->

| Android and iOS app | Web | Desktop app | Safari browser |
| --- | --- | --- | --- |
| <center> ✅ </center> | <center> ✅ </center> | <center> ✅ </center> | <center> ❌ </center> |

<!--kg-card-end: html-->
### Structure of the project[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#structure-of-the-project)

Your project structure should look like this.

```dart
    root
    ├── android
    ├── ios
    ├── lib
         ├── api_call.dart
         ├── join_screen.dart
         ├── main.dart
         ├── meeting_controls.dart
         ├── meeting_screen.dart
         ├── participant_tile.dart
```

We are going to create flutter widgets (JoinScreen, MeetingScreen, MeetingControls, and ParticipantTile).

### App Structure[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#app-structure)

The app widget will contain `JoinScreen` and `MeetingScreen` widget. `MeetingScreen` will have `MeetingControls` and `ParticipantTile` widget.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://cdn.videosdk.live/website-resources/docs-resources/flutter_quick_start_arch.png)

### Configure Project

#### For iOS[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#for-ios)

- Add the following entries that allow your app to access the camera and microphone in your `/ios/Runner/Info.plist` file:

```dart
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>
```

- Uncomment the following line to define a global platform for your project in `/ios/Podfile` :

```dart
# platform :ios, '12.0'
```

## 🎥 Essential Steps to Implement Video Calling Functionality

Before diving into the specifics of screen-sharing implementation, it's crucial to ensure you have VideoSDK properly installed and configured within your Flutter project. Refer to VideoSDK's documentation for detailed installation instructions. Once you have a functional video calling setup, you can proceed with adding the screen-sharing feature.

### Step 1: Get started with `api_call.dart`[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#step-1-get-started-with-api_calldart)

Before jumping to anything else, you will write a function to generate a unique meetingId. You will require an authentication token, you can generate it either by using [videosdk-rtc-api-server-examples](https://github.com/videosdk-live/videosdk-rtc-api-server-examples) or by generating it from the [VideoSDK Dashboard](https://app.videosdk.live/api-keys) for development.

```dart
import 'dart:convert';
import 'package:http/http.dart' as http;

//Auth token we will use to generate a meeting and connect to it
String token = "<Generated-from-dashboard>";

// API call to create meeting
Future<String> createMeeting() async {
  final http.Response httpResponse = await http.post(
    Uri.parse("https://api.videosdk.live/v2/rooms"),
    headers: {'Authorization': token},
  );

//Destructuring the roomId from the response
  return json.decode(httpResponse.body)['roomId'];
}
```

_api_call.dart_

### Step 2: Creating the JoinScreen[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#step-2--creating-the-joinscreen)

Let's create `join_screen.dart` file in `lib` directory and create JoinScreen `StatelessWidget`.

The JoinScreen will consist of:

- **Create Meeting Button** : This button will create a new meeting for you.
- **Meeting ID TextField** : This text field will contain the meeting ID, you want to join.
- **Join Meeting Button** : This button will join the meeting, which you have provided.

```dart
import 'package:flutter/material.dart';
import 'api_call.dart';
import 'meeting_screen.dart';

class JoinScreen extends StatelessWidget {
  final _meetingIdController = TextEditingController();

  JoinScreen({super.key});

  void onCreateButtonPressed(BuildContext context) async {
    // call api to create meeting and then navigate to MeetingScreen with meetingId,token
    await createMeeting().then((meetingId) {
      if (!context.mounted) return;
      Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) => MeetingScreen(
            meetingId: meetingId,
            token: token,
          ),
        ),
      );
    });
  }

  void onJoinButtonPressed(BuildContext context) {
    String meetingId = _meetingIdController.text;
    var re = RegExp("\\w{4}\\-\\w{4}\\-\\w{4}");
    // check meeting id is not null or invaild
    // if meeting id is vaild then navigate to MeetingScreen with meetingId,token
    if (meetingId.isNotEmpty && re.hasMatch(meetingId)) {
      _meetingIdController.clear();
      Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) => MeetingScreen(
            meetingId: meetingId,
            token: token,
          ),
        ),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text("Please enter valid meeting id"),
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('VideoSDK QuickStart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => onCreateButtonPressed(context),
              child: const Text('Create Meeting'),
            ),
            Container(
              margin: const EdgeInsets.fromLTRB(0, 8.0, 0, 8.0),
              child: TextField(
                decoration: const InputDecoration(
                  hintText: 'Meeting Id',
                  border: OutlineInputBorder(),
                ),
                controller: _meetingIdController,
              ),
            ),
            ElevatedButton(
              onPressed: () => onJoinButtonPressed(context),
              child: const Text('Join Meeting'),
            ),
          ],
        ),
      ),
    );
  }
}
```

_join_screen.dart_

- Update the home screen of the app in the `main.dart`

```dart
import 'package:flutter/material.dart';
import 'join_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VideoSDK QuickStart',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: JoinScreen(),
    );
  }
}
```

_main.dart_

### Step 3: Creating the MeetingControls[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#step-3--creating-the-meetingcontrols)

Let's create `meeting_controls.dart` file and create MeetingControls `StatelessWidget`.

The MeetingControls will consist of:

- **Leave Button** : This button will leave the meeting.
- **Toggle Mic Button** : This button will unmute or mute the mic.
- **Toggle Camera Button** : This button will enable or disable the camera.

MeetingControls will accept 3 functions in the constructor

- **onLeaveButtonPressed** : invoked when the Leave button pressed
- **onToggleMicButtonPressed** : invoked when the toggle mic button pressed
- **onToggleCameraButtonPressed** : invoked when the toggle Camera button pressed

```dart
import 'package:flutter/material.dart';

class MeetingControls extends StatelessWidget {
  final void Function() onToggleMicButtonPressed;
  final void Function() onToggleCameraButtonPressed;
  final void Function() onLeaveButtonPressed;

  const MeetingControls(
      {super.key,
      required this.onToggleMicButtonPressed,
      required this.onToggleCameraButtonPressed,
      required this.onLeaveButtonPressed});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        ElevatedButton(
            onPressed: onLeaveButtonPressed, child: const Text('Leave')),
        ElevatedButton(
            onPressed: onToggleMicButtonPressed, child: const Text('Toggle Mic')),
        ElevatedButton(
            onPressed: onToggleCameraButtonPressed,
            child: const Text('Toggle WebCam')),
      ],
    );
  }
}
```

_meeting_controls.dart_

### Step 4: Creating ParticipantTile[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#step-4--creating-participanttile)

Let's create `participant_tile.dart` file and create ParticipantTile `StatefulWidget`.

The ParticipantTile will consist of:

- **RTCVideoView** : This will show the participant's video stream.

ParticipantTile will accept `Participant` in constructor

- **participant:** participant of the meeting.

```dart
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class ParticipantTile extends StatefulWidget {
  final Participant participant;
  const ParticipantTile({super.key, required this.participant});

  @override
  State<ParticipantTile> createState() => _ParticipantTileState();
}

class _ParticipantTileState extends State<ParticipantTile> {
  Stream? videoStream;

  @override
  void initState() {
    // initial video stream for the participant
    widget.participant.streams.forEach((key, Stream stream) {
      setState(() {
        if (stream.kind == 'video') {
          videoStream = stream;
        }
      });
    });
    _initStreamListeners();
    super.initState();
  }

  _initStreamListeners() {
    widget.participant.on(Events.streamEnabled, (Stream stream) {
      if (stream.kind == 'video') {
        setState(() => videoStream = stream);
      }
    });

    widget.participant.on(Events.streamDisabled, (Stream stream) {
      if (stream.kind == 'video') {
        setState(() => videoStream = null);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: videoStream != null
          ? RTCVideoView(
              videoStream?.renderer as RTCVideoRenderer,
              objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
            )
          : Container(
              color: Colors.grey.shade800,
              child: const Center(
                child: Icon(
                  Icons.person,
                  size: 100,
                ),
              ),
            ),
    );
  }
}
```

_participant_tile.dart_

### Step 5: Creating the MeetingScreen[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/quick-start#step-5--creating-the-meetingscreen)

Let's create `meeting_screen.dart` file and create MeetingScreen `StatefulWidget`.

MeetingScreen will accept meetingId and token in the constructor

- **meetingId:** meetingId, you want to join
- **token** : VideoSdk Auth token

Your app should look like this after the implementation.  
**CAUTION**

If you get `webrtc/webrtc.h file not found` error at runtime in ios then check the solution [here](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/known-issues#issue--1).

**TIP**

You can check out the complete [quick start example here](https://github.com/videosdk-live/quickstart/tree/main/flutter-rtc).

## 🔄 Integrate Screen Share Feature

Screen sharing in a meeting is the process of sharing your device screen with other participants in the meeting. It allows everyone in the meeting to see exactly what you are seeing on your screen, which can be helpful for presentations, demonstrations, or collaborations.

### Why Integrate Screen Sharing with VideoSDK?

Integrating screen sharing into your Flutter video calling app using videoSDK presents several compelling reasons:

1. **Simplified Development** : With VideoSDK, the intricate tasks of screen capture and transmission are effortlessly managed, saving you valuable development time and resources.
2. **Native Functionality** : Harnessing the power of the iOS Media Projection API, VideoSDK ensures a seamless and efficient screen-sharing experience for your users, providing them with a native feel and optimal performance.
3. **Seamless Integration** : The integration process with VideoSDK is intuitive and hassle-free, enabling you to seamlessly incorporate screen-sharing functionality into your existing video call features without extensive modifications.
4. **Robust Features** : VideoSDK offers a robust screen-sharing solution equipped with essential features such as permission handling and in-app sharing capabilities, guaranteeing a reliable and user-friendly experience.

By embracing screen sharing through VideoSDK, you elevate the functionality and appeal of your Flutter video-calling app, providing users with an enriched communication experience.

> **NOTE:**  
> Flutter iOS screenshare is available from the SDK version 1.0.5 and above and the deployment target for iOS app should be **iOS 14 or newer**

iOS requires you to add a Broadcast Upload Extension to capture the screen of the device.

### Step 1: Open Target[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-1--open-target)

Open your project with Xcode and select **File > New > Target** in the menu bar.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step1-xcode-8cbf05258253368fa8095f10aa06459d.png)

### Step 2: Select Target[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-2--select-target)

Choose **Broadcast Upload Extension** , and click next.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step2-xcode-5270422797cc8941922cefadffb5238d.png)

### Step 3: Configure Broadcast Upload Extension[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-3--configure-broadcast-upload-extension)

Enter the extension name in the **Product Name** field, choose a team from the dropdown, Uncheck the include UI extension field, and click finish.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step3-xcode-458facd46d26cfa090fd8724b6ba831b.png)

### Step 4: Activate Extension scheme[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-4--activate-extension-scheme)

You will be prompted to **Activate the "Your-Extension-name" scheme?** pop-up, click activate.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step4-xcode-6de6fa7fc079f920f52d8315b2717e9d.png)

Now, the broadcast folder will appear in Xcode left sidebar.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step5-xcode-79ba89532c028fb25376bf6d4953f0b2.png)

### Step 5: Add External file in Created Extension[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-5--add-external-file-in-created-extension)

Open [videosdk-rtc-flutter-sdk-example](https://github.com/videosdk-live/videosdk-rtc-flutter-sdk-example/tree/main/ios/FlutterBroadcast), Copy `SampleUploader.swift`, `SocketConnection.swift`, `DarwinNotificationCenter.swift`, and `Atomic.swift` files to your extension's folder and make sure they're added to the target.

### Step 6: Update `SampleHandler.swift` file[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-6--update-samplehandlerswift-file)

Open [SampleHandler.swift](https://github.com/videosdk-live/videosdk-rtc-flutter-sdk-example/blob/main/ios/FlutterBroadcast/SampleHandler.swift) and Copy `SampleHandler.swift` file content and paste it into your extensions `SampleHandler.swift` file.

### Step 7: Add Capability in the App[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-7--add-capability-in-app)

In Xcode, go to **YourappName > Signing & Capabilities**. and click on **+Capability** to configure the app group.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step8-xcode-60177a1783e9203570a06479c30492b8.png)

Select **App Groups** from the list:

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step9-xcode-13aa5448218f78f473f060c6854874a2.png)

After that, you have to select or add the generated app group ID that you have created before.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step10-xcode-80bd6f05c87acae9a9fbaa4a89f414f9.png)

### Step 8: Add Capability in Extension[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-8--add-capability-in-extension)

Go to **Your-Extension-Name > Signing & Capabilities** and configure **App Group** functionality, which we had performed in previous steps. (The group ID should be the same for both targets.)

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step11-xcode-021329a0abd110f74fb1eba7d668fc79.png)

### Step 9: Add App Group ID to Extension File[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-9--add-app-group-id-in-extension-file)

Go to the extensions `SampleHandler.swift` file and paste your group Id in `appGroupIdentifier` constant.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step12-xcode-6f145ca7606a486596da66ebf5c31e36.png)

### Step 10: Update App level info.plist file[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#step-10--update-app-level-infoplist-file)

1. Add a new key, **RTCScreenSharingExtension** in **Info.plist** with the extension's Bundle Identifier as the value.
2. Add a new key, **RTCAppGroupIdentifier** in **Info.plist** with the extension's app group ID as the value.

> **Note** : For extension's Bundle Identifier, go to **TARGETS > Your-Extension-Name > Signing & Capabilities**.

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step13-xcode-00cb59e564facb3c7f365235065f4561.png)

> NOTE: You can also check out the extension [example code](https://github.com/videosdk-live/videosdk-rtc-flutter-sdk-example/tree/main/ios/FlutterBroadcast) on GitHub.

[

videosdk-rtc-flutter-sdk-example/ios/FlutterBroadcast at main · videosdk-live/videosdk-rtc-flutter-sdk-example

WebRTC based video conferencing SDK for Flutter (Android / iOS) - videosdk-live/videosdk-rtc-flutter-sdk-example

 ![How to Implement Screen Share in Flutter Video Call App for iOS?](https://github.com/fluidicon.png)GitHubvideosdk-live

 ![How to Implement Screen Share in Flutter Video Call App for iOS?](https://opengraph.githubassets.com/de9f710aa0874a5467b708c1c752532d36ee6c1d7ea72f118df3eb47b3260ba6/videosdk-live/videosdk-rtc-flutter-sdk-example)
](https://github.com/videosdk-live/videosdk-rtc-flutter-sdk-example/tree/main/ios/FlutterBroadcast)

### Enable Screen Share[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#enable-screen-share)

- To start screen sharing, just call `room.enableScreenShare()` method.

```dart
ElevatedButton(
    child: Text("Start ScreenSharing"),
    onPressed: () {
        room.enableScreenShare();
    },
),
```

![How to Implement Screen Share in Flutter Video Call App for iOS?](https://docs.videosdk.live/assets/images/step23-xcode-e815d2c96e8061551e941055e32578b3.png)

After clicking the **Start Broadcast** button, we will be able to get the screen stream in session.

### Disable Screen Share[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/extras/flutter-ios-screen-share#disable-screen-share)

By using `room.disableScreenShare()` function, a participant can stop publishing screen streams to other participants

```dart
ElevatedButton(
    child: Text("Stop ScreenSharing"),
    onPressed: () {
        room.disableScreenShare();
    },
),
```

### Events associated with Screen Share[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/handling-media/screen-share#events-associated-with-enablescreenshare)
<!--kg-card-begin: markdown-->
#### Events associated with Enable ScreenShare​
<!--kg-card-end: markdown-->

Every Participant will receive a callback on [`Events.streamEnabled`](https://docs.videosdk.live/flutter/api/sdk-reference/participant-class/events#streamenabled) of the [`Participant`](https://docs.videosdk.live/flutter/api/sdk-reference/participant-class/introduction) object with `Stream` object.

- Every Remote Participant will receive [`Events.presenterChanged`](https://docs.videosdk.live/flutter/api/sdk-reference/room-class/events#presenterchanged) callback on the [`Room`](https://docs.videosdk.live/flutter/api/sdk-reference/room-class/introduction) object with the participantId as `presenterId` who started the screen share.
<!--kg-card-begin: markdown-->
#### Events associated with Disable ScreenShare​
<!--kg-card-end: markdown-->
- Every Participant will receive a callback on [`Events.streamDisabled`](https://docs.videosdk.live/flutter/api/sdk-reference/participant-class/events#streamdisabled) of the [`Participant`](https://docs.videosdk.live/flutter/api/sdk-reference/participant-class/introduction) object with `Stream` object.
- Every Remote Participant will receive [`Events.presenterChanged`](https://docs.videosdk.live/flutter/api/sdk-reference/room-class/events#presenterchanged) callback on the [`Room`](https://docs.videosdk.live/flutter/api/sdk-reference/room-class/introduction) object with the `presenterId` as `null`.

### Example[​](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/handling-media/screen-share#rendering-screen-share-stream)

To render the screen share, you will need to know `participantId` who is presenting the screen, which can be found in the `presenterId` property of `Room` object.

We will listen for the `Events.presenterChanged` on `Room` object to check if some other participant starts screen share, `Events.streamEnabled` and `Events.streamDisabled` on the `localParticipant`'s object to identify if the local participant is presenting or not.

```dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';
import './participant_tile.dart';
import './screen_share_view.dart';

class MeetingScreen extends StatefulWidget {
  final String meetingId;
  final String token;

  const MeetingScreen(
      {super.key, required this.meetingId, required this.token});

  @override
  State<MeetingScreen> createState() => _MeetingScreenState();
}

class _MeetingScreenState extends State<MeetingScreen> {
  late Room _room;
  var micEnabled = true;
  var camEnabled = true;
  String? _presenterId;

  Map<String, Participant> participants = {};

  @override
  void initState() {
    // create room
    _room = VideoSDK.createRoom(
      roomId: widget.meetingId,
      token: widget.token,
      displayName: "John Doe",
      micEnabled: micEnabled,
      camEnabled: camEnabled
    );

    setMeetingEventListener();

    // Join room
    _room.join();

    super.initState();
  }

  // listening to meeting events
  void setMeetingEventListener() {
   // ...

   //Listening if remote participant starts presenting
    _room.on(Events.presenterChanged, (String? presenterId) {
      setState(() => {_presenterId = presenterId});
    });

    //Listening if local participant starts presenting
    _room.localParticipant.on(Events.streamEnabled, (Stream stream) {
      if (stream.kind == "share") {
        setState(() => {_presenterId = _room.localParticipant.id});
      }
    });

    _room.localParticipant.on(Events.streamDisabled, (Stream stream) {
      if (stream.kind == "share") {
        setState(() => {_presenterId = null});
      }
    });
  }

  // onbackButton pressed leave the room
  Future<bool> _onWillPop() async {
    _room.leave();
    return true;
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('VideoSDK QuickStart'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Text(widget.meetingId),
              //render all participant
              // ...
              
              //we will render the screenshare view if the presenterId is not null
              if (_presenterId != null)
                ScreenShareView(
                  participant: _presenterId == _room.localParticipant.id
                      ? _room.localParticipant
                      : _room.participants[_presenterId],
                ),
                // MeetingControls
                // ....
              ElevatedButton(
                  onPressed: () {
                    if (_presenterId != null) {
                      _room.disableScreenShare();
                    } else {
                      _room.enableScreenShare();
                    }
                  },
                  child: const Text('Toggle Screnshare')),
            ],
          ),
        ),
      ),
      home: JoinScreen(),
    );
  }
}
```

Now that we know if there is an active presenter, let us get the screen share stream from the `Participant` object and render it.

```dart
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class ScreenShareView extends StatelessWidget {
  final Participant? participant;

  ScreenShareView({super.key, required this.participant}) {
  //intialize the shareStream
    participant?.streams.forEach((key, value) {
      if (value.kind == "share") {
        shareStream = value;
      }
    });
  }
  Stream? shareStream;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.shade800,
      height: 300,
      width: 200,
      //show the screen share stream
      child: shareStream != null
          ? RTCVideoView(
              shareStream?.renderer as RTCVideoRenderer,
              objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
            )
          : null,
    );
  }
}
```

## 🔚 Conclusion

By integrating screen sharing into your Flutter video calling app using VideoSDK, you provide users with a powerful tool to enhance communication and collaboration. This feature proves beneficial across various scenarios, from business presentations to technical demonstrations, making your app a versatile and invaluable platform. With [VideoSDK's](https://www.videosdk.live/)seamless integration capabilities, incorporating screen sharing becomes not only feasible but also streamlined. This allows you to focus more on crafting a remarkable user interface and experience. Whether users need to share slides, collaborate on projects, or provide remote assistance, your app becomes their go-to solution. Empower users with the ability to connect, communicate, and collaborate effectively, all within a single, user-friendly platform.

Unlock the full potential of VideoSDK and create seamless video experiences today! [**Sign up now**](https://www.videosdk.live/signup?utm_source=organicseo&utm_medium=devto&utm_campaign=screenshare_flutter_ios) and get 10,000 free minutes to elevate your video app to the next level.