{"id":59775,"date":"2023-11-09T18:03:00","date_gmt":"2023-11-09T12:33:00","guid":{"rendered":"https:\/\/www.oneclickitsolution.com\/blog\/?p=59775"},"modified":"2025-03-18T11:38:11","modified_gmt":"2025-03-18T06:08:11","slug":"agora-ui-kit-integration-in-flutter-app","status":"publish","type":"post","link":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app","title":{"rendered":"A Ultimate Guide to Agora UI Kit Integration in Flutter App"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"h-introduction\">Introduction<\/h2>\n\n\n\n<p>Flutter, a versatile and flexible framework, has become a popular choice among developers for creating visually stunning and interactive mobile applications. With the Agora UI Kit for Flutter, the process of integrating real-time audio and video communication into your apps has never been smoother. In this blog post, we will walk you through the installation steps and provide valuable insights on how to enhance your Flutter applications with seamless audio and video communication capabilities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prerequisites\">Prerequisites<\/h2>\n\n\n\n<p>Before we dive into the world of the Agora UI Kit in Flutter, let&#8217;s ensure you have the following essentials:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A basic understanding of Flutter development.<\/li>\n\n\n\n<li>Flutter SDK installed on your system.<\/li>\n\n\n\n<li>A code editor of your choice (such as VS Code or Android Studio).<\/li>\n\n\n\n<li>An Agora developer account. If you don&#8217;t have one, you can easily sign up at Agora&#8217;s Developer Portal.<\/li>\n\n\n\n<li>With these prerequisites in place, we&#8217;re all set to get started.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">InStallation<\/h2>\n\n\n\n<p><strong>Step 1<\/strong>: Creating a Flutter Project<\/p>\n\n\n\n<p>If you haven&#8217;t already set up a Flutter project, you can create one with a simple command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"dart\" class=\"language-dart\">flutter create AgoraChatApp<\/code><\/pre>\n\n\n\n<p>Feel free to replace &#8220;AgoraChatApp&#8221; with your preferred project name.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Installing the Agora UI Kit<\/p>\n\n\n\n<p>To seamlessly integrate the Agora UI Kit into your Flutter project, add it as a dependency in your pubspec.yaml file as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"dart\" class=\"language-dart\">Dependencies : \n\tAgora_uikit: ^1.3.7<\/code><\/pre>\n\n\n\n<p>After this, run:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"dart\" class=\"language-dart\">flutter pub get\n<\/code><\/pre>\n\n\n\n<p>Step 3: Setting Up Your Agora Account<\/p>\n\n\n\n<p>To use the Agora UI Kit, you&#8217;ll need an App ID from the Agora <strong><a href=\"https:\/\/www.oneclickitsolution.com\/hire-dedicated-developers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Developer Portal<\/a><\/strong>. If you don&#8217;t have one, sign in or sign up and create a new Agora application. Retrieve your App ID from the <a href=\"https:\/\/console.agora.io\">https:\/\/console.agora.io<\/a><br>Now, let&#8217;s take care of a few device permissions:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Android<\/h2>\n\n\n\n<p>In your Android level build.gradle add this at the end of the repositories:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"dart\" class=\"language-dart\">allprojects {\n\trepositories {\n\t\t...\n\t\tmaven { url 'https:\/\/jitpack.io' }\n\t}\n}\n<\/code><\/pre>\n\n\n\n<p>Open your AndroidManifest.xml file and add the required device permissions:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"dart\" class=\"language-dart\">&lt;manifest&gt;\n...\n&lt;uses-permission  android:name=\"android.permission.READ_PHONE_STATE\"\/&gt;\n&lt;uses-permission  android:name=\"android.permission.INTERNET\"  \/&gt;\n&lt;uses-permission  android:name=\"android.permission.RECORD_AUDIO\"  \/&gt;\n&lt;uses-permission  android:name=\"android.permission.CAMERA\"  \/&gt;\n&lt;uses-permission  android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"  \/&gt;\n&lt;uses-permission  android:name=\"android.permission.ACCESS_NETWORK_STATE\"  \/&gt;\n&lt;!-- The Agora SDK requires Bluetooth permissions in case users are using Bluetooth devices.--&gt;\n&lt;uses-permission  android:name=\"android.permission.BLUETOOTH\"  \/&gt;\n...\n&lt;\/manifest&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">iOS<\/h2>\n\n\n\n<p>In your info.plist, add the following:<\/p>\n\n\n\n<p><strong>Privacy &#8211; Microphone Usage Description (with a meaningful note).<\/strong><\/p>\n\n\n\n<p><strong>Privacy &#8211; Camera Usage Description (with a meaningful note).<\/strong><\/p>\n\n\n\n<p>If you want your application to continue voice calls in the background, enable background modes in Xcode by selecting your app target, clicking the Capabilities tab, and checking Audio, AirPlay, and Picture in Picture.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.oneclickitsolution.com\/contact-us\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"300\" src=\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/03\/Video-Conferencing-in-Education-Industry.png\" alt=\"video conferencing\" class=\"wp-image-54581\" srcset=\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/03\/Video-Conferencing-in-Education-Industry.png 1200w, https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/03\/Video-Conferencing-in-Education-Industry-768x192.png 768w, https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/03\/Video-Conferencing-in-Education-Industry-20x5.png 20w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Example<\/h2>\n\n\n\n<p>To give you a head start, here&#8217;s an example of how to use the Agora UI Kit in your Flutter app:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"dart\" class=\"language-dart\">\/\/ Instantiate the client\nfinal AgoraClient client = AgoraClient(\n  agoraConnectionData: AgoraConnectionData(\n    appId: \"&lt;--Add Your App Id Here--&gt;\",\n    channelName: \"test\",\nToken:\"&lt;--Add Your token Here--&gt;\",\n\n  ),\n);\n\n\/\/ Initialize the Agora Engine\n@override\nvoid initState() {\n  super.initState();\n  initAgora();\n}\n\nvoid initAgora() async {\n  await client.initialize();\n}\n\n\/\/ Build your layout\n@override\nWidget build(BuildContext context) {\n  return MaterialApp(\n    home: Scaffold(\n      body: SafeArea(\n        child: Stack(\n          children: [\n            AgoraVideoViewer(client: client), \n            AgoraVideoButtons(client: client),\n          ],\n        ),\n      ),\n    ),\n  );\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Integrating the Agora UI Kit into your Flutter app project is like opening a treasure chest of opportunities for creating real-time, engaging audio and video communication applications. By following the steps in this blog post, you will get to set a solid foundation. But remember, this is just the beginning. The Agora UI Kit offers a wide array of features and customization options to match the unique needs of your application.<\/p>\n\n\n\n<p>As you journey further into your Flutter project, you can explore features like real-time chat, interactive video streaming, and more. Whether you&#8217;re building a <a href=\"https:\/\/www.oneclickitsolution.com\/solutions\/video-conferencing\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>video conferencing app<\/strong><\/a>, a live streaming platform, or enhancing an existing application with real-time communication, the Agora UI Kit equips you with the tools to make it happen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Flutter, a versatile and flexible framework, has become a popular choice among developers for creating visually stunning and interactive mobile applications. With the Agora UI Kit for Flutter, the process of integrating real-time audio and video communication into your apps has never been smoother. In this blog post, we will walk you through the &hellip;<\/p>\n","protected":false},"author":92,"featured_media":63061,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,518],"tags":[1232,933,808,1149],"class_list":["post-59775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","category-ui-ux-design-analysis","tag-develop-video-conferencing-app","tag-technology","tag-video-conferencing-solutions-provider-company","tag-video-conferencing-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v24.8.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Complete Guide to Agora UI Kit Integration in Flutter App<\/title>\n<meta name=\"description\" content=\"Master Agora UI Kit integration in your Flutter app with our ultimate guide. Elevate your user interface effortlessly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Complete Guide to Agora UI Kit Integration in Flutter App\" \/>\n<meta property=\"og:description\" content=\"Master Agora UI Kit integration in your Flutter app with our ultimate guide. Elevate your user interface effortlessly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app\" \/>\n<meta property=\"og:site_name\" content=\"OneClick IT Consultancy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/oneclickconsultancy\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-09T12:33:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-18T06:08:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/11\/agora-ui-kit-integration-in-flutter-app-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Harsh Bhatt\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@OneclickIT\" \/>\n<meta name=\"twitter:site\" content=\"@OneclickIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Harsh Bhatt\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Complete Guide to Agora UI Kit Integration in Flutter App","description":"Master Agora UI Kit integration in your Flutter app with our ultimate guide. Elevate your user interface effortlessly.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app","og_locale":"en_US","og_type":"article","og_title":"Complete Guide to Agora UI Kit Integration in Flutter App","og_description":"Master Agora UI Kit integration in your Flutter app with our ultimate guide. Elevate your user interface effortlessly.","og_url":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app","og_site_name":"OneClick IT Consultancy","article_publisher":"https:\/\/www.facebook.com\/oneclickconsultancy","article_published_time":"2023-11-09T12:33:00+00:00","article_modified_time":"2025-03-18T06:08:11+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/11\/agora-ui-kit-integration-in-flutter-app-1.webp","type":"image\/webp"}],"author":"Harsh Bhatt","twitter_card":"summary_large_image","twitter_creator":"@OneclickIT","twitter_site":"@OneclickIT","twitter_misc":{"Written by":"Harsh Bhatt","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app#article","isPartOf":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app"},"author":{"name":"Harsh Bhatt","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/person\/dde2a5cc8a2ce770e5f5988c9a48f19f"},"headline":"A Ultimate Guide to Agora UI Kit Integration in Flutter App","datePublished":"2023-11-09T12:33:00+00:00","dateModified":"2025-03-18T06:08:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app"},"wordCount":525,"publisher":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app#primaryimage"},"thumbnailUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/11\/agora-ui-kit-integration-in-flutter-app-1.webp","keywords":["Develop Video Conferencing App","Technology","Video conferencing solutions provider","video conferencing technology"],"articleSection":["Technology","UI\/Ux Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app","url":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app","name":"Complete Guide to Agora UI Kit Integration in Flutter App","isPartOf":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app#primaryimage"},"image":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app#primaryimage"},"thumbnailUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/11\/agora-ui-kit-integration-in-flutter-app-1.webp","datePublished":"2023-11-09T12:33:00+00:00","dateModified":"2025-03-18T06:08:11+00:00","description":"Master Agora UI Kit integration in your Flutter app with our ultimate guide. Elevate your user interface effortlessly.","breadcrumb":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app#primaryimage","url":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/11\/agora-ui-kit-integration-in-flutter-app-1.webp","contentUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/11\/agora-ui-kit-integration-in-flutter-app-1.webp","width":1200,"height":628,"caption":"Guide for implementing agora UI Kit in flutter app"},{"@type":"BreadcrumbList","@id":"https:\/\/www.oneclickitsolution.com\/blog\/agora-ui-kit-integration-in-flutter-app#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.oneclickitsolution.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Ultimate Guide to Agora UI Kit Integration in Flutter App"}]},{"@type":"WebSite","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#website","url":"https:\/\/www.oneclickitsolution.com\/blog\/","name":"OneClick IT Consultancy","description":"We Build Brands from Ideas","publisher":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#organization"},"alternateName":"OneClick IT Solution","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.oneclickitsolution.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#organization","name":"OneClick IT Consultancy","alternateName":"OneClick IT Solution","url":"https:\/\/www.oneclickitsolution.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/10\/oneclick-official-logo.png","contentUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/10\/oneclick-official-logo.png","width":100,"height":100,"caption":"OneClick IT Consultancy"},"image":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/oneclickconsultancy","https:\/\/x.com\/OneclickIT","https:\/\/www.instagram.com\/oneclick.it.consultancy\/","https:\/\/www.linkedin.com\/company\/one-click-it-consultancy\/","https:\/\/www.pinterest.com\/oneclickitconsultancy\/","https:\/\/www.youtube.com\/channel\/UCsEG6aiwOwvYrcZxMoP5xjg","https:\/\/oneclickit.tumblr.com\/","https:\/\/dribbble.com\/oneclickitconsultancy"]},{"@type":"Person","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/person\/dde2a5cc8a2ce770e5f5988c9a48f19f","name":"Harsh Bhatt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d45366ba4dff09a9c864d499a9ec9b16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d45366ba4dff09a9c864d499a9ec9b16?s=96&d=mm&r=g","caption":"Harsh Bhatt"},"url":"https:\/\/www.oneclickitsolution.com\/blog\/author\/harshb"}]}},"_links":{"self":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts\/59775"}],"collection":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/users\/92"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/comments?post=59775"}],"version-history":[{"count":1,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts\/59775\/revisions"}],"predecessor-version":[{"id":62047,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts\/59775\/revisions\/62047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/media\/63061"}],"wp:attachment":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/media?parent=59775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/categories?post=59775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/tags?post=59775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}