Customization

Country Filter #

​To filter the available country list in the country code selector, you need to update the following files:

• lib/common/widgets/custom_text_field_widget.dart
  
• lib/features/auth/screens/create_account_screen.dart
  
• lib/features/order/screens/order_search_screen.dart
  

To show only specific countries (e.g., United Kingdom and Bangladesh): #

Pass the countryFilter parameter to the CodePickerWidget like this:

CodePickerWidget(
  countryFilter: ['+44', '+880'],
)

CodePickerWidget(
  countryFilter: ['+44', '+880'],
)

This will ensure that only the specified country codes (+44 for UK and +880 for Bangladesh) are shown in the selector.

To disable the country selection dialog: #

Pass the enabled: false parameter to the CodePickerWidget to prevent users from opening the country selector:

CodePickerWidget(
  enabled: false,
)

CodePickerWidget(
  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 found some texts with key named “make_your_choice_order”. You just need to change the values. Do not change key.    Also do same things for <project>/assets/language/ar.json file also.

/assets/language/en.json

"make_your_choice_order": “YOUR_PREFERRED_TEXT”,

"make_your_choice_order": “YOUR_PREFERRED_TEXT”,

ii) Graphics: If you want to change the graphics of on boarding page then go to <project>/assets/image/ and replace onboard_1.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 in your created file.
• Translate all English text placed here after the colon(:) to your local language. There texts are in key-value format. 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 the 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 the path will be assets/image/bangladesh.png.

Use Only One Language #

If you want to restrict your app and website to a single language, follow the steps below:

1. Open the file: lib/utill/app_constants.dart
   

Locate the following list:

static List<LanguageModel> languages = [...]

static List<LanguageModel> languages = [...]

2. Remove all other LanguageModel entries and keep only the one you want to use.
   For example, to use English only:

static List<LanguageModel> languages = [
 LanguageModel(imageUrl: Images.unitedKingdom, languageName: 'English', countryCode: 'US', languageCode: 'en'),
];

static List<LanguageModel> languages = [
 LanguageModel(imageUrl: Images.unitedKingdom, languageName: 'English', countryCode: 'US', languageCode: 'en'),
];

Change App Color​ #

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

Change App Font #

• 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:
    • 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.