-
You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.
Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"
Fluxstore Multi Vendor - Flutter E-commerce Full App v3.16.0
- Thread starter julienbremond
- Start date
For launcher icon, drop a file named 'app_icon.png' into assets/images/
Now with the project open in Android Studio, go to Terminal and run this code
"flutter pub run flutter_launcher_icons:main"
Should work same in VSCode. The app uses flutter_launcher_icons package so you can read more about in pub.dev,
Coming to your next point i.e. Package name, search/replace the following with your own:
"fluxstore-inspireui.appspot.com".
I use Sublime text to quickly find and replace all the package name. Faster methods may exist but this works for me.
And finally browse to Android/app/src/main/kotlin/ and refactor the folder name to match your own package name. If you have previously worked in Android, it should be easy.
PS: If you are using latest MStore API, login won't work. If you switch to old MStore API, certain features won't work. Specially variable products will load infinitely.
thanks much. but there is any way to fix that Mstore API issue you described?
Login working just fine.
if you have installed the nulled MStore API plugin you can update it and you still can use it.
if you have installed the nulled MStore API plugin you can update it and you still can use it.
Bro documentation pleaseLogin working just fine.
if you have installed the nulled MStore API plugin you can update it and you still can use it.
Hello, does anyone have the documentation for Multi Payment gateway?! I see one has to login with evanto account and purchase code which I dont have
I need the whole general section. Kindly pleasewhich section do you need of the below
this is the whole section, right side menu links are not working and also external images are not showing.
you can open each link from the local HTML files.
mega.nz
you can open each link from the local HTML files.
75.39 MB file on MEGA
Thank you very very much.this is the whole section, right side menu links are not working and also external images are not showing.
you can open each link from the local HTML files.
75.39 MB file on MEGA
Thank you brothis is the whole section, right side menu links are not working and also external images are not showing.
you can open each link from the local HTML files.
75.39 MB file on MEGA
Bro thanks very much for this help.this is the whole section, right side menu links are not working and also external images are not showing.
you can open each link from the local HTML files.
75.39 MB file on MEGA
though two important features are missed
1. Common basic features.
2. Customize UI layout.
please help to share and this two.
thanks.
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...
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):
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";
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",
};
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,
...
};
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" '
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"
}
],
};
"height": 0.5,
"marginTop": 0,
"isHero": false,
"safeArea": false,
"showVideo": true,
"showThumbnailAtLeast": 3,
"layout": kProductLayout.simpleType,
"maxAllowQuantity": 100
};
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
}
];
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.
...
"ProductListLayout": "pinterest"
...
}
result:
...
"ProductListLayout": "list",
"ratioImageProduct": 2,
"ratioInfoProduct": 1
...
}
result:
16. Add Whatsapp menu at setting page?
....
if (widget.config['url_launch'] != null) {
launch(widget.configo configure deep link["url_launch"]);
}
https://babia.to/static/e49ea031f0ef13a7ca01e758d3079c51/56ee6/whatsapp.png
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
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):
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";
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
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.
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" '
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:
const kProductDetail = {
"height": 0.5,
"marginTop": 0,
"isHero": false,
"safeArea": false,
"showVideo": true,
"showThumbnailAtLeast": 3,
"layout": kProductLayout.simpleType,
"maxAllowQuantity": 100
};
- 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.
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.
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"
...
"ProductListLayout": "pinterest"
...
}
result:
- The second, you can add config the ratio of both image and information of the product as follows
...
"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:
....
if (widget.config['url_launch'] != null) {
launch(widget.configo configure deep link["url_launch"]);
}
https://babia.to/static/e49ea031f0ef13a7ca01e758d3079c51/56ee6/whatsapp.png
Similar threads
