This session explains the way to customize all layout and theme, as the Dynamic Tabbar, Home Layout, Blog Detail Layout, Category Layout, Drawer Layout, Dart Theme Setting, Wordpress Blog Layout...

When installing, if you get issue, please go to Common Questions or Common Issues to find the solutions.

You can use the FluxBuilder tool to customize your app design easily by drag & drop. Refer to the guide of FluxBuilder https://docs.inspireui.com/fluxbuilder:

Or you can manually customize your app design following:

1. Dynamic Tabbar

This is a good feature configuration to change the tabbar icon, positions and default layout.

Open lib/config/config_en.json and edit the Tabbar value:

"TabBar": [
    {
      "layout": "home",
      "icon": "assets/icons/tabs/icon-home.png"
    },
    {
      "layout": "category",
      "categoryLayout": "card",
      "icon": "assets/icons/tabs/icon-category.png"
    },
    {
      "layout": "search",
      "icon": "assets/icons/tabs/icon-search.png"
    },
    {
      "layout": "profile",
      "icon": "assets/icons/tabs/icon-user.png"
    }
  ]
  • layout: the screen layout, for the special home layout. It is a dynamic layout that could control more flexible by updating HorizonLayout, VerticalLayout, Background values (from the same config_en.json file).
  • icon: the asset file to load the tabbar icon image.
  • categoryLayout: support many kinds of layout grid, column, sideMenu, subCategories, card. It's used to display the content category types.

With multi languages feature, the /lib/config folder will have these files: config_ar.json, config_en.json, config_ja.json, ... If you want to add a new language, you copy the configuration to other config_xx.json files so that you can see the changes reflected when changing language.

2. Home Layout

We provide many theme templates as config_themeXX.json files. You are able to select one template that you love. These theme files are in:

  • Fluxstore Multi Vendor app: open lib/example/dokan folder.
  • Fluxstore Pro, or Fluxstore Woocommerce app: open lib/example/woocommerce folder.

Copy and replace the content of config_themeXX.json to lib/config/config_en.json to get the demo as screenshots below:

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.

  • With multi languages feature, the /lib/config folder will have these files: config_ar.json, config_en.json, config_ja.json, ... If you want to add a new language, you copy the configuration to other config_xx.json files so that you can see the changes reflected when changing language.

1. Banner Slider Image

slider

๐Ÿ—ณ Coding Guide: widget file path: lib/widgets/home/banner/banner_slider_items.dart

๐Ÿ“– Usage: config lib/config/config_en.json as following option to enable the slider image.

  • layout: bannerImage
  • isSlider: true show the banner as slider.
  • items: is the array of json image objects. Each image can be linked 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
        }
      ]
    }

2. Banner Group Image

group

๐Ÿ—ณ Coding Guide: widget file path: lib/widgets/home/banner/banner_group_items.dart

๐Ÿ“– Usage: Support to show many images in the same row. Config lib/config/config_en.json file as following option to enable the group image.

  • items: is the array of json image objects. Each image can be linked to list of products by category ID. If the items has 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
        }
      ]
    },

3. Logo Item

logo

๐Ÿ—ณ Coding Guide:

  • Widget file path: lib/widgets/home/index.dart, check the case "logo".
  • Edit the const kLogoImage = 'assets/images/logo.png' from lib/common/constants/images.dart to change the Logo.

๐Ÿ“– Usage: Support to the Logo file from homepage as optional, enable to add this object (in lib/config/config_en.json file).

 	{
      "layout": "logo"
    },

Category List Icons

category

๐Ÿ—ณ Coding Guide:

  • Widget file path: lib/widgets/home/category/category_icon_items.dart

  • Edit lib/config/config_en.json to enable list of available categories by customizing the ID and 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 lib/config/config_en.json file.

 	{
      "layout": "circleCategory"
    },

4. Product Card listing

card

๐Ÿ—ณ Coding Guide: widget file path: lib/widgets/product/product_list.dart and lib/widgets/product/product_card_view.dart

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

  • name: the name to display the card title.
  • layout: the supported layout should be

    • threeColumns
    • twoColumns
    • fourColumns
    • card
    • simpleVerticalListItems
  • category: the category id of your website.
{
      "name": "Woman Collection",
      "layout": "threeColumn",
      "category": 27
},

5. Instagram items

instagram

๐Ÿ—ณ Coding Guide:

  • Widget file path: lib/widgets/home/horizontal/instagram_items.dart
  • The widget depends on webview_flutter to display the detailed instagram page by webview, but the list image is native by Flutter widget.

๐Ÿ“– Usage: Support to show list of Instagram photos by the Tag config (in lib/config/config_en.json file). This is very useful for displaying your existing photos from Instagram.

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

6. Metro Layout (staggered list)

Config lib/config/config_en.json as following:

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

7. Tinder Banner

Config lib/config/config_en.json as following:

{
  "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
    }
  ]
},

8. Vertical Layout

Config lib/config/config_en.json as following:

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

The vertical is support following Layout values: pinterest, menu, card, columns, list, default.


3. Blog Detail Layout

img

Open lib/common/config.dart, in the kAdvanceConfig section, change the kBlogLayout config to one of following enums: { simpleType, fullSizeImageType, halfSizeImageType, oneQuarterImageType }. (For Fluxstore from version 1.6.6, it is in lib/common/config/general.dart )

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

4. Category Layout

Open lib/config/config_en.json and change the TabBar section to one of following string values { card, sideMenu, column, subCategories, animation, grid}

  "TabBar": {
	...
    "Category": {
      "isDisplay": true,
      "layout": "card"
    },

img


5. Drawer Layout (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. (From version 1.7.x, change the icon on this file: https://tppr.me/zPDcz , change the left menu side content: https://tppr.me/QkgPa)

drawer: Drawer(
    child: SingleChildScrollView(
        child: Column(
            children: <Widget>[
                DrawerHeader(
                    child: Row(
                        children: <Widget>[
                            Image.asset(kLogoImage, height: 38),
                        ],
                    ),
                    decoration: BoxDecoration(
                        color: Colors.white,
                    ),
                ),
                Padding(
                    padding: const EdgeInsets.only(left: 15.0),
                    child: Column(
                        children: <Widget>[
                            ListTile(
                                leading: Icon(
                                    Icons.shopping_basket,
                                    size: 20,
                                ),
                                title: Text(S.of(context).shop),
                                onTap: () {
                                    Navigator.pushReplacementNamed(context, "/home");
                                },
                            ),
                            ListTile(
                                leading: Icon(FontAwesomeIcons.wordpress, size: 20),
                                title: Text(S.of(context).blog),
                                onTap: () {
                                    Navigator.pushNamed(context, "/blogs");
                                },
                            ),
                            ListTile(
                                leading: Icon(FontAwesomeIcons.heart, size: 20),
                                title: Text(S.of(context).myWishList),
                                onTap: () {
                                    Navigator.pushNamed(context, "/wishlist");
                                },
                            ),
                            ListTile(
                                leading: Icon(Icons.exit_to_app, size: 20),
                                title: loggedIn
                                ? Text(S.of(context).logout)
                                : Text(S.of(context).login),
                                onTap: () {
                                    loggedIn
                                        ? Provider.of<UserModel>(context).logout()
                                        : Navigator.pushNamed(context, "/login");
                                },
                            ),
                            SizedBox(
                                height: 20,
                            ),
                            ExpansionTile(
                                initiallyExpanded: true,
                                title: Text(
                                    S.of(context).byCategory.toUpperCase(),
                                    style: TextStyle(
                                        fontSize: 14,
                                        fontWeight: FontWeight.w600,
                                        color: Theme.of(context)
                                        .accentColor
                                        .withOpacity(0.5),
                                    ),
                                ),
                                children: showCategories(),
                            ),
                        ],
                    ),
                )
            ],
        ),
    ),
),

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


7. Wordpress Blog Layout

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 to the homepage, open the lib/config/config_en.json and add below section.

img

๐Ÿ’  To customize the Blog list screen, open lib/screens/blogs.dart. (For Fluxstore from version 1.6.6, it is in lib/screens/blogs/blogs.dart)

img


8. Add Sticky Header on Homepage

To enable the sticky header on the Homepage, open the lib/config/config_en.json and update StickyHeader to true.

"Setting": {
  ...
  "StickyHeader": true
},