This session explains the way to configure the basic config and all common features, as logo, splash screen, main color, About Us, app Rating, Onboarding screen, Login mode, Deep Link, Smart Chat, Setting screen (Page view, Web view), price Filter...(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 disable/hide any UI from the app?", "how to disable options from settings sections , like language, currency, dark theme", "how to remove the zip code", "how to remove the 'See All' line of the category page", is using the Inspector Tools from Android Studio to customize any UI from the app.

Video guide:

Manual guide: 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).

        case 'about':
        {
          icon = Icons.info_outline;
          title = "About Us";  //replace your title here
          trailing = Icon(Icons.arrow_forward_ios, size: 18, color: kGrey600);
          onTap = () => Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => WebView(
                    url: "https://inspireui.com/about",  //replace your url here
                    title: "About Us"),  //replace your title here
              ));
          break;
        }

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,
);

Open lib/common/config/general.dart file to change your value:

const kStoreIdentifier = {
  "android": "com.inspireui.fluxstore",
  "ios": "1469772800"
}

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/config/config_xx.json. From version 1.7.5 onwards, we move to this file for be compatible with FluxBuilder that helps users to customize realtime without coding. (For apps from version 1.6.5 to 1.7.4, refer to lib/common/config/onboarding.dart. For apps from previous version 1.6.5, refer to lib/common/config.dart file).

  "OnBoarding": {
    "data": [
      {
        "title": "Welcome to FluxStore",
        "image": "assets/images/fogg-delivery-1.png",
        "desc": "Fluxstore is on the way to serve you. ",
        "background": "#FFF3F2"
      },
      {
        "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.",
        "background": "#F2FFFC"
      },
      {
        "title": "Let's Get Started",
        "image": "fogg-order-completed.png",
        "desc": "Waiting no more, let's see what we get!",
        "background": "#F9F2FF"
      }
    ]
  }

There is also a new feature to strictly check user login before using the app by enabling IsRequiredLogin is true. (For apps from version 1.6.5 onwards, refer lib/common/config/general.dart).

const kAdvanceConfig = {
  ...
  "IsRequiredLogin": true,
  ...
};

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. Page View (Settings screen)

Page view is used to display a static page faster than using WebView. For those who want to customize a page view, at this moment, please follow instructions below for hard-coding this feature. We will update this feature in config.dart in the near future.

image-20200508140704585

To add/delete/change any pageview widget on your Settings screen, open /lib/common/config/general.dart, add/delete the value:

const kDefaultSettings = [
'wishlist',
'notifications',
'language',
'currencies',
'darkTheme',
'order',
'point',
'rating',
'privacy',
'about'
];

Open /lib/screens/settings/settings.dart, inside renderItem, add/delete/change the code. Example, the code of Privacy and Term on the setting screen will look like below:

    case 'privacy':
      {
        icon = Icons.supervised_user_circle;
        title = S.of(context).agreeWithPrivacy; //replace your title here
        trailing = Icon(Icons.arrow_forward_ios, size: 18, color: kGrey600);
        onTap = () => Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => PostScreen(
                    pageId: 9937, //enter your pageId here
                    pageTitle: "${S.of(context).agreeWithPrivacy}"),  //replace your title
              ),
            );
        break;
      }

13. Web View (Settings screen)

In spite of the fact that a WebView widget takes more time to load compared to a PageView, WebView sometimes could be taken into consideration due to its flexibility and adaptability. In order to add a WebView inside your app, please take a look at those code (adding a WebView into left-side menu) for reference and make some modifications if needed to meet your need.

webview1

webview2

To add/delete/change any webview widget on your Settings screen, open /lib/common/config/general.dart, add/delete the value:

const kDefaultSettings = [
'wishlist',
'notifications',
'language',
'currencies',
'darkTheme',
'order',
'point',
'rating',
'privacy',
'about'
];

Open /lib/screens/settings/settings.dart, inside renderItem, add/delete/change the below code in your desired position:

    case value:  //replace your value here, eg. 'about'
      {
        icon = Icons.info_outline;
        title = Text(S.of(context).webView);  //replace your title here
        trailing = Icon(Icons.arrow_forward_ios, size: 18, color: kGrey600);
        onTap = () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => WebView(
                  url: "https://inspireui.com",  //replace your url here
                  title: Text(S.of(context).webView)),  //replace your title here
            ));
        break;
      }

Example: Change the About Us on the setting screen to FAQ with url https://inspireui.com/faq:

    case 'about':
      {
        icon = Icons.info_outline;
        title = "FAQ";  //replace your title here
        trailing = Icon(Icons.arrow_forward_ios, size: 18, color: kGrey600);
        onTap = () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => WebView(
                  url: "https://inspireui.com/faq",  //replace your url here
                  title: "FAQ"),  //replace your title here
            ));
        break;
      }

14. Price Filter

In the Filters, you can change price filter. Currently the lowest price filter is 0-100. To change this price, refer to lib/common/constants/slider.dart:

/// Filter value
const kSliderActiveColor = 0xFF2c3e50;
const kSliderInactiveColor = 0x992c3e50;
const kMaxPriceFilter = 1000.0;
const kFilterDivision = 10;

15. Layout list product

The default layout of the listed product is "list", you can see the example below:

list_product_normal

In the listed product at layout "list", sometimes you can have an issue is an image so large like this:

list_product_error

To fix this you can choose either solution

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

  • The first solution, you can change the config type of list from "list" to "pinterest" at field "ProductListLayout"
"Setting": {
    ...
    "ProductListLayout": "pinterest"
    ...
  }

result:

list_product_fix_pinterest

  • The second, you can add config the ratio of both image and information of the product as follows
"Setting": {
    ...
    "ProductListLayout": "list",
    "ratioImageProduct": 2,
    "ratioInfoProduct": 1
    ...
  }

result:

list_product_error