Setup Android App

Table of Contents

Android Source Code Setup #

  1. Download the Fiberchat User app purchased package from Codecanyon. Open the source code (project folder/ fiberchat folder) in your preferred Code Editor by simply Drag & Drop the folder in vs code. We recommend to use VS Code, especially for flutter apps.
  2. You must be ready with your unique App label , Andoid App package name, Project folder name
  3. Rename the “fiberchat” folder name with your “project folder name”.
  4. Replace the default package name (com.tctech.fiberchatdemo) with your android package name inside the following files:
    • android/app/src/main/kotlin/com/fiberchat/fiberchat/MainActivity.kt
    • android/app/src/main/res/values/strings.xml
    • android/app/src/main/AndroidManifest.xml
    • android/app/src/profile/AndroidManifest.xml
    • android/app/src/debug/AndroidManifest.xml
    • android/app/build.gradle
  5. Rename these folder names (fiberchat) with your project folder name in the following path:
    • android/fiberchat_android.iml
    • fiberchat.iml
  6. Rename these folder names as per your android app package name in the following path:
    • android/app/src/main/kotlin/com/fiberchat/fiberchat
  7. Replace App label name “Fiberchat” with your “App Label name” in the following path:
    • android/app/src/main/AndroidManifest.xml

      android:label="Fiberchat"

Change Assets #

Replace the assets in the following paths with your assets with the same name & same size.

App Icon : #
  • assets/appicon/appicon.jpg

Run the following command in vscode terminal to set the appicon automatically for android and ios :

flutter pub get

flutter pub run flutter_launcher_icons:main
Notification Icon (android only): #
  • android/app/src/main/res/drawable/transparent.png

    Replace the notification Label color in: android/app/src/main/res/values/color.xml
<color name="colorAccent">#06a54d</color>
Splash Screen : #
  • assets/images/splash.jpeg

Please make sure the file name is splash.jpeg but not splash.jpg

Applogo (for login screen): #
  • assets/images/applogo.png
Call Ringtone (for incoming call ringing): #
  • assets/sounds/ringtone.mp3
  • android/app/src/main/res/raw/ringtone.mp3
  • assets/sounds/ringtone.caf
  • assets/ios_assets/ringtone.caf

Please Note : Maximum ringtone duration should be less than 26 seconds.

Call Dialing Tone (when calling): #
  • assets/sounds/callingtone.mp3

Change Colors #

Replace the following colors in : lib/Configs/app_constants.dart. with your desired colors keeping the same tone in each color (darken/lighten) for a good looking UI.

final fiberchatBlack = new Color(0xFF1E1E1E);
final fiberchatBlue = new Color(0xFF02ac88);
final fiberchatDeepGreen = new Color(0xFF01826b);
final fiberchatLightGreen = new Color(0xFF02ac88);
final fiberchatgreen = new Color(0xFF098b74);
final fiberchatteagreen = new Color(0xFFe9fedf);
final fiberchatWhite = Colors.white;
final fiberchatGrey = Color(0xff85959f);
final fiberchatChatbackground = new Color(0xffe8ded5);
const DESIGN_TYPE = Themetype.whatsapp;
const IsSplashOnlySolidColor = false;
const SplashBackgroundSolidColor = Color(0xFF01826b); 
//applies this colors to fill the areas around splash screen.  Color Code: 0xFF01826b for Whatsapp theme & 0xFFFFFFFF for messenger theme.

final statusBarColor = fiberchatDeepGreen;
final isDarkIconsinStatusBar =
    false;

Setup App Configuration #

Setup basic mandatory configuration for your App inside: lib/Configs/app_constants.dart

const Appname ='Fiberchat';   //app name shown evrywhere with the app where required
const DEFAULT_COUNTTRYCODE_ISO = 'US';   //default country ISO 2 letter for login screen
const DEFAULT_COUNTTRYCODE_NUMBER = '+1';   //default country code number for login screen

Optional App Configuration #

Setup optional configuration for your App inside : lib/Configs/optional_constants.dart (We recommend not changing it unless you need any specific modification) :

const Color colorCallbuttons = Color(0xff448AFF);
// applied to call buttons in Video Call & Audio Call .dart pages

const bool deleteMessaqgeForEveryoneDeleteFromServer = true;
//in group chat if delete message for everyone is tapped, It will be the message tile will be deleted from server (if this switch is true) OR if this switch is false, it will show the deleted messase as "Message is deleted"

const int ImageQualityCompress = 50;
// This is compress the chat image size in percent while uploading to firesbase storage

const int DpImageQualityCompress = 34;
// This is compress the user display picture  size in percent while uploading to firesbase storage

const bool IsVideoQualityCompress = true;
// This is compress the video size  to medium qulaity while uploading to firesbase storage

int maxChatMessageDocsLoadAtOnceForGroupChatAndBroadcastLazyLoading = 25;
//Minimum Value should be 15.

int maxAdFailedLoadAttempts = 3;
//Minimum Value should be 3.

const int timeOutSeconds = 50;
// Default phone Auth Code auto retrival timeout

const IsShowNativeTimDate = true;
// Show Date Time in the user selected langauge

const IsShowDeleteChatOption = true;
// Show Delete Chat Button in the All Chats Screens.

const IsRemovePhoneNumberFromCallingPageWhenOnCall = false;
//## under development yet

const OnlyPeerWhoAreSavedInmyContactCanMessageOrCallMe = false;
//If this is true, then only contacts saved in my device can send a message or call me.

const DEFAULT_LANGUAGE_FILE_CODE = 'en';
//default language code if file is present is localization folder example-> en.json

const IsShowLanguageNameInNativeLanguage = false;
// if "true", users can see the language name in respective language

const IsAdaptiveWidthTab = false;
//Automatically adapt the Tab size in tab bar homepage as per the content length. Set it to "true" if your default language code is any of these ["pt", "nl", "vi", "tr", "id", "fr", "es", "ka"]

const IsShowLastMessageInChatTileWithTime = true;
//If true, The "CHATS" screen will show lastmessage time, last message content, unread count in each chat Tile in All Chats page.

const IsShowUserFullNameAsSavedInYourContacts = false;
//Warning: UNDER DEVELOPMENT //If true,All the users /peer name will be show as you have saved in contact. If "false", then the name will be the one which user has saved in his profile.

const IsShowGIFsenderButtonByGIPHY = true;
//If true, GIF sending button will be shown to users in the text input area in chatrooms.

const IsShowSearchTab = true;
//If true, search chat tile name will be shown in homepage. it will search only personal chats name.

final textInSendButton = "";
// If any text is placed here, it will be visible in the send button of text messsages in the Chat room , by default paper_plane icon is theyremoveduasadmin.

const AgoraVideoResultionWIDTH = 1920;
//Agora Video Call Resolution, see details - https://docs.agora.io/en/video-calling/develop/ensure-channel-quality?platform=web

const AgoraVideoResultionHEIGHT = 1080;

const IsHIDELightDarkModeSwitchInApp = false;
//If 'true', the app will not have dark or light mode switch

const IsShowLightDarkModeSwitchInLoginScreen = true;
//If 'true', show change dark mode/light mode switch in login page. It is also visible in settings page.

const IsShowAppLogoInHomepage = false;
//If 'true', show applogo_light.png/applogo_dark.png on the homepage top appbar, and if 'false' shows only the AppLabel text in homepage appbar. If 'true' it is recommended to set the app logo with transparent background.

const IsShowTextLabelsInPhotoVideoEditorPage = true;
//If 'true', text labels like 'trim', 'cover', 'rotate' etc. will be shown at PhotoEditor.dart & VideoEditor.dart

const int MaxTextlettersInStatus = 200;
// maximum characters length while creating text status Status

const int ContactsSearchCountBatchSize = 150;
//while app search for contacts the total number contacts it searches at one batch while looping through all contacts

const IsShowLanguageChangeButtonInLoginAndHome = true;
//If 'true', language change button will be visible at LOGINPAGE & HOMERPAGE

const IsShowLanguageChangeButtonInSettings = true;
//If 'true', shows change language button in settings page, and if 'false' show on homepage appbar.

Set App Version Number (Android) #

1. Set android app version number inside : android/local.properties & further increment both version Name & Version code before every release build

flutter.versionName=1.0.0
flutter.versionCode=1

2. Set android app version number inside : pubspec.yaml & further increment both version Name & Version code before every release build

version: 1.0.0+1

Set Release key.jks Properties #

1. Generate a upload keystore, rename it to key.jks file and place it in the path : android/app/key.jks
2. Set the key properties in : android/key.properties

Change Font (optional) #

Fiberchat has a default Flutter font. If you want to set a new font. Please follow these steps:

  1. Get ready with your font file(s). Remove all blank spaces in names if any.
  2. Paste your (.otf) OR (.ttf) font file inside : assets/fonts folder
  3. Register the font at the end of pubspec.yaml file as shown below:
  assets:
    - assets/images/
    - assets/sounds/
    - assets/flags/
    - lib/Services/localization/json_languages/

  fonts:
    - family: your_font_family_name
      fonts:
        - asset: assets/fonts/your_font_file_name.ttf

Save pubspec.yaml file. Run command : flutter pub get

4. Paste your “your_font_family_name” in -> lib/Configs/app_constants.dart

const FONTFAMILY_NAME = "your_font_family_name";
Find it helpful ?

Powered by BetterDocs