feat: add docs for the first release of the Flutter SDK

Author: lassana

README.md

@@ -30,6 +30,10 @@ Register a free account for development and testing at [https://cobrowse.io/regi
 [react-native.md](sdk-installation/react-native.md)
 {% endcontent-ref %}
 
+{% content-ref url="sdk-installation/flutter.md" %}
+[flutter.md](sdk-installation/flutter.md)
+{% endcontent-ref %}
+
 {% content-ref url="sdk-installation/xamarin.md" %}
 [xamarin.md](sdk-installation/xamarin.md)
 {% endcontent-ref %}

SUMMARY.md

@@ -8,6 +8,7 @@
 * [iOS](sdk-installation/ios.md)
 * [Android](sdk-installation/android.md)
 * [React Native](sdk-installation/react-native.md)
+* [Flutter](sdk-installation/flutter.md)
 * [Xamarin](sdk-installation/xamarin.md)
 * [.NET Mobile](sdk-installation/dotnet.md)
 * [MacOS](sdk-installation/macos.md)

sdk-features/6-digit-codes.md

@@ -39,19 +39,26 @@ CobrowseIO.client().then(function() {
 ```
 {% endtab %}
 
+{% tab title="Android" %}
+```java
+CobrowseIO.instance().createSession((err, session) -> {
+    if (err != null) Log.w("App", "Failed to create code");
+    else if (session != null) Log.i("App", "Session code " + session.code());
+});
+```
+{% endtab %}
+
 {% tab title="React Native" %}
 ```javascript
 const session = await CobrowseIO.createSession()
 console.log('Your 6 digit code is', session.code)
 ```
 {% endtab %}
 
-{% tab title="Android" %}
-```java
-CobrowseIO.instance().createSession((err, session) -> {
-    if (err != null) Log.w("App", "Failed to create code");
-    else if (session != null) Log.i("App", "Session code " + session.code());
-});
+{% tab title="Flutter" %}
+```dart
+Session session = await CobrowseIO.instance.createSession();
+log('Your session code: ${session.code}');
 ```
 {% endtab %}
 
@@ -174,6 +181,30 @@ export default class App extends Component {
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+The Cobrowse.io SDK for Flutter does not provide a default UI for generating 6 digit codes, but you can show the default UI shipped in the native SDKs using [Flutter platform channel](https://docs.flutter.dev/platform-integration/platform-channels). It's not a requirement to use this UI, you can easily build your own if you like!
+
+#### iOS implementation
+
+```objc
+@import CobrowseIO;
+
+UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController;
+CBIOViewController *sessionController = [[CBIOViewController alloc] init];
+[rootViewController presentViewController:sessionController animated:YES completion:nil];
+```
+
+#### Android implementation
+
+```java
+import io.cobrowse.ui.CobrowseActivity;
+
+Intent intent = new Intent(activity, CobrowseActivity.class);
+activity.startActivity(intent);
+```
+
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 #### Xamarin.iOS implementation
 

sdk-features/advanced-features/starting-and-stopping-the-sdk.md

@@ -50,6 +50,12 @@ CobrowseIO.start();
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+```dart
+CobrowseIO.instance.start();
+```
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 ```csharp
 CobrowseIO.Instance.Start();
@@ -148,6 +154,12 @@ CobrowseIO.stop();
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+```dart
+CobrowseIO.instance.stop();
+```
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 ```csharp
 CobrowseIO.Instance.Stop();

sdk-features/customize-the-interface/customize-session-controls.md

@@ -97,6 +97,22 @@ CobrowseIO.showSessionControls = false;
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+
+Listen to these event emitters to override the default session indicator. These methods may be called several times as the session progresses through its lifecycle, so you may need to adjust your UI accordingly.
+
+```dart
+CobrowseIO.instance.showSessionControls.listen((session) {
+    // Show your session controls
+});
+
+CobrowseIO.instance.hideSessionControls.listen((session) {
+    // Hide your session controls
+});
+```
+
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 #### Xamarin.iOS / .NET iOS implementation
 
@@ -183,6 +199,17 @@ if (session) await session.end()
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+```dart
+// Get a reference to the current session if you don't have one
+Session? session = await CobrowseIO.instance.currentSession();
+// if there's an ongoing session, end it
+if (session != null) {
+    await session.end()
+}
+```
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 ```csharp
 CobrowseIO.Instance().CurrentSession?.End(null);

sdk-features/customize-the-interface/remote-control-consent.md

@@ -60,6 +60,17 @@ CobrowseIO.handleRemoteControlRequest = function(session) {
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+```dart
+CobrowseIO.instance.handleRemoteControlRequest.listen((session) {
+    // Show your own UI here
+    // call session.setRemoteControl(RemoteControlState.on) to allow
+    // or session.setRemoteControl(RemoteControlState.rejected) to reject
+    session.setRemoteControl(RemoteControlState.on);
+});
+```
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 ```сsharp
 CobrowseIO.Instance.RemoteControlRequest += (object sender, ISession session) =>
@@ -287,6 +298,46 @@ CobrowseIO.handleRemoteControlRequest = function(session) {
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+```dart
+CobrowseIO.instance.handleRemoteControlRequest.listen((session) {
+    showDialog(
+        context: context,
+        builder: (BuildContext context) {
+            return AlertDialog(
+                title: const Text('Remote Control Request'),
+                content: const Text('A support agent would like to control this app. Do you accept?'),
+                actions: <Widget>[
+                    TextButton(
+                        onPressed: () {
+                            try {
+                                session.setRemoteControl(RemoteControlState.on);
+                                Navigator.of(context).pop();
+                            } on PlatformException {
+                                // E.g. a network error
+                            }
+                        },
+                        child: const Text('Accept'),
+                    ),
+                    TextButton(
+                        onPressed: () {
+                            try {
+                                session.setRemoteControl(RemoteControlState.off);
+                                Navigator.of(context).pop();
+                            } on PlatformException {
+                                // E.g. a network error
+                            }
+                        },
+                        child: const Text('Cancel'),
+                    ),
+                ],
+            );
+        },
+    );
+});
+```
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 ```сsharp
 CobrowseIO.Instance.RemoteControlRequest += async (object sender, ISession session) =>

sdk-features/customize-the-interface/user-consent-dialog.md

@@ -62,6 +62,21 @@ CobrowseIO.handleSessionRequest = function(session) {
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+```dart
+CobrowseIO.instance.handleSessionRequest.listen((session) {
+    // Replace this with your own logic
+    // Just be sure to call session.activate() to
+    // accept the session, or session.end() to reject it
+    try {
+        session.activate();
+    } on PlatformException {
+        // E.g. a network error
+    }
+});
+```
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 #### Xamarin.iOS / .NET iOS implementation
 
@@ -250,6 +265,46 @@ CobrowseIO.handleSessionRequest = function(session) {
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+```dart
+CobrowseIO.instance.handleSessionRequest.listen((session) {
+    showDialog(
+        context: context,
+        builder: (BuildContext context) {
+            return AlertDialog(
+                title: const Text('Screen Sharing Request'),
+                content: const Text('A support agent would like to use this app with you. Do you accept?'),
+                actions: <Widget>[
+                    TextButton(
+                        onPressed: () {
+                            try {
+                                session.activate();
+                                Navigator.of(context).pop();
+                            } on PlatformException {
+                                // E.g. a network error
+                            }
+                        },
+                        child: const Text('Accept'),
+                    ),
+                    TextButton(
+                        onPressed: () {
+                            try {
+                                session.end();
+                                Navigator.of(context).pop();
+                            } on PlatformException {
+                                // E.g. a network error
+                            }
+                        },
+                        child: const Text('Cancel'),
+                    ),
+                ],
+            );
+        },
+    );
+});
+```
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 #### Xamarin.iOS implementation
 

sdk-features/full-device-capabilities/full-device-remote-control.md

@@ -71,6 +71,12 @@ Please follow the Android documentation to implement full device remote control
 {% endhint %}
 {% endtab %}
 
+{% tab title="Flutter" %}
+{% hint style="info" %}
+Please follow the Android documentation to implement full device remote control using Flutter.
+{% endhint %}
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 {% hint style="info" %}
 Please follow the Android documentation to implement full device remote control using Xamarin.
@@ -106,6 +112,14 @@ CobrowseAccessibilityService.showSetup(...);
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+The Cobrowse.io SDK for Flutter does not provide a default implementation to launch the accessibility service setup, but you can access this API in the native SDK using [Flutter platform channels](https://docs.flutter.dev/platform-integration/platform-channels).
+
+```java
+CobrowseAccessibilityService.showSetup(...);
+```
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 ```csharp
 CobrowseAccessibilityService.ShowSetup(...)
@@ -129,6 +143,14 @@ CobrowseAccessibilityService.isRunning(...);
 ```
 {% endtab %}
 
+{% tab title="Flutter" %}
+The Cobrowse.io SDK for Flutter does not provide a default implementation to detect the state of the accessibility service, but you can access this API in the native SDK using [Flutter platform channels](https://docs.flutter.dev/platform-integration/platform-channels).
+
+```java
+CobrowseAccessibilityService.isRunning(...);
+```
+{% endtab %}
+
 {% tab title="Xamarin / .NET Mobile" %}
 ```csharp
 CobrowseAccessibilityService.IsRunning(...)

sdk-features/full-device-capabilities/full-device-screen-sharing.md

@@ -277,6 +277,12 @@ Please follow the iOS and Android documentation to implement full device capabil
 * If you're not using `use_frameworks!` within CocoaPods, Xcode 13.3 and newer might not copy CobrowseIOExtension.framework extension dependency into resulting IPA builds. If this happens to you, please follow the guide under `iOS` -> `SPM` to create the script to copy `CobrowseIOAppExtension.framework` into the IPA on each build.
 {% endtab %}
 
+{% tab title="Flutter" %}
+{% hint style="info" %}
+Please follow the iOS and Android documentation to implement full device capabilities on Flutter.
+{% endhint %}
+{% endtab %}
+
 {% tab title="Xamarin.iOS / .NET iOS" %}
 {% hint style="info" %}
 Please review the iOS documentation for full device capabilities first.