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
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)
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)
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)
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
See the installation at the bottom
Backend code here
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.
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
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
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.
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
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
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 Frontend Issues
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
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
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
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
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.
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()