Flutter Food Delivery E-commerce App | Documentation

First take a look at the app architecture

Architecture

Nested JSON

In our app we have used a lot of models. Models are build based on json info. JSONs in dart are very close dart Map .

We built our product model based on the above diagram. 

Basics of A Shopping App

From the above picture we understand how a shopping cart is built and how it works with product controllers. UI will have the instance of a product controller and product controller will have an instance of a cart controllers and cart controller will have an instance of local storage(SharedPreferences)

Cart History

Post reqeust

Flutter post request sign up form for e-commerce app. Here we do all the necessary steps for complete request and validation.

Install admin panel windows

Install admin panel on Mac

Setup paypal for e-commerce app

Integrate paypal for e-commerce app

Integrate Google Map for e-commerce app

Errors and Solutions

1. If you get parseError errors like below

laravel – ParseError: syntax error, unexpected ‘Parser’ (T_STRING), expecting function (T_FUNCTION) or const (T_CONST)

You may need to downgrade your jwt dependency. Laravel passport depends on jwt authentication.

in my case I did like below and it solved the problem

        "laravel/framework": "^8.65",
        "laravel/passport": "^10.2",
        "lcobucci/jwt": "^3.3.3",
        "laravel/sanctum": "^2.11",
        "laravel/tinker": "^2.5"

2. If you get access client  errors like below

RuntimeException: Personal access client not found. Please create one. in file /Users/ahmeddastagir/Documents/Laravel/shopping-app/vendor/laravel/passport/src/ClientRepository.php on line 122

Then you should run the below command

php artisan passport:install

3. Android phone does not load products

If on android phones you can't load the api, then try to set this in your android/app/src/main/AndroidManifest.xml file inside application, set this

 <uses-permission android:name="android.permission.INTERNET" />

And also set

  android:usesCleartextTraffic="true"

If you are localhost try to use http://10.0.2.2:8000 for android emulator. Instead of using https use http.

for more infomation on the setting of androidmanifest.xml go the link below, and try solution 1, 2 or 4

https://learnflutter.co/flutter-webview-doesnt-load-or-white-blank-page-ios-and-android/

iOS, you need to use http://127.0.0.0:8000 for localhost

Android: http://10.0.2.2:800 for localhost

iOS server side https://yourdomain.com

Android server side http://yourdomain.com

4. Connection was closed before the full header was received

Solution 1

This issue mainly occurs with Android Q. if you are using an emulator then downgrade the android version to Android Pie. Also, You can Try Below Solution.

1. First turning off your WiFi/Bluetooth.
2. And run below command:
3. flutter clean
4. And then quitting or restarting your emulator.

Solution 2

run the below command 

flutter clean

5. lateInitialization: Field '_userModel@'

Now this happens due the userModel is not being initialized before we used it add_address_page.dart. This happens first time when user downloads and register in a device.

We need to make changes in several places.

First find user_controller.dart

See for UserModel we are changing from late to ?(which means it could be nullable). So remove previously use late keyword and use ?.

Since we made changes in for UserModel initialization we also need to make changes in several other places.

Second find add_address_page.dart

See on line 69 and 70 we are changing the properties to nullable using question mark. Previously it was not nullable.

Third find account_page.dart

Here we need to make changes in three places. These places are inside AccountWidget. Find bigText property and change to using ! (bang operator)

See how we used null operator right after userModel! (bang operator).

6. Null checker used on null value

If you get null checker used on null value for ApiClient Token value. Go to the link below and find solution under part 2

https://www.dbestech.com/tutorials/flutter-e-commerce-template

7. Unknown Location found

There are many resaons why this error happens.

→It could be that your API key is wrong. Make sure you have the right API key. If necessary create a new API key.

→The other reason could be you did not enable billing information. Go to the link and see if you set up billing info or not

https://console.cloud.google.com/apis/credentials

→You may also get the error due to wrong android set up in app\src\main\res\Androidmanifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="YOUR_PACAKAGE_NAME">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
   <application
        android:label="shopping_app"
       android:networkSecurityConfig="@xml/network_security_config"
       android:requestLegacyExternalStorage="true"
       android:usesCleartextTraffic="true"

       android:icon="@mipmap/ic_launcher">

        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <!-- Displays an Android View that continues showing the launch screen
                 Drawable until Flutter paints its first frame, then this splash
                 screen fades out. A splash screen is useful to avoid any visual
                 gap between the end of Android's launch screen and the painting of
                 Flutter's first frame. -->
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
       <meta-data android:name="com.google.android.geo.API_KEY"
           android:value="YOUR_KEY"/>
    </application>
</manifest>

See how we set up internet access and key. The positions of them also matters. 

→Could be that your emaulator doesn't have play store. Go ahead install emulator with play store. I found Nexus 5X API 31 works better for me.

→Could be really emulator problems. Try on a real device.

→If you are trying from my domain which is mvs.bslmeiyu.com, it won't work. You have to try your own domain.

8. Windows users app permssions for the backend

Windows users might need to give firewall permission. Watch the video here

9. Null checker problem with your CartController

You might get error for CartController. This happened because the CartController is not being injected in the dependency. Watch this below to solve it

Cart Controller not found

10. Unsupported SSL request

If you encounter this issue make sure in your .env file you set ADMIN_HTTPS=false. And then run the below command

1. php artisan cache:clear
2. php artisan config:clear
3. php artisan serve

11. Error getting the google api

keep getting "error getting the google api" although the status code is 200 but the response.body.status is "Request Denied" i have added a payment method to my account , how can I solve it?

solution: make a 3rd api code with no restrictions and put it in the server backend, and for the android users you may need to type this command after creating the SHA1 key with keytool command

More Errors and Solutions

More solutions are given on here

Installation and Backend Error for E-commerce

E-commerce Frontend Errors and Solutions