1. Update the Horizontal Homepage Layout

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

banner-slider

🗳 Coding Guide: widget file path: widgets/blog/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,
      "design": "default",
      "showBackGround": true,
      "radius": 2.0,

      "items": [
        {

          "category": 40,
          "image": "https://images.unsplash.com/photo-1448131063153-f1e240f98a72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
          "padding": 15.0

        },
        {
          "category": 41,
          "image": "https://images.unsplash.com/photo-1496318447583-f524534e9ce1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
          "padding": 15.0
        },
        {
          "category": 31,
          "image": "https://images.unsplash.com/photo-1558920558-fb0345e52561?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
          "padding": 15.0
        }
      ]
    },

Blog List Views

Support following layout style

Four columns:

Four columns four columns
Three Columns four-columns
Two Columns four-columns
Card View four-columns

🗳 Coding Guide: widget file path: widgets/blog/blog_list_items.dart and widgets/blog_card_view.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 fourColumn, threeColumns, twoColumns, card
  • category: the category id of your website.
{
      "name": {
        "en": "Four Column Default",
        "ab": "Four Column Default",
        "vi": "Four Column Default"
      },
      "image": "",
      "layout": "fourColumn",
      "category" : 36
    },

Horizon Slider List

list-right

🗳 Coding Guide: widget file path: widgets/blog/horizontal/slider_list.dart

📖 Usage: config as following option to enable the slider image

  • layout: sliderBlogList

  • type: support detail with image on the left and imageOnTheRight

  • category: the category id of the Blogs

    {
      "layout" : "sliderBlogList",
      "type": "imageOnTheRight",
      "imageBorder": 3.0,
      "name": {
        "en": "Slider Horizontal Blog List",
        "ab": "Slider Horizontal Blog List",
        "vi": "Slider Horizontal Blog List"
      },
      "category": 33
    },

Horizon Large Card

list-right

🗳 Coding Guide: widget file path: widgets/blog/horizontal/horizontal_list_items.dart

📖 Usage: config as following option to enable the slider image

  • layout: largeCardHorizontalListItems

  • imageBorder: the border radius of the card

  • category: the category id of the Blogs

    {
      {
        "name": {
          "en": "Large Card Layout",
          "ab": "Large Card Layout",
          "vi": "Large Card Layout"
        },
        "layout" : "largeCardHorizontalListItems",
        "imageBorder": 20.0,
        "category": 41
      },
    },

Staggered List

list-right

🗳 Coding Guide: widget file path: widgets/blog/blog_staggered.dart

📖 Usage: config as following option to enable the slider image

  • layout: staggered

  • category: the category id of the Blogs

     {
      "name": {
        "en": "Staggered Default",
        "ab": "Staggered Default",
        "vi": "Staggered Default"
      },
      "layout": "staggered",
      "category": 33
    },

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.png";

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. Dart theme Setting

New release 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

6. 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

drawer