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

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)

Code leve 1 includes

1. all the pages listed below with screenshot

2. backend

(Total sale : 231 life time)

Code level 2

Patreon link for downloading the code 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 : 178 life time)

Commercial licence

Patreon link for downloading the code commercial license

Commercial license includes everything and any future features.

Currently it includes one feature that others don't have

1. multiple lanugage support

In future It will include more features like

1. suggested food

2. backend setup for zone

3. phone number verification

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

5. delivary boy app( coming soon by end of May)

(Total sale : 71 life time)

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

Starter code for youtube fans

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

 

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.

More features (expected to be finished by 2022/05/28)

1. Firebase notification from server

2. Order tracking and status

3. Backend order statistics

 

Change log

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

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

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

 

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()