{"id":80,"date":"2025-04-03T07:24:17","date_gmt":"2025-04-03T07:24:17","guid":{"rendered":"https:\/\/documentation.iqonic.design\/streamit-laravel\/?p=80"},"modified":"2026-02-27T09:37:19","modified_gmt":"2026-02-27T09:37:19","slug":"flutter-configuration","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/streamit-laravel\/flutter-configuration\/","title":{"rendered":"Flutter Configuration"},"content":{"rendered":"<div class=\"nolwrap\">\n<p>\ud83d\udd52&nbsp;<strong>Estimated Reading Time<\/strong>: 2 minutes<\/p>\n\n\n\n<p>This document helps you configure the Flutter-based mobile application for your Streamit Laravel Project setup. These steps include changing app name, domain, colors, fonts, default language, notification icon, and Firebase settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> 1. <strong>Change The App&#8217;s Name<\/strong><\/h2>\n\n\n\n<p>To change your app\u2019s name:<\/p>\n\n\n\n<p>\ud83d\udcc1&nbsp;<strong>Path:<\/strong><br><strong>lib \u2192 configs.dart<\/strong><\/p>\n\n\n\n<p> Update the following line:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>const APP_NAME = 'YOUR APP NAME';<\/strong><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"> 2. <strong>Reconfiguration The Server URL<\/strong><\/h2>\n\n\n\n<p>\ud83d\udcc1&nbsp;<strong>Path:<\/strong><br><strong>lib \u2192 configs.dart<\/strong><\/p>\n\n\n\n<p> Update:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>const DOMAIN_URL = \"ADD YOUR DOMAIN URL\";<\/strong><\/pre>\n\n\n\n<p>Replace this with your actual domain like:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">https:\/\/yourdomain.com\/<\/pre>\n\n\n\n<p><strong>Note :<\/strong> Do not add (&#8216;\/&#8217;) at the end of DOMAIN_URL<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. <strong>Firebase Server Client ID<\/strong><\/h2>\n\n\n\n<p>\ud83d\udcc1&nbsp;<strong>Path:<\/strong><br><strong>lib \u2192 configs.dart<\/strong><\/p>\n\n\n\n<p>Update:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>const FIREBASE_SERVER_CLIENT_ID = 'FIREBASE SERVER CLIENT ID';<\/strong><\/pre>\n\n\n\n<p>Replace this with your actual <strong>Firebase Server Client ID<\/strong>.<\/p>\n\n\n\n<p>\ud83d\udc49 To find it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>android\/app\/google-services.json<\/strong><\/li>\n\n\n\n<li>Find press ctrl+F and look for &#8220;client_type&#8221;: 3 &#8220;client_id&#8221; in same object has be pasted here.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"891\" height=\"616\" src=\"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-content\/uploads\/sites\/5\/2025\/04\/client_id.png\" alt=\"\" class=\"wp-image-1349\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4. <strong>Change Default Language<\/strong><\/h2>\n\n\n\n<p>\ud83d\udcc1&nbsp;<strong>Path:<\/strong><br><strong>lib \u2192 configs.dart<\/strong><\/p>\n\n\n\n<p> Edit:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>const DEFAULT_LANGUAGE = \"LANGUAGE CODE\";<\/strong>  \/\/ e.g., \"en\", \"ar\", \"de\", \"pt\", \"es\"<code><\/code><\/pre>\n\n\n\n<p>\ud83d\udca1&nbsp;<strong>Tip:<\/strong>&nbsp;Use only supported language codes (<code>\"en\"<\/code>,&nbsp;<code>\"ar\"<\/code>,&nbsp;<code>\"de\"<\/code>,&nbsp;<code>\"pt\"<\/code>,&nbsp;<code>\"es\"<\/code>). For other languages, additional customization will be required.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use only the language code, not the entire language name. You can find the language codes&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_ISO_639-1_codes\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">5. <strong>Change App Font<\/strong><\/h2>\n\n\n\n<p>\ud83d\udcc1&nbsp;<strong>Path:<\/strong><br><strong>lib \u2192 app_theme.dart<\/strong><\/p>\n\n\n\n<p> Update both DarkTheme and LightTheme like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>fontFamily: GoogleFonts.roboto().fontFamily,<br>textTheme: GoogleFonts.FONT_NAMETextTheme(),<\/strong><\/pre>\n\n\n\n<p> Be sure to apply to both themes to ensure UI consistency.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1296\" height=\"675\" src=\"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-content\/uploads\/sites\/5\/2025\/04\/Change_App_Font.png\" alt=\"\" class=\"wp-image-727\" \/><\/figure>\n\n\n\n<p><strong>\ud83d\udca1\u00a0<strong>Tip:<\/strong>\u00a0<\/strong> Remember to apply these steps to both the DarkTheme and LightTheme in the app_theme.dart file to ensure consistent behavior across your app&#8217;s themes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6.<strong>Change Primary Color<\/strong> <strong>&amp; Secondary Color<\/strong><\/h2>\n\n\n\n<p>\ud83d\udcc1&nbsp;<strong>Path:<\/strong><br><strong>lib \u2192 utils \u2192 colors.dart<\/strong><\/p>\n\n\n\n<p> Edit color constants:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>const primaryColor = Color(0xFF5F60B9);<\/strong><br><strong>const appSecondaryColor = Color(0xFF68685);<\/strong><\/pre>\n\n\n\n<p>\ud83d\udca1&nbsp;<strong>Tip:<\/strong>&nbsp;Always use full 8-digit hex code (<code>0xFFxxxxxx<\/code>) to avoid color issues across devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. <strong>Change App Logo<\/strong><\/h2>\n\n\n\n<p>In the main directory go to&nbsp;<strong>&#8216;assets&#8217;<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Change logo on splash_screen.dart\n<ul class=\"wp-block-list\">\n<li>Replace &#8220;<strong>app_logo<\/strong>&#8221; image with same name just replace file.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Change logo on home_screen.dart\n<ul class=\"wp-block-list\">\n<li>Replace &#8220;<strong>ic_icon<\/strong>&#8221; icon with same name just replace file.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>After completing Firebase configuration. Please make sure you update Firebase Options<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. <strong>Update Notification Icon Name<\/strong><\/h2>\n\n\n\n<p>After creating notification icon you can perform this change.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open&nbsp;<strong>lib \u2192 utils \u2192 push_notification_service.dart<\/strong>.<\/li>\n\n\n\n<li>In initializePlatformSpecificNotificationChannel() method find lines below<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">  const AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings('@drawable\/YOUR NOTIFICATION ICON NAME');<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In showNotification() method find lines below<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">var androidPlatformChannelSpecifics = AndroidNotificationDetails(\n    ...\n    ...\n    icon: '@drawable\/YOUR NOTIFICATION ICON NAME',\n  );<\/pre>\n\n\n\n<p> Replace&nbsp;<strong>YOUR NOTIFICATION ICON NAME<\/strong>&nbsp;with your actual icon file name in&nbsp;<strong>drawable<\/strong>&nbsp;folder.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. <strong>Set up AdMob<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Replace Google AdMob IDs for different types of ads in&nbsp;<strong>lib -&gt; config.dart<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/\/Android<br>const String interstitialAdId = 'YOUR_INTERSTITIAL_AD_ID';<br>const String bannerAdId = 'YOUR_BANNER_AD_ID';<br><br>\/\/\/iOS<br>const IOS_INTERSTITIAL_AD_ID = \"YOUR_IOS_INTERSTITIAL_AD_ID\";<br>const IOS_BANNER_AD_ID = \"YOUR_IOS_BANNER_AD_ID\";<\/pre>\n\n\n\n<p><strong>If you haven\u2019t set up AdMob yet, follow these steps:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Set up your app in your AdMob account\n<ul class=\"wp-block-list\">\n<li>Register your app as an AdMob app by completing the following steps:<\/li>\n\n\n\n<li><a href=\"https:\/\/admob.google.com\/home\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sign in <\/a>&nbsp;or&nbsp;<a href=\"https:\/\/support.google.com\/admob\/answer\/7356219\" target=\"_blank\" rel=\"noreferrer noopener\">sign up <\/a>an AdMob account.<\/li>\n\n\n\n<li>This step creates an AdMob app with a unique&nbsp;<a href=\"https:\/\/support.google.com\/admob\/answer\/7356431\" target=\"_blank\" rel=\"noreferrer noopener\">AdMob App ID<\/a>&nbsp;that is needed later in this guide.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Return to your Application source code.<\/li>\n\n\n\n<li>Open the&nbsp;<strong>lib \u2192 configs.dart<\/strong>&nbsp;file.<\/li>\n\n\n\n<li>To ensure proper functionality , replace the variables &#8211; Keys to replace:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">   \/\/\/Android<br>   const String interstitialAdId <br>   const String bannerAdId<br>   \/\/\/iOS<br>   const IOS_INTERSTITIAL_AD_ID <br>   const IOS_BANNER_AD_ID<\/pre>\n\n\n\n<p>You can use below keys to test Admob Banner Ads<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/ \/\/Android<br>const BANNER_AD_ID = \"ca-app-pub-3 940256099942544\/9214589741\";<br>\/ \/\/IOS<br>const IOS_BANNER_AD_ID = \"ca-app-pub-3940256099942544\/2934735716\";<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">10. <strong>Update Firebase Option<\/strong><\/h2>\n\n\n\n<p>After completing Firebase setup, update the&nbsp;<a href=\"https:\/\/documentation.iqonic.design\/streamit-laravel\/configurations-customization\/firebase-configuration\">Firebase configuration<\/a>&nbsp;as follows:<\/p>\n\n\n\n<p>\ud83d\udcc1&nbsp;<strong>Path:<\/strong><br><strong>lib \u2192 firebase_options.dart<\/strong><\/p>\n\n\n\n<p> Replace the values for both Android and iOS:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">static const FirebaseOptions android = FirebaseOptions(<br><strong>  appId: \"FIREBASE ANDROID APP ID\",<br>  apiKey: 'FIREBASE API KEY',<\/strong><br>  projectId: 'FIREBASE PROJECT ID',<br>  messagingSenderId: 'FIREBASE SENDER ID',<br>  storageBucket: 'FIREBASE STORAGE BUCKET',<br>);<br><br>static const FirebaseOptions ios = FirebaseOptions(<br><strong>  appId: \"FIREBASE iOS APP ID\",<br>  apiKey: 'FIREBASE API KEY',<\/strong><br>  projectId: 'FIREBASE PROJECT ID',<br>  messagingSenderId: 'FIREBASE SENDER ID',<br>  storageBucket: 'FIREBASE STORAGE BUCKET',<br>  iosBundleId: 'FIREBASE iOS',<br>);<code><\/code><\/pre>\n\n\n\n<p> How to get these values:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open your Firebase Console.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-13.png\"><img decoding=\"async\" src=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-13.png\" alt=\"\" class=\"wp-image-375\" \/><\/a><\/figure>\n\n\n\n<p>For&nbsp;<strong>apiKey<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Key<\/th><th>Where to find<\/th><\/tr><\/thead><tbody><tr><td><code>apiKey<\/code>,&nbsp;<code>projectId<\/code><\/td><td>Firebase Console \u2192 Project Settings \u2192 General tab<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-14.png\"><img decoding=\"async\" src=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-14.png\" alt=\"\" class=\"wp-image-376\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to Project Settings and click on&nbsp;<strong>General<\/strong>&nbsp;tab you\u2019ll find&nbsp;<strong>Web API Key<\/strong>&nbsp;and&nbsp;<strong>Project ID<\/strong>&nbsp;and paste it all blocks in dart file mentioned above.<\/li>\n<\/ul>\n\n\n\n<p>For<strong>&nbsp;Android App ID&nbsp;<\/strong>and&nbsp;<strong>iOS App Id<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Key<\/th><th>Where to find<\/th><\/tr><\/thead><tbody><tr><td><code>appId<\/code><\/td><td>Firebase Console \u2192 General tab \u2192 Your Apps section<\/td><\/tr><tr><td><code>iosBundleId<\/code><\/td><td>Firebase Console \u2192 General tab \u2192 Your iOS App section<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-15.png\"><img decoding=\"async\" src=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-15.png\" alt=\"\" class=\"wp-image-378\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scroll Down and in Your Apps section you\u2019ll find App Id in Android and iOS section. Copy respective App ID and paste it to appId.<br>Copy Bundle ID and paste it to&nbsp;<strong>iosBundleId<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>For&nbsp;<strong>messagingSenderId<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Key<\/th><th>Where to find<\/th><\/tr><\/thead><tbody><tr><td><code>messagingSenderId<\/code><\/td><td>Firebase Console \u2192 Cloud Messaging tab<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-16.png\"><img decoding=\"async\" src=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-16.png\" alt=\"\" class=\"wp-image-379\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on&nbsp;<strong>Cloud Messaging<\/strong>&nbsp;you will see&nbsp;<strong>Sender ID<\/strong>. Copy that paste it to&nbsp;<strong>messagingSenderId<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>For&nbsp;<strong>storageBucket<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Key<\/th><th>Where to find<\/th><\/tr><\/thead><tbody><tr><td><code>storageBucket<\/code><\/td><td><br>Navigate to&nbsp;<strong>android\/app\/google-services.json<\/strong>&nbsp;Under&nbsp;<strong>\u201cproject_info\u201d<\/strong>&nbsp;find&nbsp;<strong>\u201cstorage_bucket\u201d<\/strong>&nbsp;and copy value and paste it into&nbsp;<strong>storageBucket<\/strong>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">11. <strong>Change the Google AdMob App ID in AndroidManifest.xml and Info.plist<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/documentation.iqonic.design\/streamit-laravel\/configurations-customization\/android-configuration\">Change Google AdMob App ID in AndroidManifest.xml<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/documentation.iqonic.design\/streamit-laravel\/configurations-customization\/ios-configuration\">Change Google AdMob App ID in Info.plist<\/a><\/p>\n\n\n\n<p>\u2705 After completing all these settings, your app will be properly customized when you run the project.<\/p>\n\n\n\n<p><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd52&nbsp;Estimated Reading Time: 2 minutes This document helps you configure the Flutter-based mobile application for your Streamit Laravel Project setup. These steps include changing app name, domain, colors, fonts, default language, notification icon, and Firebase settings. 1. Change The App&#8217;s Name To change your app\u2019s name: \ud83d\udcc1&nbsp;Path:lib \u2192 configs.dart Update the following line: const APP_NAME [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":78,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-80","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"author_info":{"display_name":"laraveladminiq","author_link":"https:\/\/documentation.iqonic.design\/streamit-laravel\/author\/laraveladminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":26,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"predecessor-version":[{"id":1827,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/80\/revisions\/1827"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/78"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}