This guide shows you the way to install FluxBuilder and how to use this awesome tool. You can refer and subscribe to the Youtube InspireUI Channel for free instructional videos.
Full document of FluxBuilder is in https://support.inspireui.com
1. Download and Install
Where to download FluxBuilder?
Windows and MacOS: download the latest release here. Then unzip and install it following this video.
2. Guide to use
This FluxBuilder tool is compatible with these websites: WooCommerce, Woocommerce Multi Vendors (with Dokan or WCFM), Shopify, Opencart 3.x, WordPress, Magento 2.x, Prestashop, Strapi, Listeo, My Listing, ListingPro. To see how your app looks like and customize your app Design, do these steps:
Step 1
Sign up a new account and Sign In successfully following this video. Please use English keyboard.
Step 2
Integrate with your Website following this video. Please choose the correct framework.
- Select “DASHBOARD”, then “Create New App”:
- To get Customer key and Consumer secret, refer to Generate Keys as this image https://tppr.me/rGYy2
- To get Access Token from Shopify (the storefront access key), you can refer to this guide to get it.
- Input your domain/website’s information as image below. Do not input sub-folder domain like this https://yaari.store/pk-en. Please change to subdomain or main domain. FluxStore apps does not support the sub-folder domain because it causes Rest API issue.
- If you get failed at Analyze Connectivity screen, please check the solution below:
| Failed item | Solution |
| Make sure you do not input sub-folder domain like this https://yaari.store/pk-en. Please change to subdomain or main domain | |
| Make sure you input https instead of http | |
| Permalink Setting | Check your backend to see if it works https://your website/wp-json/wc/v2/products?consumer_key=your ck key&consumer_secret=your cs key |
| CS & CK Authorization | Please input your Consumer Key and Consumer Secret, following this guide. |
| CS & CK Validation | Make sure you have inputted the correct Consumer Key and Consumer Secret |
| Pages Connectivity | Please ignore it. We will remove this item. |
| WooCommerce Connectivity | Your REST APIs are not enabled on your website, please follow this guide |
| PrestaShop Connectivity | It could be missing the PrestaShop plugin on your site. Please follow 6. FluxStore PrestaShop to install this plugin |
| Magento Connectivity | You could install this extension to active the API integrate with the app following this guide 2. FluxStore Pro (Magento) |
| WCFM Connectivity | Missing WCFM Rest API. Please install WCFM Rest API plugin to solve it. |
| Dokan Connectivity | Missing Dokan Rest API. Please install Dokan Rest API plugin to solve it. |
| Opencart Connectivity | You could install this extension to active the API integrate with the app following this guide 3. FluxStore Pro (Opencart) |
| Listing Connectivity | Your REST APIs are not enabled on your website, please follow Step 1: Setup Rest API |
- If your products or its images are not displayed, please setup the Regenerate Image plugin following this guide. After setup, please be sure your site plugin has regenerated thumbnail like this https://tppr.me/ckgYZ
- If not solved, please double check this guide. If you see the API works, it is okie.
- Select a template for your app:
Step 3
Customize the Design and common Features of your app. Please press & hold in 3-4 seconds then drag & drop.
Video guide:
Edit the TabBar
Edit the Layout
Edit the Homepage
Edit the Detailed Blog Settings
Edit the Templates, App Info, Left menu (Side menu)
New Left menu (Side menu) 1.3.0
New Templates 1.3.0
New Settings / Profile page 1.3.0
Enable Cart Quantity on Products Horizontal
Edit AppBar
Edit Splash screen
Step 4
You can export the customized design and feature files to save them into your FluxStore/FluxNews source code following this video.
Click Features on the left menu, then Export Data. (make sure you already activated the license, by inputting your purchase code of FluxStore app)
env.dart file is the customized Features. Click EXPORT to get this file and replace the lib/env.dart file in the source code of FluxStore app.
config_en.json file is the customized Design/UI. Click EXPORT to get this file and replace the lib/config/config_en.json in the source code of FluxStore app. The config_en.json is English language. For other languages, you just need to change the name following this guide (e.g. config_ar.json is Arabic).
Remember to update the lib/env.dart file with your website’s information, example FluxStore Multi Vendors app https://tppr.me/RVJT4
Step 5:
If you purchased the Extended License, select Build on the left menu to automatically build IPA and APK files following this video.
If you purchased the Regular License, follow this guide to install on android studio and build your own app on both iOS and Android.
Check out Flutter apps can use with FluxBuilder tool
- FluxStore Pro app is compatible with Woocommerce, Opencart 3.x, Magento 2.x websites (for multi-purpose: grocery, pharmacy, ecommerce stores…)
- FluxStore Multi Vendors app is compatible with Woocommerce website with WCFM (WC Lovers) or Dokan plugin.
- FluxStore Woocommerce app focuses to be compatible with Woocommerce website.
- FluxStore Listing app uses to build innovative apps like Airbnb, TripAdvisor, Yelp or FourSquare. This app requires to install one of following WooCommerce templates: Listeo, ListingPro, or MyListing
- FluxStore Shopify app is compatible with Shopify websites.
- FluxNews app is compatible with blog/news WordPress websites.
- FluxStore PrestaShop app is compatible with PrestaShop website.
- FluxStore Strapi app is compatible with Strapi website.
Read more information about FluxBuilder
If the product is useful, please feel free to give us 5 ⭐️ Rating. Thank you & happy coding ☺️
