Flutter Configuration

🕒 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’s Name

To change your app’s name:

📁 Path:
lib → configs.dart

Update the following line:

const APP_NAME = 'YOUR APP NAME';

2. Reconfiguration The Server URL

📁 Path:
lib → configs.dart

Update:

const DOMAIN_URL = "ADD YOUR DOMAIN URL";

Replace this with your actual domain like:

https://yourdomain.com/

Note : Do not add (‘/’) at the end of DOMAIN_URL

3. Firebase Server Client ID

📁 Path:
lib → configs.dart

Update:

const FIREBASE_SERVER_CLIENT_ID = 'FIREBASE SERVER CLIENT ID';

Replace this with your actual Firebase Server Client ID.

👉 To find it:

• Go to android/app/google-services.json
• Find press ctrl+F and look for “client_type”: 3 “client_id” in same object has be pasted here.

4. Change Default Language

📁 Path:
lib → configs.dart

Edit:

const DEFAULT_LANGUAGE = "LANGUAGE CODE";  // e.g., "en", "ar", "de", "pt", "es"

💡 Tip: Use only supported language codes ("en", "ar", "de", "pt", "es"). For other languages, additional customization will be required.

• Use only the language code, not the entire language name. You can find the language codes here.

5. Change App Font

📁 Path:
lib → app_theme.dart

Update both DarkTheme and LightTheme like this:

fontFamily: GoogleFonts.roboto().fontFamily,
textTheme: GoogleFonts.FONT_NAMETextTheme(),

Be sure to apply to both themes to ensure UI consistency.

TIP

Remember to apply these steps to both the DarkTheme and LightTheme in the app_theme.dart file to ensure consistent behavior across your app’s themes.

6.Change Primary Color & Secondary Color

📁 Path:
lib → utils → colors.dart

Edit color constants:

const primaryColor = Color(0xFF5F60B9);
const appSecondaryColor = Color(0xFF68685);

💡 Tip: Always use full 8-digit hex code (0xFFxxxxxx) to avoid color issues across devices.

7. Change App Logo

In the main directory go to ‘assets’

1. Change logo on splash_screen.dart
   • Replace “app_logo” image with same name just replace file.
2. Change logo on home_screen.dart
   • Replace “ic_icon” icon with same name just replace file.

After completing Firebase configuration. Please make sure you update Firebase Options

8. Update Notification Icon Name

After creating notification icon you can perform this change.

• Open lib → utils → push_notification_service.dart.
• In initializePlatformSpecificNotificationChannel() method find lines below

  const AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings('@drawable/YOUR NOTIFICATION ICON NAME');

• In showNotification() method find lines below

var androidPlatformChannelSpecifics = AndroidNotificationDetails(
    ...
    ...
    icon: '@drawable/YOUR NOTIFICATION ICON NAME',
  );

Replace YOUR NOTIFICATION ICON NAME with your actual icon file name in drawable folder.

9. Set up AdMob

• Replace Google AdMob IDs for different types of ads in lib -> config.dart

///Android
const String interstitialAdId = 'YOUR_INTERSTITIAL_AD_ID';
const String bannerAdId = 'YOUR_BANNER_AD_ID';

///iOS
const IOS_INTERSTITIAL_AD_ID = "YOUR_IOS_INTERSTITIAL_AD_ID";
const IOS_BANNER_AD_ID = "YOUR_IOS_BANNER_AD_ID";

If you haven’t set up AdMob yet, follow these steps:

1. Set up your app in your AdMob account
   • Register your app as an AdMob app by completing the following steps:
   • Sign in  or sign up an AdMob account.
   • This step creates an AdMob app with a unique AdMob App ID that is needed later in this guide.
2. Return to your Application source code.
3. Open the lib → configs.dart file.
4. To ensure proper functionality , replace the variables – Keys to replace:

   ///Android
   const String interstitialAdId 
   const String bannerAdId
   ///iOS
   const IOS_INTERSTITIAL_AD_ID 
   const IOS_BANNER_AD_ID

You can use below keys to test Admob Banner Ads

/ //Android
const BANNER_AD_ID = "ca-app-pub-3 940256099942544/9214589741";
/ //IOS
const IOS_BANNER_AD_ID = "ca-app-pub-3940256099942544/2934735716";

10. Update Firebase Option

After completing Firebase setup, update the Firebase configuration as follows:

📁 Path:
lib → firebase_options.dart

Replace the values for both Android and iOS:

static const FirebaseOptions android = FirebaseOptions(
  appId: "FIREBASE ANDROID APP ID",
  apiKey: 'FIREBASE API KEY',
  projectId: 'FIREBASE PROJECT ID',
  messagingSenderId: 'FIREBASE SENDER ID',
  storageBucket: 'FIREBASE STORAGE BUCKET',
);

static const FirebaseOptions ios = FirebaseOptions(
  appId: "FIREBASE iOS APP ID",
  apiKey: 'FIREBASE API KEY',
  projectId: 'FIREBASE PROJECT ID',
  messagingSenderId: 'FIREBASE SENDER ID',
  storageBucket: 'FIREBASE STORAGE BUCKET',
  iosBundleId: 'FIREBASE iOS',
);

How to get these values:

• Open your Firebase Console.

For apiKey

Key	Where to find
apiKey, projectId	Firebase Console → Project Settings → General tab

• Go to Project Settings and click on General tab you’ll find Web API Key and Project ID and paste it all blocks in dart file mentioned above.

For Android App ID and iOS App Id

Key	Where to find
appId	Firebase Console → General tab → Your Apps section
iosBundleId	Firebase Console → General tab → Your iOS App section

• Scroll Down and in Your Apps section you’ll find App Id in Android and iOS section. Copy respective App ID and paste it to appId.
  Copy Bundle ID and paste it to iosBundleId.

For messagingSenderId

Key	Where to find
messagingSenderId	Firebase Console → Cloud Messaging tab

• Click on Cloud Messaging you will see Sender ID. Copy that paste it to messagingSenderId.

For storageBucket

Key	Where to find
storageBucket	Navigate to android/app/google-services.json Under “project_info” find “storage_bucket” and copy value and paste it into storageBucket.

11. Change the Google AdMob App ID in AndroidManifest.xml and Info.plist

Change Google AdMob App ID in AndroidManifest.xml

Change Google AdMob App ID in Info.plist

✅ After completing all these settings, your app will be properly customized when you run the project.