Customization

Country Filter​ #

• If you want your country only in the country choosing dialog which we saw in the login, registration and forget password page, you have to set your default country first from the admin panel Business Setup section. Then open <project>/lib/common/widgets/phone_number_field_widget.dart And <project>/lib/common/widgets/custom_text_field_widget.dart file and search CodePickerWidget. Now add a parameter with a value like this:

lib/common/widgets/phone_number_field_widget.dart  and

lib/common/widgets/custom_text_field_widget.dart

countryFilter: [_countryDialCode]

countryFilter: [_countryDialCode]

• If you want to disable the country choosing dialog just add one parameter like this:

lib/common/widgets/phone_number_field_widget.dart  and

lib/common/widgets/custom_text_field_widget.dart

enabled: false

enabled: false

Change onboarding text and graphics​ #

I) Text: If you want to change onboarding text, open <project>/assets/language/en.json and you will find some texts with a key named like.

"on_boarding_text_1": "Discover a wide range of products with",
"on_boarding_text_1_extend": "— making shopping easy and enjoyable!",
"on_boarding_text_2": "Enjoy easy and secure payments through popular payment gateways.",
"on_boarding_text_3": "Get your order delivered to your doorstep with fast delivery and a hassle-free return policy.",

"on_boarding_text_1": "Discover a wide range of products with",
"on_boarding_text_1_extend": "— making shopping easy and enjoyable!",
"on_boarding_text_2": "Enjoy easy and secure payments through popular payment gateways.",
"on_boarding_text_3": "Get your order delivered to your doorstep with fast delivery and a hassle-free return policy.",

 You just need to change the values. Do not change the key.   

 Also, do the same things for <project>/assets/language/ar.json files also.

/assets/language/en.json

"on_boarding_text_1": "اكتشف مجموعة واسعة من المنتجات",
"on_boarding_text_1_extend": "- جعل التسوق سهلاً وممتعًا!",
"on_boarding_text_2": "استمتع بالمدفوعات السهلة والآمنة من خلال بوابات الدفع الشائعة.",
"on_boarding_text_3": "احصل على طلبك إلى عتبة داركم مع التسليم السريع وسياسة إرجاع خالية من المتاعب.",

"on_boarding_text_1": "اكتشف مجموعة واسعة من المنتجات",
"on_boarding_text_1_extend": "- جعل التسوق سهلاً وممتعًا!",
"on_boarding_text_2": "استمتع بالمدفوعات السهلة والآمنة من خلال بوابات الدفع الشائعة.",
"on_boarding_text_3": "احصل على طلبك إلى عتبة داركم مع التسليم السريع وسياسة إرجاع خالية من المتاعب.",

ii) Graphics: If you want to change the graphics on boarding page then go to <project>/assets/image/ and replace onboarding_one.png, onboarding_two.png, onboarding_three.png with your preferred image. Must use the same name and extension for your graphics.

Add New Local Language​ #

• 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 Bengali then you have to name your file as bn.json. You have to name it with a proper and valid language code otherwise the app won’t work. To get 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 the colon(:) to your local language. There texts are in key-value formatted. You have to translate value only not key otherwise it won’t work. For example: “home”: “Home” -> “home”: “বাড়ি”
• Add your country picture on /assets/image folder.
• Open /lib/util/app_constrants.dart, 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 app won’t work. In image url field you have to put your image path as assets/image/added_country_picture_name.extension. For example if your added country picture name is bangladesh.png then path will be assets/image/bangladesh.png.

Change App Color​ #

• Open <project>/lib/theme/light_theme.dart file and set primary, accent and etc. colours for a light theme.
• In the same way open <project>/lib/theme/dark_theme.dart file and set preferred primary, accent and etc. color for dark theme.

Change App Font​ #

• Download you preferred font from the internet. Google has many free fonts you can check them: https://fonts.google.com/
• Unzip fonts and paste it them to <project>/assets/font/ folder.
• Mentioned them in <project>/pubspec.yaml file like: fonts:
  • family: YOUR_FONT_FAMILY_NAME fonts:
    • asset: assets/font/YOUR_FONT_FILE_NAME.ttf weight: YOUR_FONT_WEIGHT
• Replace the font family name in <project>/lib/theme/light_theme.dart, <project>/lib/theme/dark_theme.dart and <project>/lib/util/styles.dart file.