Flutter Food Delivery App | Shopping | E-commerce for iOS and Android

Flutter Food Delivery App | Shopping | E-commerce for iOS and Android

    Flutter Food Delivery App | E-commerce for iOS and Android | Shopping App With Backend & Restful Api. It also includes delivery boy app.

    Part 1 Shopping App

    Part 2 Shopping App

    Part 3 Shopping App

    Part 4 Shopping App

    Part 5 Shopping App

    Part 6 Shopping App

    Part 7 Shopping App

    Part 8 Shopping App

    E-commerce or shopping app includes the features

    1. Home page (shows popuplar product and recommended products)
    2. Sign in and Sign up (sign up with mobile with verification code)
    3. Shopping cart (a real shopping cart with add and remove items on the fly)
    4. Local cart history page (using a local storage)
    5. Server cart history page (sync with database)
    6. Profile page (personal information)
    7. Popular food page (view popular food, add or remove items from the cart)
    8. Recommended food page (view recommended food, add or remove from the cart)
    9. Order more function(newly added feature, it helps you order)
    10. Go to sign in page (sign in page authentication before you place order)
    11. Address page (address with authentication before you place order)
    12. Google map page (for picking up location and save address)
    13. Search address (search address or location for google map and save in the database.
    14. Backend (backend to show user info and order detail)
    15. Creating new items (backend you can create new items of food)
    16. Paypal payment (Paypal payment sync with database)

    Once you know the architecture of this, you would be able to use it for any kind of e-commerce or shopping with backend. All you need to do is change the pictures and products' names.

    State management

    This e-commerce app is based on flutter Getx Package. We used Getx package to manage the state and routing of the app. We have also used Getx for api client. 

    Getx is a great package for managing your app states, routes and http client. It does more than that. If you are trying to build a complex mobile or web app using flutter, Getx would be your best choice. And it's also beginners friendly reactive state management app package.

    We used Getx for products display, maintaining the state of the shopping cart, profile page, google map and many other features of this e-commerce app or shopping app.

    Backend

    We have used Laravel for building the backend of this app. We used the same framework for building Restful Api for the app. Laravel is the most popular web application framework both for backend and api building. Backend shows users' orders, total orders, users' info, payment info etc.

     

    Unlock the code here 

    All the downloadable code is Flutter 3.4 version. I have also included installation guide so that you would be able to deploy locally and in Live server as well. Code level 1, code level 2 and commercial license includes different features. Most features are in commercial license. Here you should go and do complete customization of your app.

    Code level 1

    Patreon link for downloading the code personal license (code level 1)

    Buy me coffee link for downloading personal license (code level 1)

    Code leve 1 includes

    1. all the pages listed below with screenshot

    2. backend

    3. latest code flutter 3.4 version

    (Total sale : 318 life time)

    Setup for the downloaded code

    Code level 2

    Patreon link for downloading the code personal license (code level 2)

    Buy me coffee link for downloading the personal license (code level 2)

    Code level 2 includes code level 1 as well as more features like

    1. Google search address and save

    2. Updating profile (including uploading profile photo and change)

    3. Search products

    4. It includes internet connection checking as well

    5. latest code flutter 3.4 version

    (Total sale : 213 life time)

    Setup for the downloaded code

     

     Commercial Licence App Includes

    Patreon link for downloading the code commercial license

    Buy me coffee link for downloading the code commercial licence

    Commercial license includes everything and any future features.

    Additional features for commercial licence

    1. multiple lanugage support

    2. firebase notification

    3. local notification

    4. firebase notification from backend

    5. backend service zone set up

    6. backend business set up

    7. backend notification to delivery boy

    8. phone number verification during registration

    9. delivery boy app

    10. latest code flutter 3.4 version

    11. stripe payment

    (Total sale : 119 life time)

    Setup for the downloaded code

    Delivery boy app

     

    Facebook group

    Join our facebook group for discussions if you encouter any problems (recommended)

    Facebook page for discussing the problems you face

     

    Starter code here

    Youtube fans starter code

     

    See the installation at the bottom

    Backend code here

    E-commerce app flutter

    Install backend

    Install Backend

    E-commerce app documentation

    Errors and Solutions E-commerce app Flutter

     

    Android apk

    paypal: ab@dbestech.com pass: 12345678

    You may use the above paypal account for testing payment. It's a sandbox account. This apk does not contain all the features of commercial license.

     

    Home page

    Home page displays food category. You can click on it and go to new page to view food and add to the cart. 

    homepage

    Recommended food page

    This page comes from the home page and you can add the item to the cart. The introuduce text about food is collapsible. It also show the product price. And you can add items to the cart.

     

    Popular food page

    This page comes from the home page and you can add the item to the cart. The text about food is collapsible. It also show the product price. And you can add items to your shopping cart.

     

    Cart page

    In this page you place the order. You can also add or remove the items from the cart. As you add or remove you also see the total price changes. This page is dynamic since it removes and add items on user click.

    Sign up page

    Sign up using your credential. Once you sign up, the information is submitted to the database and a token for user is generated. This token is used for Authentication.

    The commercial license includes phone number verification. Food commercial license registration UI is bit different.

     

    Sign in page

    Sign in based on your email. The account information is matched on the backend using token and your credential. 

     

    Auth page

    If user makes unauthenticated request you, the app takes you to this page. Submitting order to the backend is always checked. Changing user credential is also checked using Authentication.

     

    History page

    You can see this information after you submit order to the backend. From here you will be able(still under development) to monitor your order tracking.

     

    Local history page

    Local history page. It saves in the device itself. You can reorder the item you ordered.

     

    Update address

    You can update your address here. During registration we don't need to put in the address. Address update during check out.

    address page e-commerce flutter

    Pick address

    User can pick your address here. This address is dynamic and based on Google map. Google map is a great tool for e-commerce site and delivery products or food.

    pick address page e-commerce

    Account page

    Your personal information is here. Here address could be updated.

    Payment method

    We are going to use paypal as a payment method. Soon we will add stripe and other major payment methods.

    payment method for e-commerce

    Paypal login page

    Paypal login page. Here we have used paypal web view sdk for loading paypal pages and gateway

    paypal login page

    Paypal payment confirm page

    Paypal payment confirm page. Here now we are in sandbox mode. Sandbox mode is used for testing.

    paypal payment confirm

    Payment success page

    After payment has been successful, we redirect to payment successful page. It comes from paypal sdk.

     

    Change log

    32. 2023-05-26 stripe payment included

    31. 2023-05-24 upgraded backend statistici about products and order and users

    30. 2023-05-17 upgraded better notification with delivery boy app

    29. 2023-05-17 update delivery boy app to flutter 3.11.0 sdk version

    28. 2023-03-18 cash on delivery payment udpated

    27. 2023-03-17 update keyboard hiding issues on the screen tap

    26. 2023-02-27 upgrade to flutter 3.4 version

    25. 2022-10-10 updated login and registration error message shown style

    24. 2022-09-30 Phone number verification

    23. 2022-08-11 Notification sound fix

    22. 2022-08-01 Notification icon fix

    21. 2022-07-20 Notification bug fix

    20. 2022-07-10 Delivery boy notification

    19. 2022-06-22 Business set up backend

    18. 2022-06-19 Delivery boy app

    17. 2022-06-18 From backend to Flutter app notification

    16. 2022-06-18 Added backend receive notification

    15. 2022-06-03 Added local notification

    14. 2022-05-25 Basic firebase notification included

    13. 2022-05-02 Added Search products

    12. 2022-05-02 Added Updating profile(including profile photo and changing photo)

    11. 2022-05-02 Added Google address bar

    10. 2022-04-21 Bug fix for userModel

    9. 2022-02-28 Paypal Payment Integration with flutter webview

    8. 2022-02-10 Bug fix on more order page and update backend for order

    7. 2022-02-08 Added new functions "more order" on history cart page

    6. 2022-02-07 Bug fix on cart history page

    5. 2022-02-03 Bug fix on the cart and adding quantity screen

    4. 2022-01-30 Pick up locactoin from google map and save in the database

    3. 2022-01-16 Bug fix on user profile

    2. 2022-01-12 Solved address page crash error and show google map

    1. 2022-01-10 first version(first part)

     

    Installation

    Flutter android studio windows installation

    PHP =>7.3 or above

    Laravel =>8.0

    Admin panel windows installation

    To install the admin panel in local host on windwos, follow the video below.

    The above video shows how to download the admin panel for e-commerce app and install it in a local windows machine. The admin panel is based on Laravel framework. The admin panel requires prior installation knowledge of laravel framework on local machine.

    But if you have never installed laravel framework, watch the video from the link below. 

    Laravel Windows Installation

    Admin panel mac installation

    To install the admin panel in local host on mac, follow the video below.

    The above video shows how to download the admin panel for e-commerce app and install it in a local mac machine. The admin panel is based on Laravel framework. The admin panel requires prior installation knowledge of laravel framework on local machine mac.

    But if you have not installed Laravel Framework on mac watch video in the link below

    Laravel Mac Installation

    Flutter sdk: ">=2.12.0 <3.0.0"

    The backend is done with Laravel. Download the code from the patreon and install in your local or server.  The mysql database is included there. After installing you will see the backend. Type in your domain with /admin. The defualt password is admin and password is admin too.

    Make sure you give permission to /storage folder. In general it's 775. If it doesn't work then try 777. 

    Change the base url in your flutter app. Use your own domain

     

    Google Map Api Key

    Make user that, you enable google map service from google. If you don't know how to do it, follow the tutorial here. After enabling you need to use your own api key in the app

    When you set up Api key, you need to set up in two pairs 

    First pair

    It's android users. If you use android then you need to set up google api key both for android and it's web version.

    Second pair

    It's for iOS users. If you use iOS then you need to set up google api key both for iOS and web version. But this web version api key should be the same as android web version.

    So you need three google api key, one for ios, one for android and one for web api.

    One of the errors you might get

    API keys with referer restrictions cannot be used with this API.

    This means you have set up wrong api key.

    Error getting the google api

    Watch the video to verify your local testing with google map

    About the backend technology used in the app

    Ecommerce app errors and solutions with given code

    Website & Backend Issues

    1. Uploading image for food product

    If you are trying to upload images from the backend, you need to make changes in .env file.

    In the .env file make a little change in the APP_URL. 

    APP_URL=http://127.0.0.1:8000/

    You see how we put the slash at the end.

    2. Creating a table for zoned base service

    Part 4 requires you to create a new table name zones for zone based services. Follow the video to create a table.

    You also need to have model name Zone.php in the app/Models/ folder. And put the code in the file from the link below

    zone service model

    Use PhpMyAdmin to make the database table zones

    3. Shared host installation probelm and solution

    If you hosting it in shared host, after visiting in the brower, you might get like this

    This means, your site in shared hosting setting problems and website is not able point to the public folder of Laravel. 

    To solve this create .htaccess file in the root folder of your project and put the code in .htaccess file

     RewriteEngine On
      RewriteRule ^(.*)$ public/$1 [L]

    Learn more about it here htaccess file

    If the above solution did not work, then tryin the .htaccess. file

    <IfModule mod_rewrite.c>
        Options +FollowSymLinks
        RewriteEngine on
        RewriteCond %{REQUEST_URI} !^public
        RewriteRule ^(.*)$ public/$1 [L]
    </IfModule>

    4. Ecommerce payment

    Our e-commerce or shopping app does payment. We implemented payment using paypal sdk using webview. Part of the code is given here in the link below

    Flutter payment with paypal

    5. Ecommerce payment issue for payment view

    Payment requires special settings in the payment view page. We need to read this from the backend database. 

    Follow the link below and put the code according to the link

    payment laravel

    Otherwise you will get error

    6. The below error may happen first time during registration and login

    LogicException: Unable to read key from file file://C:\xampp\htdocs\shopping-app\storage\oauth-private.key in file C:\xampp\htdocs\shopping-app\vendor\league\oauth2-server\src\CryptKey.php

    To solve it you need to run the below command

    php artisan passport:install

    7. You may have error in the payment section when you access user information in the backend code. The error could be like below

    To solve this make some changes in the PayPalPaymentController.php file 

       $number = sprintf("%0.2f", $order['order_amount']); 
         
            $item->setName(session('f_name'))
                ->setCurrency(Helpers::currency_code())
                ->setQuantity(1)
                ->setPrice($number);

    We have inserted session('f_name') inside setName().

    8. Laravel Toastr package issues

    Laravel toastr package may cause issues, it mostly does due to path is incorrect. Check out the video below to solve this issue

    Flutter Frontend Issues

    1. Change registration and login info

    For the app in the part 3, you might have trouble resigtering new users. You might get forbidden error. That happens because change login method. So you need to make a change in your app. You may continue to finish part 3 or you can fix this first and then continue. If you decide to fix this issue first then watch the video in the link

    Change Login Method

    2. Connection closed while receiving data

    This app downloads data from the internet. Your android emulator might have insecure settings. it happens due to http rather than https. Try the solutions in the link below

    Connection closed while receiving data

    If you have more errors go to the link below

    Flutter e-commerce app help

    3. Connection closed before full header was received

    If you get the above error try to add this in your ApiClient.dart

    "HttpHeaders.contentTypeHeader": "application/json"
    

    Then your _mainHeaders variable would look like below

    _mainHeaders={
          'Content-type':'application/json; charset=UTF-8',
          'Authorization': 'Bearer $token',
          "HttpHeaders.contentTypeHeader": "application/json"
        };

    The above error should be caused by image loading. And If the above solution did not work for you then you can try below solution. Use cache for network image

    4. Order Model for payment (code given)

    https://learnflutter.co/flutter-order-model-for-payment/

    Copy all the code from the link above and put in the models folder as order_model.dart

    5. Place order model (code given)

    https://learnflutter.co/flutter-place-order-model-for-e-commerce-app/

    Copy all the code from the above link and put in the models folder name place_order_model.dart

    With this we incapsulate all the information about the order.

    6. Google address does not show up after filling in

    We missed a line in google map. 

    Address does not show up even after filling in the address in account_page.dart

    in account_page.dart inside build method add the line

    Get.find<LocationController>().getAddressList()

    Flutter Travel App

    Flutter 3.0 Master Class

    Courses


    Recent posts