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, Sticky Header, Loading animation...

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, below is quick guideline how to use the builder.

Or, you can manually customize your app source code by following sections

1. Dynamic Tabbar

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, copy the configuration to other config_xx.json files so that you can see the changes reflected when changing language. Reference more detail about the Multi-Language features.

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

Open lib/config/config_en.json (assumes the English is the default language setting) 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 layout category.
  • showChat: update true/false to display the Smartchat features, this feature is not support for layout home
  • label: display more Label menu item

2. Home Layout

  • To customize these setting easier, please give a try to use the Fluxbuilder app to update the UI via builder app - https://fluxbuilder.com
  • Itโ€™s quite easy to change your own design base on the following powerful widget from the app, try to make your own fancy Homepage by following below guideline.

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.
  • Fluxstore Listing app: open lib/example/listeo, listingpro, mylisting 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

1. Logo Item

logo

{
    "layout": "logo",
  	"image": 'http://your-logo-png'
},

๐Ÿ—ณ Files path:

  • lib/widgets/home/logo.dart

๐Ÿ“– Usage:

  • image: the URL Image link or local asset link
  • background: the Hex color background values
  • showSearch: show the Search Icon
  • color: setup color Icons
  • showMenu: show the left Menu Icon, you could change the Icons.blur_on to Icons.menu to display the Hamburger menu
  • showLogo: option to show or hide the Logo.
  • name: show the text of App Name if you donโ€™t want to show Logo Image.

2. Banner Slider Image

slider

{
      "layout": "bannerImage",
      "isSlider": true,
      "items": [
        {
          "category": 21,
          "image": "https://user-images.githubusercontent.com/1459805/59846818-12672e80-938b-11e9-8184-5f7bfe66f1a2.png",
          "padding": 15.0
        },
        {
          "image": "https://user-images.githubusercontent.com/1459805/60091575-1f12ca80-976f-11e9-962c-bdccff60d143.png",
          "padding": 15.0,
          "product": 123,
        }
      ]
}

๐Ÿ—ณ Files Path:

  • lib/widgets/home/banner/bannerslideritems.dart
  • lib/common/tools.dart

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

  • layout: the value should be bannerImage
  • isSlider: value true/false, 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. The Banner Items detail setting:

    • image: the URL of the Images, it could be the asset local Image file.
    • padding: the spacing padding, value should be double values.
    • category: config this Category ID to open the banner to category product list.
    • product: value Product-ID open the product have the config ID.
    • tab: value Tab-Numberopen the tab menu numer (example: 4 is the number of Setting menu)
    • screens: value ScreenName open the screen have specific name (example: wishlist)

3. Banner Group Image

group

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

๐Ÿ—ณ Widget files: 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.
  • items: is the array of json image objects. Each image can be linked to list of products by category ID. The Banner Items detail setting:

    • image: the URL of the Images, it could be the asset local Image file.
    • padding: the spacing padding, value should be double values.
    • category: config this Category ID to open the banner to category product list.
    • product: value Product-ID open the product have the config ID.
    • tab: value Tab-Numberopen the tab menu numer (example: 4 is the number of Setting menu)
    • screens: value ScreenName open the screen have specific name (example: wishlist)

4. Category List Icons

category

{
      "layout": "category",
      "type": "icon",
      "wrap": false,
      "size": 1.0,
      "radius": 50.0,
      "items": [
        {
          "category": 18,
          "image": "https://user-images.githubusercontent.com/1459805/62820029-2e679f00-bb88-11e9-80de-fdf115cfd942.png",
          "name": "Men",
          "colors": [
            "#3CC2BF",
            "#3CC2BF"
          ],
          "originalColor": false
        },
        {
          "category": 24,
          "image": "assets/icons/categories/ic_dress.png",
          "name": "Bags",
          "colors": [
            "#3E6AB5",
            "#3E6AB5"
          ]
        },
 }

๐Ÿ—ณ File path:

  • lib/widgets/home/category/category_icon_items.dart
  • lib/widgets/home/category/category_image_items.dart

๐Ÿ“– Usage:

  • layout: the value should be "category"
  • type: support the value โ€œiconโ€ or โ€œimageโ€ type.
  • wrap: value true/false to support the wrap layout.
  • size: the default value 1.0, increase the value to have larger icons size.
  • radius: the default 50.0, update the border radius
  • items: list of category Category Items

    • category: use to open the product list by category ID
    • image: link to category Image or Asset local file
    • name: set the default Category Name, otherwise it will load the name from category ID.
    • colors: override the Color of the Icons.
    • originalColor: enable this value to true if want to set orginial color.

5. Product Listing

card

{
      "name": "Woman Collection",
      "layout": "threeColumn",
      "category": 27,
  	  "tag": 20,
  		"feature": true
  		"onSale": true
},

๐Ÿ“– 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.
  • tag: the tag of your website (for WooCommerce only)
  • feature: show only Feature product (for WooCommerce only)
  • onSale: on the Sale Off products (for WooCommerce only)

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

6. Instagram items

instagram

	{
      "name": "Share your look",
      "layout": "instagram",
      "tag": "fashionmodel"
    }

๐Ÿ—ณ 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.

7. Metro Layout (staggered list)

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

๐Ÿ“– Usage: Support to show product list metro layout

  • layout: the layout shoule be staggered
  • limit: limit number of products
  • category: load the list of product by category ID

8. 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
    }
  ]
},

๐Ÿ“– Usage: Support to show product as Tinder Layout, the values is simlar with the Product List config.

9. 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. Dark Theme Setting

img

New release 1.2 also supports Dark 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 buildDarkTheme functions.

img

To config the default theme is Dark theme: Navigate to lib/app.dart and lib/models/app.dart then change these values from false to true.

image-20200508140704585

image-20200508140704585


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

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

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

9. Update Screen Animation Loading

To change the loading animation (Loading indicator gif) between screens, open the lib/common/constants/loading.dart file and change the below value:

Widget kLoadingWidget(context) => Center(
    child: SpinKitFadingCube(
      color: Theme.of(context).primaryColor,
      size: 30.0,
    ),
  );

Reference more detail library config https://pub.dev/packages/flutter_spinkit