This session explains the way to configure the basic config and all common features, as App name/icon, logo, main color, Google Font, Currency Switcher, Deep Link, Downloadable product, Smart Chat,...

1. App name/icon, Bundle ID

1.1 Change the app name:

IOS app:

  • Open ios/Runner/Info.plist and replace the FluxStore with your App Name.
<key>CFBundleDisplayName</key>
	<string>Fluxstore</string>
  • Make sure to clean up the cache by running the following script 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 changed from this file as well.

Android app:

  • Open android/app/src/main/res/values/strings.xml and replace Fluxstore with your app name:

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

    <application android:label="Fluxstore"

1.2 Change the app Bundle ID:

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

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

You can refer the way to change Bundle ID in this video:

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

To get more detailed 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 new 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 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'


3. About Us

Open lib/screens/settings.dart file to change the About Us url.

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.

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. Load Google Font per language

Flutter 1.2.x come with powerful Google Font library, you can load any font from google font and load to your app dynamically without downloading to the assets folder.

If you add more languages to the app and would like to change the font family, go to lib/common/constants.dart, example add new fr language with Lato font:

///Google fonts: https://fonts.google.com/
TextTheme kTextTheme(theme, String language) {
  switch (language) {
    case 'vi':
      return GoogleFonts.montserratTextTheme(theme);
    case 'ar':
      return GoogleFonts.ralewayTextTheme(theme);
    case 'fr':
      return GoogleFonts.latoTextTheme(theme);
    default:
      return GoogleFonts.ralewayTextTheme(theme);
  }
}

TextTheme kHeadlineTheme(theme, [language = 'en']) {
  switch (language) {
    case 'vi':
      return GoogleFonts.montserratTextTheme(theme);
    case 'ar':
      return GoogleFonts.ralewayTextTheme(theme);
    default:
      return GoogleFonts.ralewayTextTheme(theme);
  }
}

🗳 Coding Guide: Make sure the spacing align is correct.


7. Default Country Code, Symbol

Open lib/common/config.dart file and update the DefaultCurrency section.

const kAdvanceConfig = {
  "DefaultCurrency": {
    "symbol": "\$",
    "decimalDigits": 2,
    "symbolBeforeTheNumber": true,
    "currency": "USD"
  },
  ...
};

8. Currency Switcher

fluxstore_currencies_inspireui_flutter

This feature is only available for WooCommerce version, below is 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

  • Open the Fluxstore project, and update the lib/common/config.dart:
const kAdvanceConfig = {
  ...
  "Currencies": [
    {
      "symbol": "\$",
      "decimalDigits": 2,
      "symbolBeforeTheNumber": true,
      "currency": "USD"
    },
    {
      "symbol": "đ",
      "decimalDigits": 2,
      "symbolBeforeTheNumber": true,
      "currency": "VND"
    }
  ]
};

9. Customize bottom TabBar

Open lib/config/config_en.json and change the 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 to be hidden or displayed.
  • icon: icon settings for the tab bar.
  • layout: the layout option. This value only effects the Category screen. Please see the "Customize Layout" topic for more details.

10. Dynamic Product Variant

Open lib/common/config.dart, then customize the product variant values or order the display position.

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.


11. Onboarding and Login mode

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

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

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" '

13. Downloadable product app

To enable the Downloadable product which is used for some business like Download the Digital Assets, Download E-Book…

As the download will not require the checkout and shipping address, so you need to disable this screens from the common/config.dart file:

"EnableShipping": false,
"EnableAddress": false,

The screen of downloadable product will be display as normal, but once the user purchased your products successful, the download link will be apprear from the Order Detail screen:

fluxstore_currencies_inspireui_flutter

14. Product Advance Options

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

const kAdvanceConfig = {
  "DefaultLanguage": "en",
  "DefaultCurrency": {
    "symbol": "\$",
    "decimalDigits": 2,
    "symbolBeforeTheNumber": true,
    "currency": "USD"
  },
  "IsRequiredLogin": false,
  "GuestCheckout": true,
  "EnableShipping": true,
  "EnableAddress": true,
  "EnableReview": true,
  "GridCount": 3,
  "DetailedBlogLayout": kBlogLayout.halfSizeImageType,
  "EnablePointReward": false,
  "DefaultPhoneISOCode": "+84",
  "DefaultCountryISOCode": "VN",
  "EnableRating": true,
  "EnableSmartChat": true,
  "ZoneIdShipping": [1, 2],
  "hideOutOfStock": true,
  'allowSearchingAddress': true,
  "isCaching": false,
  "OnBoardOnlyShowFirstTime": true,
  "EnableConfigurableProduct": false, //for magento
  "EnableAttributesConfigurableProduct": ["color", "size"], //for magento
  "EnableAttributesLabelConfigurableProduct": ["color", "size"] //for magento
  "EnableAdvertisement": true,
  "Currencies": [
    {"symbol": "\$", "decimalDigits": 2, "symbolBeforeTheNumber": true, "currency": "USD"},
    {"symbol": "đ", "decimalDigits": 2, "symbolBeforeTheNumber": true, "currency": "VND"}
  ]  
};
  • DefaultLanguage: default language for the app.

  • DefaultCurrency: default currency format.

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

  • GuestCheckout: enable the guest checkout. Without logging in, users can still buy products.

  • EnableShipping: to skip the shipping info.

  • EnableAddress: enable the address shipping, set false if use for the app like Download Digial Asset which is not required the shipping feature.

  • EnableReview: enable the review on the product.

  • 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/#blog-detail-layout for more detail.

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

  • DefaultPhoneISOCode: default country phone IOS Code when login as SMS Login feature.

  • DefaultCountryISOCode: default country IOS Code.

  • EnableRating: enable the Rating feature for Product 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.

  • ZoneIdShipping: Check how may shipping id and change exactly ZoneIDShipping. If your shipping zone is 1,2 then typing 1,2 . If your shipping zone ID is 1, you need to type only 1. If you type extra id or wrong id, the shipping error during checkout will be occur.

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

  • allowSearchingAddress: enable the Google Map Picker address from Shipping screen.

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

  • OnBoardOnlyShowFirstTime: enable the enable the Onboarding feature only show at first time, otherwise it will show as alway.

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

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

  • EnableAdvertisement: set "true" to enable the setting for Ads feature.

  • 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
};
  • 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 these 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.

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

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

16. 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, configure 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": ""},
];

17. 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