{"id":54,"date":"2025-07-21T06:28:16","date_gmt":"2025-07-21T06:28:16","guid":{"rendered":"https:\/\/documentation.iqonic.design\/prokit-flutter\/?p=54"},"modified":"2025-07-28T07:57:24","modified_gmt":"2025-07-28T07:57:24","slug":"flutter-configuration","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/prokit-flutter\/flutter-configuration\/","title":{"rendered":"\ud83d\udcf2Flutter Configuration"},"content":{"rendered":"<div class=\"nolwrap\">\n<p>\ud83d\udd52&nbsp;<strong>Estimated Reading Time<\/strong>: 2 minutes<br>\ud83d\udcc2&nbsp;<strong>Location<\/strong>: Configurations &amp; Customization \u2192 Flutter Configuration<\/p>\n\n\n\n<p>\u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udccc<strong>&nbsp;What is this file for?<\/strong><\/h2>\n\n\n\n<p>This document helps you configure the Flutter-based mobile application for your ProKit setup. These steps include changing app name, domain, colors, fonts, default language, notification icon, and Firebase settings.<\/p>\n\n\n\n<p id=\"block-88291e9d-e043-4c61-b217-ad23ef93cbf5\">\u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udfe9 1. Change App Name<\/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>\u270f\ufe0f 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\">\ud83d\udfe9 2. Reconfigure Server URL<\/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>\u270f\ufe0f 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<h2 class=\"wp-block-heading\">\ud83d\udfe9 3. Change Default Language<\/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>\u270f\ufe0f 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\">\ud83d\udfe9 4. Change App Font<\/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>\u270f\ufe0f Update both DarkTheme and LightTheme like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>fontFamily: GoogleFonts.FONT_NAME().fontFamily,<\/strong><br><strong>textTheme: GoogleFonts.FONT_NAMETextTheme(),<\/strong><code><\/code><\/pre>\n\n\n\n<p>\ud83d\udccc Be sure to apply to both themes to ensure UI consistency.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udfe9 5. Change Primary &amp; Secondary Color<\/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>\u270f\ufe0f Edit color constants:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>const appColorPrimary = Color(0xFF5670CC);<\/strong><br><strong>const appColorSecondary = Color(0xFFF67E7D);<\/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\">\ud83d\udfe9 6. Update Notification Icon<\/h2>\n\n\n\n<p>\ud83d\udcc1&nbsp;<strong>Path:<\/strong><br><strong>lib \u2192 utils \u2192 push_notification_service.dart<\/strong><\/p>\n\n\n\n<p>\u270f\ufe0f In the&nbsp;<strong>showNotification()<\/strong>&nbsp;method, update:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>const AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings<\/strong>('@drawable\/YOUR NOTIFICATION ICON NAME');<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">var androidPlatformChannelSpecifics = AndroidNotificationDetails(<br>    'notification',<br>    'Notification',<br>    importance: Importance.high,<br>    visibility: NotificationVisibility.public,<br>    autoCancel: true,<br>    \/\/color: primaryColor,<br>    playSound: true,<br>    priority: Priority.high,<br> <strong>   icon: '@drawable\/YOUR NOTIFICATION ICON NAME',<\/strong><br>  );<\/pre>\n\n\n\n<p>\ud83d\udccc 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\">\ud83d\udfe9 7. Add FirebaseOptions<\/h2>\n\n\n\n<p>After completing Firebase setup, update the\u00a0<a href=\"https:\/\/documentation.iqonic.design\/prokit-flutter\/configurations-customization\/firebase-configuration\">Firebase configuration<\/a>\u00a0as 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>\u270f\ufe0f 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>\ud83d\udccc 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\">\ud83d\udfe9 8. Assign Firebase Initialization<\/h2>\n\n\n\n<p>\ud83d\udcc1&nbsp;<strong>Path:<\/strong><br><code>main.dart<\/code><\/p>\n\n\n\n<p>\u270f\ufe0f Ensure this line exists in&nbsp;<strong>main()<\/strong>&nbsp;method:<\/p>\n\n\n\n<p>verify&nbsp;<strong>DefaultFirebaseOptions<\/strong>&nbsp;is assigned to&nbsp;<strong>options<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);<\/pre>\n\n\n\n<p id=\"block-88291e9d-e043-4c61-b217-ad23ef93cbf5\">\u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013<\/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<\/div>","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd52&nbsp;Estimated Reading Time: 2 minutes\ud83d\udcc2&nbsp;Location: Configurations &amp; Customization \u2192 Flutter Configuration \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 \u2013 [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":52,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-54","post","type-post","status-publish","format-standard","hentry","category-prokit-flutter"],"featured_image_src":null,"author_info":{"display_name":"flutteradminiq","author_link":"https:\/\/documentation.iqonic.design\/prokit-flutter\/author\/flutteradminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":6,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts\/54\/revisions"}],"predecessor-version":[{"id":336,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts\/54\/revisions\/336"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/posts\/52"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/prokit-flutter\/wp-json\/wp\/v2\/tags?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}