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: lib/widgets/blog/banner/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: lib/widgets/blog/blog_list.dart and lib/widgets/blog/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: lib/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: lib/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: lib/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 lib/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

7. Sign In Methods

There are 5 types of available sign in options at the moment including: Google, Apple, SMS, Facebook, Email. First of all, configure your app to Firebase in order to active those features by 2 steps:

  1. Using the Firebase Console, add an Android app to your project: Follow the assistant, download the generated google-services.json file, and place it inside android/app.

  2. Using the Firebase Console, add an iOS app to your project: Follow the assistant, download the generated GoogleService-Info.plist file, open ios/Runner.xcworkspace with Xcode, and within Xcode place the file inside ios/Runner.

Google Sign In

We have added this library google-sign-in library from pub.dev and upgrade new mstore-api plugin to support for this feature. You need to update Firebase setting to activate this feature from the app (also make sure update the google-service file to Fluxstore project).

  • In Firebase, enable Google:

FDK path

  • Next, scroll down and copy Authorized domain

FDK path

  • In Google Cloud Console, select your project (1). Then, select API& Service (2) and choose OAuth consent screen (3)

FDK path

  • Then, click on edit app.

FDK path

  • Paste Authorized domain on position (1),(2),(3) and click save.

FDK path

Apple Sign In

FDK path

This is a rejected message from Appstore by recent policies update from Apple:

“We noticed that your app uses a third-party login service but does not offer Sign in with Apple. To resolve this issue, please revise your app to offer Sign in with Apple as an equivalent login option. To learn more, see the Sign in with Appl Overview.”. To resolve the message, the login form should include the Apple Sign-In.

SMS Sign In

Integrate with the SMS Login:

Please follow this guide to integrate with the SMS Login.

More detailed document, refer to https://pub.dev/packages/firebase_auth

For android, Open project on firebase console. Then move to Settings/General. You need to upload SHA key to firebase project. You can follow this guide to generate SHA key https://developers.google.com/android/guides/client-auth

Packages_get

In case you meet this issue: after creating APK and releasing the app in App Stores, you get error when login with SMS Login. You need to go to the App stores and copy the SHA-1 key and past to your Firebase setting:

FDK path

FDK path

Change SMS default country:

Open lib/common/config.dart and change the default country:

const kAdvanceConfig = {
  "DefaultPhoneISOCode": "+84",
  "DefaultCountryISOCode": "VN",
};
  • DefaultPhoneISOCode: default country phone IOS Code when login as SMS Login feature.

  • DefaultCountryISOCode: default country IOS Code.

Facebook Sign In

This part shows the way to set up Facebook login on your Flutter application. This needs to use the flutter-facebook-login-package

AndroidX support

Install flutter-facebook-login package

  • Step 1: Add this command to dependencies in the pubspec.yaml file:
dependencies:
  flutter_facebook_login: ^3.0.0
  • Step 2: Run this command to install package:
$ flutter pub get
  • Step 3: Import it in your Dart code:
import 'package:flutter_facebook_login/flutter_facebook_login.dart';

Android

  • Step 1: In the Facebook Login documentation for Android site, finish all steps in 2 parts: the "Associate Your Package Name and Default Class with Your App" and "Provide the Development and Release Key Hashes for Your App".
  • Step 2: Find your Facebook App ID in your Facebook App's dashboard in the Facebook developer console.
  • Step 3: Create file /android/app/src/main/res/values/strings.xml. If this file exists, just edit the content same with below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Your App Name here.</string>

    <!-- Replace "000000000000" with your Facebook App ID here. -->
    <string name="facebook_app_id">000000000000</string>

    <!--
      Replace "000000000000" with your Facebook App ID here.
      **NOTE**: The scheme needs to start with `fb` and then your ID.
    -->
    <string name="fb_login_protocol_scheme">fb000000000000</string>
</resources>
  • Step 4: Edit the /android/app/src/main/AndroidManifest.xml with below content:
<meta-data android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"
    android:configChanges=
            "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />

<activity
    android:name="com.facebook.CustomTabActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
</activity>

iOS

  • Step 1: In the Facebook Login documentation for iOS site, finish all steps in "Register and Configure Your App with Facebook". (You can skip "Step 2: Set up Your Development Environment" and "Step 5: Connect Your App Delegate").
  • Step 2: Find your Facebook App ID in your Facebook App's dashboard in the Facebook developer console.
  • Step 3: Copy and paste the following content to your /ios/Runner/Info.plist file, before the ending </dict></plist> tags. If you also enable Google Sign In feature, you need to merge CFBundleURLTypes of Google Sign In and Facebook Sign In together.
<key>CFBundleURLTypes</key>
<array>
    <!--
    <dict>
    ... Some other CFBundleURLTypes definition.
    </dict>
    -->
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <!--
              Replace "000000000000" with your Facebook App ID here.
              **NOTE**: The scheme needs to start with `fb` and then your ID.
            -->
            <string>fb000000000000</string>
        </array>
    </dict>
</array>

<key>FacebookAppID</key>

<!-- Replace "000000000000" with your Facebook App ID here. -->
<string>000000000000</string>
<key>FacebookDisplayName</key>

<!-- Replace "YOUR_APP_NAME" with your Facebook App name. -->
<string>YOUR_APP_NAME</string>

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>