1. Update the Horizontal Homepage Layout

Open lib/common/config.json and use of of these config for the layout

slider

๐Ÿ—ณ Coding Guide: widget file path: widgets/horizontal/banner_slider_items.dart

๐Ÿ“– Usage: config as following option to enable the slider image

  • layout: bannerImage
  • isSlider: true show the banner as slider
  • items: is the array of json image object, each image can be link to list of products by category ID
	{
      "layout": "bannerImage",
      "isSlider": true,
      "items": [
        {
          "category": 21,
          "image": "https://user-images.githubusercontent.com/1459805/59846818-12672e80-938b-11e9-8184-5f7bfe66f1a2.png",
          "padding": 15.0
        },
        {
          "category": 23,
          "image": "https://user-images.githubusercontent.com/1459805/60091575-1f12ca80-976f-11e9-962c-bdccff60d143.png",
          "padding": 15.0
        },
        {
          "category": 21,
          "image": "https://user-images.githubusercontent.com/1459805/60091808-a19b8a00-976f-11e9-9cc7-576ca05c2442.png",
          "padding": 15.0
        }
      ]
    }

group

๐Ÿ—ณ Coding Guide: widget file path: widgets/horizontal/banner_group_items.dart

๐Ÿ“– Usage: Support to show many images in the same row.

  • items: is the array of json image object, each image can be link to list of products by category ID, if the items is content only one image Object it will show only one banner.
  • isSlider: false or it can be blank as below example.
	{ 
      "layout": "bannerImage",
      "items": [
        {
          "category": 37,
          "image": "https://user-images.githubusercontent.com/1459805/59846823-12ffc500-938b-11e9-8d93-65ead3d6b1dd.png",
          "padding": 5.0
        },
        {
          "category": 38,
          "image": "https://user-images.githubusercontent.com/1459805/59846824-12ffc500-938b-11e9-8d5a-fc42cb1b7658.png",
          "padding": 5.0
        }
      ]
    },

Logo Item

logo

๐Ÿ—ณ Coding Guide:

  • widget file path: widgets/horizontal/index.dart check the case "logo"
  • Edit the const kLogoImage = 'assets/images/logo.png' from constant.dart to change the Logo.

๐Ÿ“– Usage: Support to the Logo file from homepage as optional, enable to add this object.

 	{
      "layout": "logo"
    },

Category List Icons

category

๐Ÿ—ณ Coding Guide:

  • widget file path: widgets/horizontal/category_items.dart

  • Edit common/config.dart to enable list of avaiable category by ID and customse the color, it's possible to change the heave gradient with white center icons:

    {
      "category": 22,
      "image": "assets/icons/categories/ic_dress.png",
      "colors": ["#3E6AB5", "#3E6AB5"],
    },

๐Ÿ“– Usage: Support to show list of icons by adding this section to the config.json file

 	{
      "layout": "circleCategory"
    },

Product Card listing

card

๐Ÿ—ณ Coding Guide: widget file path: widgets/horizontal/product_list_items.dart and widgets/product_card.dart

๐Ÿ“– Usage: Support to show list of Products by flexible layout (Card, two column or three columns) by adding this section to the config.json file

  • name: the name to display the card title
  • layout: the support layout should be threeColumns, twoColumns, card
  • category: the category id of your website.
{
      "name": "Woman Collection",
      "layout": "threeColumn",
      "category": 27
},

Instagram items

instagram

๐Ÿ—ณ Coding Guide:

  • widget file path: widgets/horizontal/instagram.dart
  • The widget is depend to webview_flutter to display the detail instagram page by webview, but the list image is native by Flutter widget.

๐Ÿ“– Usage: Support to show list of Instagram photo by the Tag config, this is very useful to display your exisitng photo from Instagram.

  • name: the title of list items
  • layout: the name should be instagram
  • tag: the tag name of your instgram
	{
      "name": "Share your look",
      "layout": "instagram",
      "tag": "fashionmodel"
    }

Metro layout:

{
  "layout": "staggered",
  "limit": 20,
  "category": 29
}

Simple ListView Layout

{
  "layout": "simpleVerticalListItems"
}

Four Columns Layout**

{
  "layout": "fourColumn",
  "category": 209
},

Tinder Banner

{
  "layout": "bannerImage",
  "isSlider": true,
  "design": "tinder",
  "items": [
    {
      "category": 23,
      "image": "https://user-images.githubusercontent.com/1459805/59846818-12672e80-938b-11e9-8184-5f7bfe66f1a2.png",
      "padding": 15.0
    }
  ]
},

Vertical layout

"VerticalLayout": {
  "layout": "pinterest",
  "name": {
    "en": "Recent Collections",
    "ab": "ู…ุฌู…ูˆุนุงุช ุงู„ุฑุฌู„",
    "vi": "Bแป™ sฦฐu tแบญp gแบงn "
  }
},

The Layout values: pinterest, menu, card, columns, list, default

2. Change the logo and Icons, splash screen

Open lib/common/constants.dart to map your news 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.

3. Change the App Color

Open lib/common/config.json file in project.

You could change most of components color 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 to the common/styles.dart

4. Change the default Font and Header Font

Open pubspec.yaml and replace with your new font file that already copied to the asset folder:

  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
        - asset: assets/fonts/Raleway-Bold.ttf
        - asset: assets/fonts/Raleway-Light.ttf
        - asset: assets/fonts/Raleway-Thin.ttf
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Medium.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
        - asset: assets/fonts/Roboto-Light.ttf
        - asset: assets/fonts/Roboto-Thin.ttf

๐Ÿ—ณ Coding Guide: go the common/styles.dart and change to new fontFamily. Make sure the spacing the align correctly

5. Add payment Gateway

payment

As the app is already integrated with multi payment gateway, once you config it run success on the website, it can be run smoothly from the app, add new payment key value and the image URL to enable it:

const Payments = {
  "paypal": "assets/icons/payment/paypal.png",
  "stripe": "assets/icons/payment/stripe.png",
  "razorpay": "assets/icons/payment/razorpay.png",
};

๐Ÿ—ณ Coding Guide:

  • Go the screens/checkout/payment.dart to customize this list.

  • Please note that the multi payment gateway only avaiable for the WooCommerce integrate, other framework is not supported yet.

6. Change the default Country Code, symbol

Open common/config.dart file and update the menu section

const DefaultCurrency = {
  "symbol": "\$",
  "decimalDigits":2
};

7. Dart theme Setting

img

New release 1.2 also supports Dart theme setting, thanks to Flutter bring the best theming built in. To change the background or customize your own colors, just simply open the lib/common/styles.dart and change buildLightTheme or buildDartTheme functions.

img

8. Wordpress Blog

Sometimes, your e-commerce app needs to share more information via the Blog and post a new announcement.

img

Wordpress Blog

๐Ÿ’  To add a new Blog section from the homepage, open the lib/common/config.json and add this section

img

๐Ÿ’  To customize the Blog list screen open lib/screens/blogs.dart

img

9. Drawer (left menu side)

New Left menu side is now easier to navigate between the Shop and other menu items. The menu could be opened by swiping from left to right or trigger by this function Scafford.of(context).openDrawer()

To add new menu item go to lib/tabbar.dart

10. Address Filling via Google Map.

img

Address fill in

Get an API key at https://cloud.google.com/maps-platform/ if you havenโ€™t already.

Open the lib/common/config.dart and replace your own key:

const kGoogleAPIKey = {
  "android": "you-google-api-key",
  "ios": "you-google-api-key"
};

Open ios/Runner/AppDelegate.m and replace your own key:

[GMSServices provideAPIKey:@"your-google-api-key-here"];

Open android/app/src/main/AndroidManifest.xml: and replace your own key:

<meta-data android:name="com.google.android.geo.API_KEY"
    android:value="your-google-api-key-here"/>

To project your key, log in to https://console.cloud.google.com/apis/credentials/key and manage the restrictions per-app bundle id:

img

13. Dynamic Product Variant.

Open common/config.dart and custom the products variant values or ordering the display position

const ProductVariants = [
  {
    "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

The is a feedback from one of our Customer to adjust the product detail design screen as he reports the default detail screen just match with the Fashion UI, the team have made some upgrade the product detail more flexible by below config

const kProductDetail = {
  "height": 1.2,
  "marginTop": 0,
  "isHero": false,
};
  • height the percent height of the featured product images.

  • marginTop the top margin with the top edge, this setting to prevent the cutting without using SafeArea widget.

  • isHero option to enable the hero animate.

14. Onboarding screens and strict Login mode.

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

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 strict user login before using the app by enabling IsRequiredLogin

const bool IsRequiredLogin = false;

15. Change the blog detail layout

img

Open lib/common/config.dart and change the config kBlogLayout to one of following enum: { simpleType, fullSizeImageType, halfSizeImageType, oneQuarterImageType }

const kAdvanceConfig = {
  "DetailedBlogLayout": kBlogLayout.halfSizeImageType
};

16. Change home screen layouts.

Open lib/common/example/woocommerce/config_themeXX.json and copy the content to lib/common/config.json to get the demo as following screenshots:

img

img

img

img

Yes, itโ€™s quite easy to change your own design base on the powerful widget from the app, try to make your own tuning Homepage.

17. Change 5 category screen layout.

Open lib/common/config.dart and change the config kCategoriesLayout to one of following enum values { card, sideMenu, column, subCategories, animation, grid}

img

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

19. Config the Product Detail Advance Options.

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

const kAdvanceConfig = {
  "DefaultCurrency": {"symbol": "\$", "decimalDigits": 2},
  "IsRequiredLogin": false,
  "GuestCheckout": true,
  "EnableShipping": false
};
  • DefaultCurrency: format the default currency
  • IsRequiredLogin: force the user login before using the app.
  • GuestCheckout: enable guest checkout, without require the login the user can still buy the product.
  • EnableShipping: for skip the shipping info.

New release 1.4 also support for the Affiliate Product Type when you config the value from the WooCommerce site.

const kProductDetail = {
  "safeArea": false,
  "showVideo": true,
  "showThumbnaiAtLeast": 3
};
  • safeArea: add new extra space on the top when view product detail.
  • showThumnailAtLeast: only display the product detail gallery if as leat this values, for example if we set the value to 2, it only displays the image gallery when more than 3 images.
  • showVideo: support to enable the show Video feature, support only for WooCommerce by installing these video plugin