support.inspireui.

com

Common Basic Features - InspireUI

Support
31-40 minutes

This guide explains the way to configure the basic config and all
common features (also the UI that is not available on FluxBuilder
tool), such as Product Detail screen, Upload file on product,
Settings screen (Page view, Web view), Logo, Splash screen,
Onboarding (welcome screen), Login mode, Deep Link, price
Filters, Loading Animation screen, Drawer Layout (Left menu), etc.

1. Product Detail screen

1. Dynamic Product Variant

Open /lib/env.dart file, then customize the product variant

values or order the display position. (For version 1.9.x and earlier,
refer to /lib/common/config/products.dart; for version 1.6.4 and
earlier, refer to lib/common/config.dart).

"productVariantLayout": {
"color": "color",
"size": "box",
"height": "option",
"color-image": "image"
},

key: should be matched with the variant slug name.

value: support 3 types of layout color, box, option, and image

(image is for apps from version 1.8.2 onwards).

To use image, please install Variation Swatches for WooCommerce

plugin. Then add your attributes from WP admin > Products >
Attributes. When adding attribute options, (*) copy the image link
and paste it to the description as below:

(*) This is required

due to limitations from the plugin.
Support multi-language for product attribute, edit the following
setting:

"productVariantLanguage": {
 "en": {
"color": "Color",
"size": "Size",
"height": "Height",
"color-image": "Color"
},
"ar": {
"color": "‫"ﺍﻟﻠﻮﻥ‬,
"size": "‫"ﺑﺤﺠﻢ‬,
"height": "‫"ﺍﺭﺗﻔﺎﻉ‬,
"color-image": "‫"ﺍﻟﻠﻮﻥ‬
},
"vi": {
"color": "Màu",
"size": "Kích thước",
"height": "Chiều Cao",
"color-image": "Màu"
}
},

There was feedback from one of our customers to adjust the

product detail design screen as he reports the default detail screen
just matches with the Fashion UI. The team has made some more
flexible product details upgraded by below config:

"productDetail": {
"height": 0.4,
"marginTop": 0,
...
},

height the percentage height of the featured product images.

marginTop the top margin with the top edge. This setting is to
prevent cutting without using SafeArea widget.

2. Product Advance Options

Open lib/env.dart file, then customize the product variant

values or order the display position. (For version 1.9.x and earlier,
refer to lib/common/config/general.dart; for version 1.6.4 and
earlier, refer to lib/common/config.dart).

"advanceConfig": {
"DefaultLanguage": "en",
"DetailedBlogLayout": "halfSizeImageType",
"EnablePointReward": true,
"hideOutOfStock": false,
"EnableRating": true,
"hideEmptyProductListRating": true,
"EnableShipping": true,

/// Enable search by SKU in search screen

"EnableSkuSearch": true,
 /// Show stock Status on product List &
Product Detail
"showStockStatus": true,

/// Gird count setting on Category screen

"GridCount": 3,

/// set isCaching to true if you have upload

the config file to mstore-api
/// set kIsResizeImage to true if you have
finished running Re-generate image plugin
/// ref: https://support.inspireui.com/help-
center/articles/3/8/19/app-performance
"isCaching": false,
"kIsResizeImage": false,

/// Stripe payment only: set currencyCode and

smallestUnitRate.
/// All API requests expect amounts to be
provided in a currency’s smallest unit.
/// For example, to charge 10 USD, provide an
amount value of 1000 (i.e., 1000 cents).
/// Reference: https://stripe.com
/docs/currencies#zero-decimal
"DefaultCurrency": {
"symbol": "\$",
"decimalDigits": 2,
"symbolBeforeTheNumber": true,
"currency": "USD",
"currencyCode": "usd",
"smallestUnitRate": 100, // 100 cents = 1
usd
},
"Currencies": [
{
"symbol": "\$",
"decimalDigits": 2,
"symbolBeforeTheNumber": true,
"currency": "USD",
"currencyCode": "usd",
"smallestUnitRate": 100, // 100 cents = 1
usd
},
{
"symbol": "đ",
"decimalDigits": 2,
"symbolBeforeTheNumber": false,
"currency": "VND",
"currencyCode": "VND",
},
{
 "symbol": "€",
"decimalDigits": 2,
"symbolBeforeTheNumber": true,
"currency": "EUR",
"currencyCode": "EUR",
},
{
"symbol": "£",
"decimalDigits": 2,
"symbolBeforeTheNumber": true,
"currency": "Pound sterling",
"currencyCode": "gbp",
"smallestUnitRate": 100, // 100 pennies =
1 pound
},
{
'symbol': 'AR\$',
'decimalDigits': 2,
'symbolBeforeTheNumber': true,
'currency': 'ARS',
'currencyCode': 'ARS',
}
],

/// Below config is used for Magento store

"DefaultStoreViewCode": "",
"EnableAttributesConfigurableProduct":
["color", "size"],
"EnableAttributesLabelConfigurableProduct":
["color", "size"],

/// if the woo commerce website supports multi

languages
/// set false if the website only have one
language
"isMultiLanguages": true,

///Review gets approved automatically on

woocommerce admin without requiring administrator
to approve.
"EnableApprovedReview": false,

/// Sync Cart from website and mobile

"EnableSyncCartFromWebsite": false,
"EnableSyncCartToWebsite": false,

/// Disable shopping Cart due to Listing Users

request
"EnableShoppingCart": false,

/// Enable firebase to support FCM, realtime

chat for Fluxstore MV
"EnableFirebase": true,

/// ratio Product Image, default value is 1.2

= height / width
"RatioProductImage": 1.2,

/// Enable Coupon Code When checkout

"EnableCouponCode": true,

/// Enable to Show Coupon list.

"ShowCouponList": true,

/// Enable this will show all coupons in

Coupon list.
/// Disable will show only coupons which is
restricted to the current user"s email.
"ShowAllCoupons": true,

/// Show expired coupons in Coupon list.

"ShowExpiredCoupons": true,
"AlwaysShowTabBar": false,

/// Privacy Policies page ID. Accessible in

the app via Settings > Privacy menu.
"PrivacyPoliciesPageId": 25569,

/// The radius to get vendors in map view for

Fluxstore MV
"QueryRadiusDistance": 10 //km
},

DefaultLanguage: the default language for the app.

DetailedBlogLayout: to config the detailed layout of Blog. Change

the kBlogLayout config to one of following enums: { simpleType,
fullSizeImageType, halfSizeImageType, oneQuarterImageType }.
Refer to https://support.inspireui.com/help-center/articles/3/8/11
/customize-layout#3-blog-detail-layout for more detail.

EnablePointReward: enable the Point and Reward Plugin, the

feature will be displayed from the Setting screen, after logging into
the app and purchasing the product, you can see the collection
point, this is a good feature to custom for reward app.

hideOutOfStock: hide the Out Of Stock feature from Product

Detail.

EnableRating: enable the Rating feature for Product detail.

isCaching: this configuration helps Caching to improve App

Performance. If the isCaching is false, it will load as the local
config. Refer to https://support.inspireui.com/help-center/articles
/3/8/19/app-performance#1-caching-to-improve-app-performance
for more details.
DefaultStoreViewCode: this is only used for Magento.

EnableAttributesConfigurableProduct: this is only used for

Magento, enable to activate the Configurable Product type.

EnableAttributesLabelConfigurableProduct: this is only used for

Magento, enable to activate the Configurable Product type.

DefaultCurrency: default currency format.

Currencies: this is for the Currency Switcher feature. This feature

is only available for the WooCommerce version, below is the
required condition to activate this feature:

Update the mstore-api to the latest version v1.5.4.

Add new setting from Manage Currencies from WPML plugin:

The new release also supports the Affiliate Product Type when
you configure values from the WooCommerce site.

Open lib/env.dart and config productDetail as below: (For

version 1.9.x and earlier, refer to /lib/common/config/products.dart)

// TODO: 2-Update Product Detail Layouts

/// use to config the product image height for the
product detail
/// height=(percent * width-screen)
"productDetail": {
"height": 0.4,
"marginTop": 0,
"safeArea": false,
"showVideo": true,
"showBrand": true,
"showThumbnailAtLeast": 1,
"layout": "simpleType",
"borderRadius": 3.0,

/// Enable this to show review in product

description.
"enableReview": false,
"attributeImagesSize": 50.0,
"showSku": true,
"showStockQuantity": true,
"showProductCategories": true,
"showProductTags": true,
"hideInvalidAttributes": false
},

height: the percentage height of the featured product images.

height=(percent * width-screen).

marginTop: the top margin with the top edge. This setting is to
prevent cutting without using SafeArea widget.

safeArea: add new extra space on the top when viewing product
detail.

showVideo: support to enable the show Video feature. Support

only for WooCommerce by installing one of the following video
plugins:

WooFeature Video: https://wordpress.org/plugins/woo-featured-

video/

Yith Feature Video: https://wordpress.org/plugins/yith-

woocommerce-featured-video/

showThumbnailAtLeast: only display the product detail gallery if

more than the at least value. For example, if we set the value to 2,
it only displays the image gallery when more than 3 images.

layout: change to one of enum value { simpleType,

fullSizeImageType, halfSizeImageType } - this is a great feature if
you would like to change the Product Detail Screen to another
Layout Design.

3. Product Image Options

This feature is currently compatible with WooCommerce (single and

muli-Vendor). It is compatible with free WooCommerce Variation
Swatches plugins.
4. Inline Video

This feature is currently compatible with WooCommerce (single and

muli-Vendor).

Current FluxStore is compatible with the following video plugins:

WooCommerce Featured Video

YITH WooCommerce Featured Video

To integrate with other plugins you could customize the product

Entity — lib/models/entities/product.dart:

2. Settings screen

1. About Us

To change URL of About Us item in the Settings screen, from

version 1.9.2 onwards: Open lib/common/constants
/general.dart and change "aboutUsUrl" as below:

class SettingConstants {
static const aboutUsUrl = "https://inspireui.com
/about"; // replace your url here
}
To change title of About Us, open lib/screens/settings
/settings.dart file to change About us URL as below: (for
version 1.6.4 and earlier, refer to lib/screens/settings.dart).

case 'about':
{
icon = CupertinoIcons.info;
title = "About Us"; //replace your
title here
trailing =
const Icon(Icons.arrow_forward_ios,
size: 18, color: kGrey600);
onTap = () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => WebView(
url: "https://inspireui.com
/about", //replace your url here
title: "About Us"), //replace
your title here
));
break;
}

2. App Rating

Open lib/screens/settings/settings.dart file to change

the time for rating your app. (for version 1.6.4 and earlier, refer to
lib/screens/settings.dart).

final RateMyApp _rateMyApp = RateMyApp(

// rate app on store
minDays: 7,
minLaunches: 10,
remindDays: 7,
remindLaunches: 10,
googlePlayIdentifier:
kStoreIdentifier['android'],
appStoreIdentifier:
kStoreIdentifier['ios']);

Open lib/env.dart file to change your value (For version 1.9.x

and earlier, refer to lib/common/config/general.dart):

/// Use for Rating app on store feature

/// make sure to replace the bundle ID by your own
ID to prevent the app review reject
"storeIdentifier": {
"disable": true,
"android": "com.inspireui.fluxstore",
"ios": "1469772800"
},

3. Page View
Page view is used to display a static page faster than using
WebView. For those who want to customize a page view, at this
moment, please follow the instructions below.

To add/delete/change a pageview widget on your Settings screen,

open lib/env.dart, add/delete the value: (For version 1.9.x and
earlier, refer to lib/common/config/general.dart, in kDefaultSettings)

// TODO: 3.Update The Setting Screens Menu

/// you could order the position to change menu
/// this feature could be done via Fluxbuilder
"defaultSettings": [
"products",
"chat",
"wishlist",
"notifications",
"language",
"currencies",
"darkTheme",
"order",
"point",
 "rating",
"privacy",
"about"
],

In order to set your pageID into PageView widget, please set as

below located at your /lib/env.dart.

/// Privacy Policies page ID. Accessible in the

app via Settings > Privacy menu.
"PrivacyPoliciesPageId": 25569,

4. Web View

In spite of the fact that a Web View widget takes more time to load
compared to a Page View, Web View sometimes it could be
taken into consideration due to its flexibility and adaptability. In
order to add a WebView inside your app, please follow the guide
below.
To add/delete/change a webview widget on your Settings screen,
open lib/env.dart, add/delete the value: (For version 1.9.x and
earlier, refer to lib/common/config/general.dart, in defaultSettings)

// TODO: 3.Update The Setting Screens Menu

/// you could order the position to change menu
/// this feature could be done via Fluxbuilder
"defaultSettings": [
"products",
"chat",
"wishlist",
"notifications",
"language",
"currencies",
"darkTheme",
"order",
"point",
"rating",
"privacy",
"about"
],

Open /lib/screens/settings/settings.dart, inside

renderItem, add/delete/change the below code in your desired
position:

case value: //replace your value here, eg.

'about'
{
 icon = CupertinoIcons.info;
title = S.of(context).webView;
//replace your title here
trailing =
const Icon(Icons.arrow_forward_ios,
size: 18, color: kGrey600);
onTap = () {
if (kIsWeb) {
return
Tools.launchURL(SettingConstants.aboutUsUrl);
}
return FluxNavigate.push(
MaterialPageRoute(
builder: (context) => WebView(
url: "https://inspireui.com",
//replace your url here
title: S.of(context).webView),
//replace your title here
),
forceRootNavigator: true,
);
};
break;
}

Example: Change the About Us on the Settings screen to FAQ

with URL https://inspireui.com/faq as below:

case 'about':
{
icon = CupertinoIcons.info;
title = "FAQ"; //replace your title
here
trailing =
const Icon(Icons.arrow_forward_ios,
size: 18, color: kGrey600);
onTap = () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => WebView(
url: "https://inspireui.com
/faq", //replace your url here
title: "FAQ"), //replace your
title here
));
break;
}

By default, the URL of WebView will be

SettingConstants.aboutUsUrl which has been mentioned in
Settings Screen > About us documents.

5. Dark Theme Setting

New release 1.2 also supports Dark theme setting, thanks to Flutter
for bringing the best-theming built-in. To change the background or
customize your own colors, just simply go to the lib/common
/theme/ folder.

Open dark_theme.dart file and change buildDarkTheme

function.

Open light_theme.dart file and change buildLightTheme

function.

ThemeData buildDarkTheme(String language) {

final ThemeData base = ThemeData.dark();
return base.copyWith(
textTheme: buildTextTheme(base.textTheme,
language).apply(
displayColor: kLightBG,
bodyColor: kLightBG,
),
primaryTextTheme:
buildTextTheme(base.primaryTextTheme,
language).apply(
displayColor: kLightBG,
bodyColor: kLightBG,
),
accentTextTheme:
buildTextTheme(base.accentTextTheme,
language).apply(
displayColor: kLightBG,
bodyColor: kLightBG,
),
canvasColor: kDarkBG,
cardColor: kDarkBgLight,
...
}

To config the default theme is Dark theme, change these values

from false to true:

Navigate to lib/app.dart:
/// Build the App Theme
ThemeData getTheme(context) {
printLog("[AppState] build Theme");

var appModel = Provider.of(context);

var isDarkTheme = appModel.darkTheme ?? false;
///change to true

Navigate to lib/env.dart (From version 1.9.x and earlier, refer

to lib/common/config/general.dart):
/// update default dark theme
/// advance color theme could be changed from
common/styles.dart
"defaultDarkTheme": false,
6. Background image

This part guides to change the background image behind the

Settings screen (profile section).

Open lib/common/constants/images.dart and update

kProfileBackground as below:

const kProfileBackground =
"https://images.unsplash.com/photo-
1494253109108-2e30c049369b?ixlib=rb-1.2.1&
auto=format&fit=crop&w=3150&q=80";

3. Logo and Splash screen

This part guides to change the Splash screen and change logo
from other screens as Login screen, Left menu. To change the
Logo from Homepage, please refer to Customize UI Layout on
the left menu, then choose 1. Logo Item.

Open lib/common/constants/images.dart as below: (for

version 1.6.4 and earlier, open lib/common/constants.dart )

To map your new image logo and icon file, update kLogoImage.

To change Splash screen, update kSplashScreen.

const kLogoImage = 'assets/images/logo.png';

const kSplashScreen = "assets/images
/splashscreen.flr";

Set kSplashScreenType to one of these options: (it is available

from version 1.7.7 onwards)

// For flare splash screen:

const kSplashScreenType = "flare";

// For image splash screen:

const kSplashScreenType = "animated";
// or
const kSplashScreenType = "zoomIn";
// or
const kSplashScreenType = "static";

To use Rive 2, please use this config: (it is available from version
1.9.2 onwards)

/// This file is use for rive.app/ version 2

const kSplashScreen = "assets/images
/splashscreen.riv";

/// Have to set the animation name if you are

using RIVE 2.
const kAnimationName = 'fluxstore';

const kSplashScreenType = 'rive';

� Coding Guide: to change the flare animate file, go to

https://2dimensions.com and create your own splash screen by
providing an example file from the download package. It's possible
to update the splash screen as the static image files (PNG, JPG,
and GIF) as well.

const kSplashScreen = "assets/images

/splashscreen.png";

// or
const kSplashScreen = "assets/images
/splashscreen.gif";

The kSplashScreen also supports the static images (PNG, JPG) or

GIF. If you would like to replace the Flare animate, change the URL
to a static file, example: const kSplashScreen: "assets/images
/load.gif'

Please make sure the startAnimaiton from the app is the same on
your Flare Dashboard, otherwise, the animation will not work.

4. Onboarding and Login mode

To customize the onboarding content (welcome screen), open

lib/env.dart file, update onBoardingData. (For version 1.9.x
and earlier, refer to lib/common/config/onboarding.dart; for version
1.6.5 and earlier, refer to lib/common/config.dart).

/// the welcome screen data

/// set onBoardingData = [] if you would like to
hide the onboarding
"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 strictly check user login before using
the app by enabling IsRequiredLogin is true. Refer to
lib/env.dart (For version 1.9.x and earlier, refer to lib/common
/config/general.dart, in kLoginSetting):

"loginSetting": {
...
"IsRequiredLogin": true,
...
},

5. DeepLink

If you are using Stripe payment, deep link is required for Stripe 3D
Secure transaction to work.

To configure deep link, you can choose either Android App Links
& iOS Universal Links (recommended, requires to upload two files
to your host) or Android Deep Links & iOS Custom URL
schemas. Follow this documentation for more details.

We will guide you step-by-step to config deep link using App Links
(Android) & Universal Links (iOS):

Step 1. Prepare two files: assetlinks.json and apple-app-

site-association

Create a file named assetlinks.json and paste the content

below:

Replace com.inspireui.fluxstore with your own package

name.

Replace a0:d4:a1...... with your own SHA256 certificate

fingerprint.

[
{
"relation": [

"delegate_permission/common.handle_all_urls"
],
 "target": {
"namespace": "android_app",
"package_name":
"com.inspireui.fluxstore",
"sha256_cert_fingerprints": [

"a0:d4:a1:e4:08:46:1b:a3:2f:86:9d:90:04:b7:81:78:d6:54:f2:16:99:24:11:e4:d8:3d:18:96
]
}
}
]

Create a file named apple-app-site-association and paste

the content below:

Replace com.inspireui.fluxstore with your own package

name.

Replace ABCDEFGH with your Apple developer account Team ID,

which can be found at https://developer.apple.com/account
/#/membership

{
"applinks": {
"apps": [],
"details": [
{
"appID":
"ABCDEFGH.com.inspireui.fluxstore",
"paths": [ "*" ]
}
]
}
}

Step 2: Upload assetlinks.json and apple-app-site-association

to your website

Upload assetlinks.json to https://yourwebsite.com/.well-

known/assetlinks.json

Upload apple-app-site-association to
https://yourwebsite.com/.well-known/apple-app-site-
association

Make sure your files are accessible like this: https://medium.com

/.well-known/assetlinks.json or https://medium.com/.well-
known/apple-app-site-association

Step 3: Update AndroidManifest.xml for Android App Links

Find this below code in your android/app/src/main

/AndroidManifest.xml

<data
android:scheme="https"
android:host="inspireui.com" /> ///replace
with your website
Replace inspireui.com with your website.

Step 4: Update Runner.entitlements for iOS Universal Links:

Find this code in your ios/Runner/Runner.entitlements

<key>com.apple.developer.associated-
domains</key>
<array>

<string>applinks:inspireui.com</string>
///replace with your website

<string>applinks:fluxstoreinspireui.page.link.
</string>
</array>

Replace inspireui.com with your website.

That's it. If you are using native Stripe payment, your returnUrl
should be like https://yourwebsite.com.

Test (for DeepLink/Custom URL schemas):

Open the Simulator and test the Deep link on your terminal.

To test App Links/Universal Links, just replace

fluxstore://inspireui.com with
https://yourdomain.com

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

6. Price Filter

In the Filters, you can change the price filter. Currently, the lowest
price filter is 0-100. To change this price, refer to lib/common
/constants/slider.dart:

/// Filter value

const kSliderActiveColor = 0xFF2c3e50;
const kSliderInactiveColor = 0x992c3e50;
const kMaxPriceFilter = 1000.0;
const kFilterDivision = 10;

7. Loading Animation

To change the loading animation (Loading indicator gif) between

screens, open the lib/env.dart file and change the below value:
"loadingIcon": {"size": 30.0, "type":
"fadingCube"}

For version 1.9.x and earlier, change in lib/common/constants

/loading.dart file:

Widget kLoadingWidget(context) => Center(

child: SpinKitFadingCube(
color: Theme.of(context).primaryColor,
size: 30.0,
),
);

Reference more detailed library config https://pub.dev/packages

/flutter_spinkit

The 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 disable/hide an option on the left menu, go to lib/env.dart

and set to false:
"defaultDrawer": {
"items": [
{"type": "home", "show": true},
{"type": "blog", "show": true},
{"type": "categories", "show": true},
{"type": "cart", "show": true},
{"type": "profile", "show": true},
{"type": "login", "show": true},
{"type": "category", "show": true}
]
},

To change the icon of Left menu, go to lib/widgets

/home/logo.dart and change this information https://tppr.me
/zPDcz

To change the left menu side content, go to lib/menu.dart

Widget drawerItem(item) {
// final isTablet =
Tools.isTablet(MediaQuery.of(context));

if (item['show'] == false) return const

SizedBox();
switch (item['type']) {
case 'home':
{
if (Config().isListingType()) {
return Container();
 }
return ListTile(
leading: const Icon(
Icons.shopping_basket,
size: 20,
),
title: Text(S.of(context).shop),
onTap: () {
pushNavigation(RouteList.home);
},
);
}
case 'categories':
{
return ListTile(
leading: const Icon(Icons.category,
size: 20),
title: Text(S.of(context).categories),
onTap: () => pushNavigation(
Provider.of(context, listen:
false).vendorType ==
VendorType.single
? RouteList.category
: RouteList.vendorCategory),
);
}
case 'cart':
{
if (Config().isListingType()) {
return Container();
}
return ListTile(
leading: const
Icon(Icons.shopping_cart, size: 20),
title: Text(S.of(context).cart),
onTap: () =>
pushNavigation(RouteList.cart),
);
}
case 'profile':
{
return ListTile(
leading: const Icon(Icons.person,
size: 20),
title: Text(S.of(context).settings),
onTap: () =>
pushNavigation(RouteList.profile),
);
}
case 'web':
{
 return kIsWeb ||
isDisplayDesktop(context)
? Column(
children: [
ListTile(
leading: const Icon(
Icons.list,
size: 20,
),
title:
Text(S.of(context).category),
onTap: () {

pushNavigation(RouteList.category);
},
),
ListTile(
leading: const Icon(
Icons.search,
size: 20,
),
title:
Text(S.of(context).search),
onTap: () {},
),
ListTile(
leading: const
Icon(Icons.settings, size: 20),
title:
Text(S.of(context).settings),
onTap: () {
if (kIsWeb) {
} else {

Navigator.of(context).pushNamed(RouteList.profile);
}
},
)
],
)
: const SizedBox();
}
case 'blog':
{
return ListTile(
leading: const
Icon(FontAwesomeIcons.wordpress, size: 20),
title: Text(S.of(context).blog),
onTap: () =>
pushNavigation(RouteList.blogs),
);
 }
case 'login':
{
return ListenableProvider.value(
value: Provider.of(context, listen:
false),
child: Consumer(builder: (context,
userModel, _) {
final loggedIn = userModel.loggedIn;
return ListTile(
leading: const
Icon(Icons.exit_to_app, size: 20),
title: loggedIn
? Text(S.of(context).logout)
: Text(S.of(context).login),
onTap: () {
if (loggedIn) {
Provider.of(context, listen:
false).logout();
if
(kLoginSetting['IsRequiredLogin'] ?? false) {

Navigator.of(context).pushNamedAndRemoveUntil(
RouteList.login,
(route) => false,
);
} else {

pushNavigation(RouteList.dashboard);
}
} else {

pushNavigation(RouteList.login);
}
},
);
}),
);
}
case 'category':
{
return buildListCategory();
}
default:
return Container();
}
}

Example: To change the title "Blog" to "News", you need to change

title: Text(S.of(context).blog), to title:
Text('News'),
Version 1.6.x and earlier, to add a new menu item, go to
lib/tabbar.dart as below:

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(),
),
],
),
)
],
 ),
),
),

9. Google Analytics

FluxStore is already integrated with the Firebase Analytic, please

help to check this guide - https://firebase.flutter.dev/docs/analytics
/overview