1. App name/icon, Bundle ID

1.1 Change the app name:

IOS app:

  • Open ios/Runnder/Info.plist and replace the FluxStore by your App Name
<key>CFBundleDisplayName</key>
	<string>Fluxstore</string>
  • Make sure to clean up the cache by running following scipt to clean the previous cache

    flutter clean
    flutter build ios

It's possible to change via XCode - https://tppr.me/Mfu5F.The facebook app name and App ID could be change from this file as well

Android app:

  • open android/app/main/res/values/strings.xml and replace Fluxstore by your app name:

    <string name="app_name">FluxStore</string>
  • Open android/app/src/main/AndroidManifes.xml and replace Fluxstore by your app name:

    <application android:label="Fluxstore"

1.2 Change the app Bundle ID:

Android app: Search on android folder and replace following file - https://tppr.me/bWCvp

  • android/app/build.gradle
  • android/app/src/main/AndroidManifest.xml
  • android/app/src/main/java/com/inspireui/fluxstore/MainActivity.java
  • Rename the folder android/app/src/main/java/com/inspireui/fluxstore to your own bundle name, example: if you bunndle id is com.ins.flux android/app/src/main/java/com/ins/flux
  • Please note that the file android/app/google-services.json should be change to match with your new bundle id, otherwise the app will be crash.

iOS app: Open XCode and replace by this screenshot - https://tppr.me/Mfu5F

To get more detail document go to this link - https://flutter.dev/docs/deployment/ios

1.3 Change the app Icon

Replace your own icon file assets/images/app_icon.png Run this script to generate the app icon for both iOS and Android:

flutter pub run flutter_launcher_icons:main

2. Logo, splash screen

Open lib/common/constants.dart to map your news image Logo and icon file.

const kLogoImage = 'assets/images/logo.png';
const kSplashScreen = "assets/images/splashscreen.flr";

🗳 Coding Guide: to change the flare animate file go to https://2dimensions.com and create your own splash screen by providing example file from the download package. It's possible to update the splash screen as static image (PNG, JPG and GIF) files as well

const kSplashScreen = "assets/images/splashscreen.png";

// or
const kSplashScreen = "assets/images/splashscreen.gif";

The kSplashScreen is also support to static image (PNG, JPG) or GIF, if you would like to replace the Flare animate change the URL to the static file, ex: const kSplashScreen: "assets/images/load.gif'


3. App Main Color

Open lib/common/config.json file in project.

You could change most of components color in Color section.

For example, you could change the color of Tabbar to any color you like, then reload the app to see the effect.

"Setting": {
    "MainColor": "#3FC1BE",
    "ProductListLayout": "list"
  }

🗳 Coding Guide: to customize the theme folder to the common/styles.dart


4. Default Font and Header Font

Open pubspec.yaml and replace with your new font file that already copied to the asset folder:

  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
        - asset: assets/fonts/Raleway-Bold.ttf
        - asset: assets/fonts/Raleway-Light.ttf
        - asset: assets/fonts/Raleway-Thin.ttf
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Medium.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
        - asset: assets/fonts/Roboto-Light.ttf
        - asset: assets/fonts/Roboto-Thin.ttf

🗳 Coding Guide: go the common/styles.dart and change to new fontFamily. Make sure the spacing the align correctly


5. Default Country Code, symbol

Open common/config.dart file and update the menu section

const DefaultCurrency = {
  "symbol": "\$",
  "decimalDigits":2
};

6. Customize bottom TabBar

Open common/config.dart and change following values

"TabBar": {
    "Home": {
      "isDisplay": true,
       "icon": "assets/icons/tabs/icon-home.png"
    },
    "Category": {
      "isDisplay": true,
      "layout": "card"
    },
    "Search": {
      "isDisplay": true
    },
    "Cart": {
      "isDisplay": true
    },
    "Profile": {
      "isDisplay": true
    }
  }
  • isDisplay: set the screen is hide or display
  • icon: the icon setting for the tab bar.
  • layout: the layout option, this value only effect the Category screen, please see the "Customize Layout" topic for more detail

7. Dynamic Product Variant.

Open common/config.dart and custom the products variant values or ordering the display position

const ProductVariants = [
  {
    "name": "color",
    "type": "color"
  },
  {
    "name": "size",
    "type": "box"
  },
  {
    "name": "height",
    "type": "option"
  }
];
  • name: should be matched with the variant name
  • type: support 3 types of layout color, box and option

The is a feedback from one of our Customer to adjust the product detail design screen as he reports the default detail screen just match with the Fashion UI, the team have made some upgrade the product detail more flexible by below config

const kProductDetail = {
  "height": 1.2,
  "marginTop": 0,
  "isHero": false,
};
  • height the percent height of the featured product images.

  • marginTop the top margin with the top edge, this setting to prevent the cutting without using SafeArea widget.

  • isHero option to enable the hero animate.


8. Onboarding & Login mode.

To customize the onboarding content (welcome screen), edit the file common/config.dart

List onBoardingData = [
  {
    "title": "Welcome to FluxStore",
    "image": "assets/images/fogg-delivery-1.png",
    "desc": "Fluxstore is on the way to serve you. "
  },
  {
    "title": "Connect Surrounding World",
    "image": "assets/images/fogg-uploading-1.png",
    "desc": "See all things happening around you just by a click in your phone. "
        "Fast, convenient and clean."
  },
  {
    "title": "Let's Get Started",
    "image": "fogg-order-completed.png",
    "desc": "Waiting no more, let's see what we get!"
  },
];

There is also a new feature to strict user login before using the app by enabling IsRequiredLogin

const bool IsRequiredLogin = false;

Open the Simulator and Test the Deep link on your terminal

// ios
xcrun simctl openurl booted "fluxstore://inspireui.com/400"// android
 adb shell 'am start -W -a android.intent.action.VIEW -c android.intent.category.BROWSABLE -d "fluxstore://inspireui.com/400" '

10. Product Advance Options.

Open lib/common/config.dart and change the value.

const kAdvanceConfig = {
  "DefaultCurrency": {"symbol": "\$", "decimalDigits": 2},
  "IsRequiredLogin": false,
  "GuestCheckout": true,
  "EnableShipping": false
};
  • DefaultCurrency: format the default currency
  • IsRequiredLogin: force the user login before using the app.
  • GuestCheckout: enable guest checkout, without require the login the user can still buy the product.
  • EnableShipping: for skip the shipping info.

New release 1.4 also support for the Affiliate Product Type when you config the value from the WooCommerce site.

const kProductDetail = {
  "safeArea": false,
  "showVideo": true,
  "showThumbnaiAtLeast": 3
};
  • safeArea: add new extra space on the top when view product detail.
  • showThumnailAtLeast: only display the product detail gallery if as leat this values, for example if we set the value to 2, it only displays the image gallery when more than 3 images.
  • showVideo: support to enable the show Video feature, support only for WooCommerce by installing these video plugin

11. Smart Chat

Reference to this document for more detail document - https://pub.dev/packages/url_launcher

Open common/config.dart and control the visibility of the SmartChat feature from:

const smartChat = [
  {'app': 'https://wa.me/84327433006','iconData': FontAwesomeIcons.whatsapp},
  {'app': 'tel:8499999999', 'iconData': FontAwesomeIcons.phone},
  {'app': 'sms://8499999999', 'iconData': FontAwesomeIcons.sms},
  {'app': 'firebase', 'iconData': FontAwesomeIcons.google}
];
  • app: is the scheme of the opening app.
  • iconData: the icon display on Smart Chat

Due to the performance build issue on cloud_firestore on https://github.com/flutter/flutter/issues/37582, we will remove this library and the related Firebase Chat since FluxStore 1.5.2, we will consider to move it back when this issue is resolve. If you would like to get the source code for this feature, please request us to get previous 1.5.0 version.

12. Country Settings

To limit the country list from the Delivery screen, open lib/common/config.dart and update the DefaultCountry, example if you would like to display on 3 countries, config as below:

const List DefaultCountry = [
  {
    "name": "Vietnam",
    "iosCode": "VN",
    "icon": "https://cdn.britannica.com/41/4041-004-A06CBD63/Flag-Vietnam.jpg"
  },
  {
    "name": "India",
    "iosCode": "IN",
    "icon":
        "https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png"
  },
  {"name": "Austria", "iosCode": "AT", "icon": ""},
];