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

Part 1 Shopping App

Part 2 Shopping App

Part 3 Shopping App

Part 4 Shopping App

Part 5 Shopping App

Part 6 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)
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 (latest code is updated every week)

  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

(Total sale : 289 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

(Total sale : 213 life time)

Setup for the downloaded code

 

  Commercial licence

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. Delivery boy app

In future It will include more features like

1. suggested food

2. phone number verification

3. front end website for basic introduction of this e-commerce

(Total sale : 101 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.

 

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. 

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.

 

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.

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.

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.

Paypal login page

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

Paypal payment confirm page

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

Payment success page

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

 

Change log

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

https://laravell.site/Laravel-e-commerce-app-zone-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 https://laravell.site/Creating-.htaccess-file-for-laravel-shared-host

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

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