This session explains the way to configure the basic config and all common features, as logo, main color, Google Font, Currency Switcher, Deep Link, Downloadable product, Smart Chat,...(If you would like to change App Name/ Bundle ID, please refer to the Release Section)

When installing, if you get issue, please go to Common Questions or Common Issues to find the solutions.

1. How to Customize any UI from App

The solution to answer the questions like "how to change my homepage icons, Hamberger menu icon", "how to change the layout to xyz", is using the Inspector Tools from Android Studio.

Please refer to this document for the detailed guidline:

Example, how to change the Icon from homescreen below (Hamberger menu icon):

homeicon

Click the icon from Android Studio to enable Inspector Mode, then click to the UI Icon, the Android Studio will be jump to the widget that is ready to change new value

inspector

2. Logo, splash screen

Open lib/common/constants.dart to map your new image logo and icon file. (or lib/common/constants/images.dart for apps from version 1.6.5 onwards).

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 the static image files (PNG, JPG and GIF) as well.

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

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

The kSplashScreen also supports the static images (PNG, JPG) or GIF. If you would like to replace the Flare animate, change the URL to a static file, example: const kSplashScreen: "assets/images/load.gif'

Please make sure the startAnimaiton from the app is the same on your Flare Dashboard, otherwise the animation will not worked.

Screen Shot 2020-05-14 at 10 51 02

Screen Shot 2020-05-14 at 10 53 02


3. About Us

Open lib/screens/settings.dart file to change the About Us url. (or lib/screens/settings/settings.dart for apps from version 1.6.5 onwards).

MaterialPageRoute(
  builder: (context) => WebView(
    url: "https://inspireui.com/about",
    title: "About Us"))

4. App Rating

Open lib/screens/settings.dart file to change the time for rating your app. (or lib/screens/settings/settings.dart for apps from version 1.6.5 onwards).

RateMyApp _rateMyApp = RateMyApp(
    minDays: 7,
    minLaunches: 10,
    remindDays: 7,
    remindLaunches: 10,
);

5. App Main Color

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

You could change most of the color components 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, go to the lib/common/styles.dart.


6. Dynamic Product Variant

Open lib/common/config.dart, then customize the product variant values or order the display position. (For apps from version 1.6.5 onwards, refer lib/common/config/products.dart).

const ProductVariantLayout = [
  {
    "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.

There was a feedback from one of our customers to adjust the product detail design screen as he reports the default detail screen just matches with the Fashion UI. The team has made some more flexible product detail upgrades by below config:

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

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

  • isHero this option is to enable the hero animate.


7. Onboarding and Login mode

To customize the onboarding content (welcome screen), edit the lib/common/config.dart file. (For apps from version 1.6.5 onwards, refer lib/common/config/onboarding.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 strictly check user login before using the app by enabling IsRequiredLogin. (For apps from version 1.6.5 onwards, refer lib/common/config/general.dart).

const kAdvanceConfig = {
  ...
  "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" '

9. Product Advance Options

Open lib/common/config.dart and change the value. (For apps from version 1.6.5 onwards, refer lib/common/config/general.dart)

const kAdvanceConfig = {
  "DefaultLanguage": "en",
  "IsRequiredLogin": false,
  "DetailedBlogLayout": kBlogLayout.halfSizeImageType,
  "EnableSmartChat": false,
  "EnablePointReward": true,
  "EnableRating": true,
  "hideOutOfStock": true,
  "isCaching": false,

  "DefaultStoreViewCode": "", //for magento
  "EnableAttributesConfigurableProduct": ["color", "size"], //for magento
  "EnableAttributesLabelConfigurableProduct": ["color", "size"], //for magento,

  "GridCount": 3,

  "DefaultCurrency": {
    "symbol": "\$",
    "decimalDigits": 2,
    "symbolBeforeTheNumber": true,
    "currency": "USD"
  },
  "Currencies": [
    {
      "symbol": "\$",
      "decimalDigits": 2,
      "symbolBeforeTheNumber": true,
      "currency": "USD"
    },
    {
      "symbol": "đ",
      "decimalDigits": 2,
      "symbolBeforeTheNumber": true,
      "currency": "VND"
    }
  ],
};
  • DefaultLanguage: default language for the app.

  • IsRequiredLogin: force the user login before using the app.

  • DetailedBlogLayout: to config the detailed layout of Blog. Change the kBlogLayout config to one of following enums: { simpleType, fullSizeImageType, halfSizeImageType, oneQuarterImageType }. Refer to https://docs.inspireui.com/fluxstore/home-layout/#3-blog-detail-layout for more detail.

  • EnableSmartChat: enable the Smart Chat feature, it is displayed from Product Detail and Setting screen, this is good feature to allow your user connect with the Admin/Vendor.

  • EnablePointReward: enable the Point and Reward Plugin, the feature will be display from the Setting screen, after logged to the app and purchase product, you can see the collection point, this is good feature to custom for reward app.

  • EnableRating: enable the Rating feature for Product detail.

  • hideOutOfStock: hide the Out Of Stock feature from Product Detail.

  • isCaching: this configuration helps Caching to improve App Performance. If the isCaching is false, it will load as the local config. Refer to https://docs.inspireui.com/fluxstore/performance/#1-caching-to-improve-app-performance for more detail.

  • DefaultStoreViewCode: this is only use for Magento.

  • EnableAttributesConfigurableProduct: this is only use for Magento, enable to active the Configurable Product type.

  • EnableAttributesLabelConfigurableProduct: this is only use for Magento, enable to active the Configurable Product type.

  • DefaultCurrency: default currency format.

  • Currencies: this is for the Currency Switcher feature. This feature is only available for WooCommerce version, below is the required condiction to active this feature:

    • Update the mstore-api to latest version v1.5.4.
    • Add new setting from Manage Currencies from WPML plugin:

    IMG_1790fluxstore_currency_flutter_inspireui

The new release also supports the Affiliate Product Type when you configure values from the WooCommerce site.

const kProductDetail = {
  "height": 0.5,
  "marginTop": 0,
  "isHero": false,
  "safeArea": false,
  "showVideo": true,
  "showThumbnailAtLeast": 3,
  "layout": kProductLayout.simpleType,
  "maxAllowQuantity": 100
};

Note: for apps, this const is moved to lib/common/config/products.dart from version 1.6.5 onwards.

  • height: the percentage height of the featured product images. height=(percent * width-screen).
  • marginTop: the top margin with the top edge. This setting is to prevent cutting without using SafeArea widget.
  • isHero: this option is to enable the hero animate.
  • safeArea: add new extra space on the top when viewing product detail.
  • showVideo: support to enable the show Video feature. Support only for WooCommerce by installing one of following video plugins:

  • showThumbnailAtLeast: only display the product detail gallery if more than the at least value. For example, if we set the value to 2, it only displays the image gallery when more than 3 images.
  • layout: change to one of to one of enum value { simpleType, fullSizeImageType, halfSizeImageType } - this is great feature if you would like to change the Product Detail Screen to other Layout Design.
  • maxAllowQuantity: the maximum quantity items user could purchase.

10. Smart Chat

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

Open lib/common/config.dart and control the visibility of the SmartChat feature from: (For apps from version 1.6.5 onwards, refer to lib/common/config/smartchat.dart)

const smartChat = [
  {
    'app': 'https://api.whatsapp.com/send?phone=84327433006',
    'iconData': FontAwesomeIcons.whatsapp
  },
  {'app': 'tel:8499999999', 'iconData': FontAwesomeIcons.phone},
  {'app': 'sms://8499999999', 'iconData': FontAwesomeIcons.sms},
  {
    'app': 'https://tawk.to/chat/5e5cab81a89cda5a1888d472/default',
    'iconData': FontAwesomeIcons.facebookMessenger
  }
];
  • app: is the scheme of the opening app.
  • iconData: the icon display on Smart Chat.

Note:

  • If Smartchat Whatsapp is failed to open, need to change link to https://api.whatsapp.com/send?phone=yourphone
  • Due to the performance build issue on cloud_firestore in 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 resolved. If you would like to get the source code for this feature, please request us to get previous 1.5.0 version.

11. Full iPad/Web compatible

The new web version is only compatible when switching to beta channel, to update your own flutter with Beta run:

flutter channel beta
flutter upgrade --force

Restart your Android Studio, then you can see the Chrome (web) option to build the project via Chrome browser:

IMG_1790fluxstore_currency_flutter_inspireui

As the web flutter is still in beta, it’s not ready for production, but you can start your own development with awesome flutter framework, our test demo could be tested from https://web.fluxstore.app/

The new iPad version could be downloaded from latest update via Appstore

12. Set preferred theme as default

Navigate to lib/app.dart and lib/models/app.dart then change these values from FALSE to TRUE. To make the Dark theme is the default theme, set it TRUE.

image-20200508140704585

image-20200508140704585