Fluxstore Multi Vendor - Flutter E-commerce Full App v5.0

Common Features
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 Filters...

• If you would like to change App Name/ Bundle ID, please refer to the Release Section
• See more guide, go to the Install Checklist

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:

• https://flutter.dev/docs/development/tools/devtools/inspector

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



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



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";
New: From version 1.7.7 onwards, you need to set kSplashScreenType to one of these options:

// For flare splash screen:
const kSplashScreenType = "flare";

// For image splash screen:
const kSplashScreenType = "animated";
// or
const kSplashScreenType = "zoomIn";
// or
const kSplashScreenType = "static";
🗳 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'

Click to expand...

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





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 = {
"color": "color",
"size": "box",
"height": "option",
};

• key: should be matched with the variant slug name.
• value: support 3 types of layout color, box and option.
• Support multi language for product attribute, edit following setting

// Example update the product variant for 3 languages
const kProductVariantLanguage = {
"en": {"color": "Color","size": "Size", "height": "Height"},
"ar": {"color": "اللون", "size": "بحجم", "height": "ارتفاع"},
"vi": {"color": "Màu", "size": "Kích thước", "height": "Chiều Cao"},
};
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"
}
]
}
To remove the Onboarding (the OnBoard slider, or welcome screen), please emove this line – https://tppr.me/k0e98

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,
...
};
8. DeepLink
If you are using Stripe payment, deep link is required for Stripe 3D Secure transaction to work.

To configure deep link, you can follow this documentation.

Test:

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

Reference more detail the new feature Dynamic Link that more flexible from Firebase library

Click to expand...

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

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

Click to expand...

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.

Click to expand...

• 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:
  • WooFeature Video: https://wordpress.org/plugins/woo-featured-video/
  • Yith Feature Video: https://wordpress.org/plugins/yith-woocommerce-featured-video/
• 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.

Click to expand...

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:



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.


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.




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:



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



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:

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



16. Add Whatsapp menu at setting page?

• when someone click on Whatsapp menu, its a url to https://api.whatsapp.com/send?phone=0816255779
• Solution:
• Try to edit the lib/config/config_en.json to "url_launch": "https://wa.me/84988808854"
• Update the banner item as below code+screenshot:

import 'package:url_launcher/url_launcher.dart';
....

if (widget.config['url_launch'] != null) {
launch(widget.configo configure deep link["url_launch"]);
}
https://babiato.tech/static/e49ea031f0ef13a7ca01e758d3079c51/56ee6/whatsapp.png

kapimpiticeo said:

Bro thanks very much for this help.
though two important features are missed
1. Common basic features.
2. Customize UI layout.
please help to share and this two.
thanks.

Click to expand...

Hi There,
I'm not able to upload full doc right now. currently my internet is very slow.

so I pasted thisin text format. i think this was enough for customization. most of the inspireui pics are broken on my offline doc too. if you want any other notes meansplease mention here. I'll check and update here.

here are the common basic features and customize UI layout section for you all.

UP

Version 1.9.4 – 29 Jan 2021

How to edit sliders ? Unable to figure out sir, and unable to figure how to to edit the design layout config files

Good Day everyone, Is it just me. the Profile Update button just goes to the home screen.

I hope that you can help me out. Thank you.

PaLCracker updated Fluxstore Multi Vendor - Flutter E-commerce Full App with a new update entry:

Fluxstore Multi Vendor - Flutter E-commerce Full App

Changelog

Version 1.9.4 – 29 Jan 2021

Last updated: Jan 28, 2021


:: Important improvements

This feature only includes the important patching to fix the Security issues to protect both app and website. We would like to thanks to Vincent Datrier to report this issue via the Ticket Support, and raised the CVE-2021-24148 issue.


Migration guide (for previous Fluxstore app):


From the...

Click to expand...

Read the rest of this update entry...

Thank you verry much bro @PaLCracker

Hello guys my mstore plugin it look dark after update to latest version. is it crushed or it look as it should?

rohan2020 said:

Anyone have link for Fluxstore Multi Vendor 1.9.0 ~ 1.9.2.
Please share me.

Thanks

Click to expand...

Did you check the release history for this resource? Top of the page "History" tab

If anyone is building production app with this code, avoid updating to Flutter 2.0. Many things have changed and a lot of the code will break. There are plugin conflicts, plugins locked to older dependencies, breaking changes in existing code. Only update if you know how to resolve such conflict or wait for plugins to become stable.

PS: This issue is widespread through all Fluxstore labelled product.

Pls update v2.0

hello guys.
i built my first app but on sms login there is flickering on red colors button can anyone knows the reason.

I have the version 2.0.0 , anyone can share the pro edition?

Why the product is not displaying under vendors, any ideas? and category also not displaying properly

can you please provide alternate download provider like mega etc

i try 3 time to download it failed every time at 95%

please help