Flutter Food Delivery E-commerce App | Documentation

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.

    flutter post request sign up form

    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

    userModel 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

    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)

    account widget dart flutter

    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

    Courses


    Recent posts