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

(There are new awesome Widgets are comming along on later update... )

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
};