Skip links

Guide to use FluxBuilder

This guide shows you the way to use this awesome FluxBuilder tool. You can refer and subscribe to the Youtube InspireUI Channel for free instructional videos.

Full document of FluxBuilder is in https://docs.fluxbuilder.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.
Web version: https://web.fluxbuilder.com

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, StrapiListeoMy ListingListingPro, BigCommerce, Notion. To see how your app looks like and customize your app, 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.
  1. Select “DASHBOARD”, then “Create New App”:
  1. 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 itemSolution
 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 SettingCheck 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 AuthorizationPlease input your Consumer Key and Consumer Secret, following this guide.
CS & CK ValidationMake sure you have inputted the correct Consumer Key and Consumer Secret
Pages ConnectivityPlease ignore it. We will remove this item.
WooCommerce ConnectivityYour REST APIs are not enabled on your website, please follow this guide
PrestaShop ConnectivityIt could be missing the PrestaShop plugin on your site. Please follow this guide to install this plugin
Magento ConnectivityYou could install this extension to active the API integrate with the app following this guide.
WCFM ConnectivityMissing WCFM Rest API. Please install WCFM Rest API plugin to solve it.
Dokan ConnectivityMissing Dokan Rest API. Please install Dokan Rest API plugin to solve it.
Opencart ConnectivityYou could install this extension to active the API integrate with the app following this guide.
Listing ConnectivityYour REST APIs are not enabled on your website, please follow this guide.
  • If you cannot see Products or Categories (or slowly loading), you would resize images (optimize the network request for Images), 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 the Common issues and Solutions
  1. Select a template for your app:
The simulator just shows the app Design, not features. So don’t click to test features on the simulator. To customize the Features of app, please click Features on the left menu.

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
Customize the Features

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, then select Cloud to automatically build IPA and APK files on our server following this video.
No need to set up the Flutter environment on your laptop.
You can use Windows to build iOS apps too.

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

Read more information about FluxBuilder

If the product is useful, please feel free to give us 5 ⭐️ Rating. Thank you & happy coding ☺️

You may also like