{"id":6239,"date":"2022-03-28T14:30:53","date_gmt":"2022-03-28T06:30:53","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=6239"},"modified":"2025-04-09T15:16:35","modified_gmt":"2025-04-09T07:16:35","slug":"flutter-video-ui-kit","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video\/solutions\/video-ui-kit\/flutter-video-ui-kit\/","title":{"rendered":"Flutter Video UIKit"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\"><p>Flutter Video UIKit helps you develop a Video UI quickly without having to read through vast Flutter SDK Documentation and handling all complexities that comes along the development process. It provides easy way to get started with a Video UI for Hybrid Apps.<\/p><\/blockquote>\n\n\n\n<p class=\"has-text-align-center\"><\/p><div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link no-border-radius\" href=\"https:\/\/pub.dev\/packages\/sfm_uikit_flutter\">Install through Pub. v1.0.0<\/a><br>Released: April 8, 2025<\/div><p><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Table of Contents<\/h4>\n\n\n\n<ul><li><a href=\"#overview\">Overview<\/a><\/li><li><a href=\"#whats-new\">What&#8217;s New in v1.2?<\/a><\/li><li><a href=\"#how-to-use\">How to use<\/a><\/li><li><a href=\"#implementation\">Implementation<\/a><\/li><li><a href=\"#ui-customization\">UI Customization<\/a><\/li><li><a href=\"#features\">Features<\/a><ul><li><a href=\"#participant-list\" data-type=\"internal\" data-id=\"#participant-list\">Participant List<\/a><\/li><\/ul><\/li><\/ul>\n\n\n\n<a name=\"overview\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Overview<\/h2>\n\n\n\n<p>Flutter Video UIKit simplifies the integration of video capabilities into your hybrid app. This powerful framework for Flutter-based video application development offers extensive customization options to meet various requirements.<\/p>\n\n\n\n<p>You code less, only 3 lines of Code does all the magic of getting a video communication done. Thus, using UIKit helps you get a seamless Video UI with all Device Support in almost 99% reduced effort and time.<\/p>\n\n\n\n<a name=\"whats-new\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>What&#8217;s new with Fluuter UIKit v1.2?<\/h2>\n\n\n\n<ul><li><strong>Works with Low Code<\/strong>: iOS UI Kit now works with your Low Code settings configured using Visual Builder through Portal. <code>EnxVideoViewClass()<\/code> is modified to accept extra key for Low Code URL. <\/li><li><strong>File Share<\/strong>: Users can now share files among everyone or private with other specific users in-session.<\/li><li><strong>Participant List<\/strong>: Configuration options for Participant List. <\/li><\/ul>\n\n\n\n<a name=\"how-to-use\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>How to use Flutter Video UIKit?<\/h2>\n\n\n\n<p>In your Flutter application, add the <code>enx_uikit_flutter<\/code> as a dependency inside your <code>pubspec.yaml<\/code> file.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">enx_uikit_flutter: ^1.0.0<\/pre>\n\n\n\n<p><strong>Note<\/strong>: Add below line in for Android frameworks:<\/p>\n\n\n\n<p>Go to project level build.gradle&nbsp;within all project section<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"966\" height=\"256\" src=\"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/image.png\" alt=\"\" class=\"wp-image-7305\" srcset=\"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/image.png 966w, https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/image-300x80.png 300w, https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/image-768x204.png 768w\" sizes=\"(max-width: 966px) 100vw, 966px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Define Device Permissions<\/h3>\n\n\n\n<p><code>enx_uikit_flutter <\/code>requires camera and microphone permission to start video call.<\/p>\n\n\n\n<p><strong>For Android:<\/strong> Open the <code>AndroidManifest.xml<\/code> file and add the required device permissions to the file.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;manifest&gt; \n... \n&lt;uses-permission android:name=\"android.permission.CAMERA\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.INTERNET\"\/&gt; \n&lt;uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.RECORD_AUDIO\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.BLUETOOTH\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.WAKE_LOCK\" \/&gt; \n... \n&lt;\/manifest&gt; <\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>For iOS:<\/strong> Open <code>info.plist<\/code> and add:<\/p>\n\n\n\n<ul><li>Privacy: Microphone Usage Description, and add a note in the Value column.<\/li><li>Privacy: Camera Usage Description, and add a note in the Value column.<\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>How to get Camera and mic permission in Flutter?<\/strong><\/p>\n\n\n\n<p>Create common method for permission:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Future&lt;bool&gt; handlePermissionsForCall(BuildContext context) async {\n  Map&lt;Permission, PermissionStatus&gt; statuses = await [\n    Permission.camera,\n    Permission.microphone,\n\n  ].request();\n\n   if (statuses[Permission.camera]!.isPermanentlyDenied) {\n    showCustomDialog(context, \"Permission Required\",\n        \"Camera Permission Required for Video Call\", () {\n          Navigator.pop(context);\n          openAppSettings();\n        });\n    return false;\n  } else if (statuses[Permission.microphone]!.isPermanentlyDenied) {\n    showCustomDialog(context, \"Permission Required\",\n        \"Microphone Permission Required for Video Call\", () {\n          Navigator.pop(context);\n          openAppSettings();\n        });\n    return false;\n  }\n\n  if (statuses[Permission.camera]!.isDenied) {\n    return false;\n  } else if (statuses[Permission.microphone]!.isDenied) {\n    return false;\n  }\n  return true;\n}\n\nvoid showCustomDialog(BuildContext context, String title, String message,\n    Function okPressed) async {\n  showDialog(\n    context: context,\n    barrierDismissible: false,\n    builder: (BuildContext context) {\n      \/\/ return object of type Dialog\n\n      return AlertDialog(\n        shape: const RoundedRectangleBorder(\n            borderRadius: BorderRadius.all(Radius.circular(10.0))),\n        title: Text(\n          title\n        ),\n        content:  Text(\n          message\n          \n       ),\n        actions: &lt;Widget&gt;[\n          FlatButton(\n            child:\n             const Text(\"OK\"),\n            onPressed: okPressed(),\n          ),\n        ],\n      );\n    },\n  );\n}<\/pre>\n\n\n\n<p>Call above method as per your requirements after creating token:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">bool isPermissionGranted = await handlePermissionsForCall(context);<\/pre>\n\n\n\n<p>Follow next steps if Device Permission is granted.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a name=\"implementation\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Implementation<\/h2>\n\n\n\n<h3>Prerequisite<\/h3>\n\n\n\n<p>To use the Enx_UIKit_Flutter Framework user must have the following:<\/p>\n\n\n\n<ul><li><a href=\"\/developer\/video-api\/server-api\/rooms-route\/#create-token\">A valid Token<\/a> to join the <a href=\"\/developer\/video-api\/server-api\/rooms-route\/#create-room\">room<\/a>.<\/li><li>Camera Permission<\/li><li>Mic Permission<\/li><\/ul>\n\n\n\n<h3> Code a little<\/h3>\n\n\n\n<ul><li><strong>Step#1: <\/strong>Go to your class and import the <code>enx_uikit_flutter&nbsp;<\/code><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">import 'package:enx_uikit_flutter\/enx_uikit_flutter.dart'; <\/pre>\n\n\n\n<ul><li><strong>Step#2:<\/strong> Initiate <code>EnxVideoView <\/code>Class: You are to pass a valid Token and handle callback.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ embedUrl is optional, used to import settings of Low Code\nEnxVideoView(token: token,  embedUrl: \"Low Code Host URL\u201d,\nconnectError: (Map&lt;dynamic, dynamic&gt; map) {\n\t\t`\/\/Here is the reason,  will carry information about cause of error\n\t\t`print('connectError' + jsonEncode(map));\t\n\t},\n\tdisconnect: (Map&lt;dynamic, dynamic&gt; map) {\n\t\t\/\/Here is the reason,  will carry information about cause of disconnection\n\t\tprint('disconnect' + jsonEncode(map));\n\t}\n);<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"block-89ebd1d2-46c3-4a89-bdea-7eb0b0aabb9d\">UI Customization<\/h2>\n\n\n\n<a name=\"ui-customization\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>To <strong>Customize<\/strong><\/strong> <strong>Bottom Option:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var setting = EnxSetting.instance;\n setting.createBottomOption(BottomOption.audio);\n setting.createBottomOption(BottomOption.video);\n setting.createBottomOption(BottomOption.groupChat);\n setting.createBottomOption(BottomOption.disconnect);\n setting.createBottomOption(BottomOption.cameraSwitch);<\/pre>\n\n\n\n<p><strong>To  <strong><strong>customize<\/strong><\/strong> Top Option:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var setting = EnxSetting.instance;\n setting.createTopOption(TopOption.userList);\n setting.createTopOption(TopOption.requestFloor);\n setting.createTopOption(TopOption.menu);<\/pre>\n\n\n\n<p><strong>To  <strong><strong>customize<\/strong><\/strong> Participant List:<\/strong> Use  <code>configureParticipantList()<\/code> method to add different options against each participants in Participant List. Refer example below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var setting = EnxSetting.instance; \n\n\/\/ Show disconnect option against each participant\nsetting.configureParticipantList(ParticipantListOption.disconnect); \n\n\/\/ Show private chat option against each participant\nsetting.configureParticipantList(ParticipantListOption.chat); <\/pre>\n\n\n\n<p><strong>To  <strong><strong>create extra Button<\/strong><\/strong>:<\/strong> Use <code>createExtraButton()<\/code> method to create a list of buttons to use with your own style.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var setting = EnxSetting.instance; \nsetting.createExtraButton([ \n\tCustomMaterialButton( \n\t\tonPressed: () async {\n\t\t}, \n\t\t\n\t\tchild: Container( \n\t\t\tpadding: const EdgeInsets.all(1.0), \n\t\t\tdecoration: const BoxDecoration(\n\t\t\t\tshape: BoxShape.circle, \n\t\t\t\tcolor: Colors.blue), \n\t\t\tchild: const Icon( \n\t\t\t\tIcons.visibility, \n\t\t\t\tcolor: Colors.white, \n\t\t\t\tsize: 20)\n\t\t), \n\t) \n]);<\/pre>\n\n\n\n<a name=\"features\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Features<\/h2>\n\n\n\n<ul><li><strong>For Participants and Moderators<\/strong><ul><li>Mute Self-Audio<\/li><li>Mute Self-Video<\/li><li>Switch Camera<\/li><li>Switch Audio Device<\/li><li>Group and Private Chat<\/li><li>Participant List<\/li><li>Switch Layout<\/li><li>Disconnect Call<\/li><\/ul><\/li><li><strong>For Moderators only<\/strong><ul><li>Record Session<\/li><li>Mute Room<\/li><li>Mute Participant-Audio<\/li><li>Mute Participant-Video<\/li><li>Drop Participant from room<\/li><\/ul><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Flutter Video UIKit helps you develop a Video UI quickly without having to read through vast Flutter SDK Documentation and handling all complexities that comes along the development process. It provides easy way to get started with a Video UI for Hybrid Apps. Install through Pub. v1.0.0Released: April 8, 2025 Table of Contents Overview What&#8217;s New in v1.2? How to use Implementation UI Customization Features Participant List Overview Flutter Video&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":6062,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ub_ctt_via":""},"featured_image_src":null,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"featured":false,"featured-large":false},"uagb_author_info":{"display_name":"vcxdevwpadmin","author_link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/author\/vcxdevwpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"Flutter Video UIKit helps you develop a Video UI quickly without having to read through vast Flutter SDK Documentation and handling all complexities that comes along the development process. It provides easy way to get started with a Video UI for Hybrid Apps. Install through Pub. v1.0.0Released: April 8, 2025 Table of Contents Overview What&#8217;s&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/6239"}],"collection":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/comments?post=6239"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/6239\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/6062"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=6239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}