Customisation

Language #

Add New Language #

If you want to add any new language then follow this steps:

• Go to /assets/language and press the right button on the language folder and create a new file and name it with your language code(.json). For example, if your language is Spanish, then you have to name your file as es.json. You have to name it with a proper and valid language code otherwise, the app won’t work. To get the language and country code, you can visit this URL: https://docs.oracle.com/cd/E13214_01/wli/docs92/xref/xqisocodes.html 

• Copy all data from en.json and paste it into your created file.
• Translate all English text placed here after colon(:) to your expected language. Their texts are in key-value format. You have to translate the value only, not the key. Otherwise, it won’t work. For example: “office”: “Office”, -> “office”: “Oficina”,
• Add your country picture in the <Project>/assets/images folder. Must keep the file extension in png format. For example, spanish.png
• Go to <Project>/lib/utils/images.dart file, add a variable with your country picture name. For example, if your added country picture name is spanish.png, then add a variable like -> static const String spanish = ‘assets/image/spanish.png’;

Go to <Project>/lib/utils/app_constrants.dart file, scroll down to the bottom and add one more LanguageModel under the languages array with your imageUrl, languageName, countryCode and languageCode. Again must remember that your language code and country code should be valid otherwise, the app won’t work

Remove Existing Language #

• If you wish to eliminate any currently present language, simply exclude the particular LanguageModel from the languages list.

Make Default Language #

• To set your language as the default language, place your LanguageModel at the first index of your language list.

Now uninstall your application from your devices and install it again.

Change App Color #

If you want to customize app theme color then follow these steps :

• Open the <project>/lib/theme/light_theme.dart file. Set primaryColor, foregroundColor, secondary and other colors, and adjust them according to your preferences.

In the same way for the dark theme, open the <project>/lib/theme/dark_theme.dart file. Set primaryColor, foregroundColor,secondary and other colors, and adjust them according to your preferences.

Change App Font  #

At 6amMart, we use the Poppins font. However, if you want to change the app’s font, then follow these steps:

• Download your preferred font from the internet. Google has many free fonts you can check them: https://fonts.google.com/ 
• Unzip fonts and paste them to <project>/assets/font/ folder.

Mentioned them in <project>/pubspec.yaml file like

fonts:
    - family: YOUR_FONT_FAMILY_NAME
      fonts:
        - assets/font/YOUR_FONT_FILE_NAME.ttf
          weight: YOUR_FONT_WEIGHT

fonts:
    - family: YOUR_FONT_FAMILY_NAME
      fonts:
        - assets/font/YOUR_FONT_FILE_NAME.ttf
          weight: YOUR_FONT_WEIGHT

• Replace the font family name in the <project>/lib/util/app_constants.dart file.

static const String fontFamily = YOUR_FONT_FAMILY_NAME;

static const String fontFamily = YOUR_FONT_FAMILY_NAME;

Change notification sound #

If you wish to change the notification sound for the iOS app and also for the Android app, then you need to follow these steps : 

Android App : 

• Go to <project>/android/app/src/main/res/raw/notification.wav file. Replace this file with your desired ringtone file. Ensure that you do not change the filename. It must remain as notification.wav
• If you find notification.mp3 or notification.wav file in <project>/assets file. Replace this also with your desired ringtone file. Ensure that you do not change the filename. It must remain as notification.mp3 or notification.wav

Change onboarding text and graphics #

If you want to customize the onboarding title and content then follow these steps : 

• Open <project>/assets/language/en.json. At the top, you will find texts with keys like “on_boarding_1_title” , “on_boarding_data_1”. Simply change the values without changing the keys. Repeat the same process for all languages.

"on_boarding_1_title" :  "YOUR_PREFERRED_TITLE",

"on_boarding_1_title" :  "YOUR_PREFERRED_TITLE",

"on_boarding_1_description" : "YOUR_PREFERRED_DESCRIPTION",

"on_boarding_1_description" : "YOUR_PREFERRED_DESCRIPTION",

"on_boarding_2_title" :  "YOUR_PREFERRED_TITLE,

"on_boarding_2_title" :  "YOUR_PREFERRED_TITLE,

"on_boarding_2_description" : "YOUR_PREFERRED_DESCRIPTION",

"on_boarding_2_description" : "YOUR_PREFERRED_DESCRIPTION",

"on_boarding_3_title" :  "YOUR_PREFERRED_TITLE,

"on_boarding_3_title" :  "YOUR_PREFERRED_TITLE,

"on_boarding_3_description" : "YOUR_PREFERRED_DESCRIPTION",

"on_boarding_3_description" : "YOUR_PREFERRED_DESCRIPTION",

• If you wish to update the graphics on the onboarding page, go to <project>/assets/images/ and replace onboard_1.png , onboard_2.png  and onboard_3.png with your preferred png files.

Share web url and Deeplink #

1. If you are using the Flutter web app, then follow this. Go to lib/util/app_constants.dart file, and add your Flutter web app hosted url, like this-

static const String webHostedUrl = 'https://my-Flutter-web-app.com';

static const String webHostedUrl = 'https://my-Flutter-web-app.com';

Or, 

If you are using a React website, then follow these steps. Go to lib/util/app_constants.dart file, add your React Web hosted URL, and must change the useReactWebsite status false to true, like this –

static const String webHostedUrl = 'https://my-React-web-app.com';

static const String webHostedUrl = 'https://my-React-web-app.com';

static const bool useReactWebsite = true;

static const bool useReactWebsite = true;

2. Deeplink setup

a. You must need to use the Flutter web app and do the 1-number configuration.

b. Android configuration:

i. Go to android/app/src/main/AndroidManifest.xml file and add search with <data android:scheme=”http” and replace the host with your web app domain

<data android:scheme="http" android:host="my-Flutter-web-app.com" />

<data android:scheme="http" android:host="my-Flutter-web-app.com" />

ii. Go to web/.well-known/assetlinks.json file and add your project’s package_name and your device’s sha256_cert_fingerprints [which device you build/deploy your app].

c. iOS configuration:

i. Open your project in Xcode and add your web app domain in the Associated Domain option. Please follow this: https://docs.flutter.dev/cookbook/navigation/set-up-universal-links#add-associated-domains 

ii. Go to web/.well-known/apple-app-site-association file and add your team ID and bundle ID in line numbers 7 and 22. You can follow https://docs.flutter.dev/cookbook/navigation/set-up-universal-links#create-and-host-apple-app-site-association-json-file