Food Delivery Flutter App + PHP Laravel Admin Panel - User Documentation

Food Delivery Flutter App

Flutter is an open-source mobile application development SDK created by Google. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia, Flutter widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android.

This is a complete end-to-end solution for launching your own full delivery app. It includes an end user app from which the end users can place an order for products and it includes an admin panel for store owners to accept or manage orders and improve their business. This solution is ideal for anyone who wants to start a product delivery app business.



Admin Panel Installation

  • Upload file AdminPanel.zip to your server.
  • Unzip file AdminPanel.zip to folder on you server.
  • Unzip file AdminPanel.zip to folder on you server.
  • Create MySQL DataBase on you host.
  • Need the following information: Database Host, DataBase port, Database name, login and password for database.
  • Open file '.env' and input all information .
  • DB_HOST=databasehost
    DB_PORT=databaseport
    DB_DATABASE=databasename
    DB_USERNAME=databaseuser
    DB_PASSWORD=databasepassword
    
  • If you need send forgot password by email, input smtp server information:
  • MAIL_MAILER=smtp
    MAIL_HOST=inputsmtp_server
    MAIL_PORT=inputport
    MAIL_USERNAME=inputusername
    MAIL_PASSWORD=inputpassword
    
  • Open in browser http://yourdomain.com/youfolder/public/install
  • Now you can enter to admin panel.
  • Open in browser http://yourdomain.com/youfolder/public/
  • Enter admin name and password
  • admin@admin.com
    123456
    
  • In applucation open file lib/model/server/api.dart and change _path to you new site path.

  • Create your own Google Maps API key

    Before you start using the Places and Directions API, you need a project with a billing account. To learn more, see Get Started with Google Maps Platform

    Log in to the Google API Manager Console here: https://console.developers.google.com/apis/library

    Click the Library link in the left sidebar

    Select the project you created when you created your API Key for WP Google Maps (See the top arrow in the screenshot below)

    Click the link to the Google Maps Directions API in the listing under Google Maps APIs. (See bottom arrow in screenshot below.)

    Click Enable on the Google Maps Directions API window.

    Enable Maps SDK for Android and iOS

    Click Enable on the Google Maps Places API

    Copy google map keys for Android and iOS projects. They will be needed when setting up projects.

    Also open file lib/config/googleApi.dart and put Google Map Key into the googleApi constant.



    Firebase Push notification Configurations

  • Before going to configure firebase push notification on ios and android platform you need to configure your project on firebase console.
  • You have to create project and ios and android application on firebase console.
  • Add bundle identifier of ios and application packages id of Android project.
  • Please follow all the steps which are mentioned on firebase console for both iOS and Android application.
  • Download google-service.json file for Android
  • Download Google-service-info.plist file for iOS
  • Download Google-service-info.plist file for iOS
  • On server open file app/http/controllers/messagingController.php. Find $server_key variable and input server key from firebase console panel.


  • RazorPay Integrations

    Before using Razorpay you must have to log in with Razorpay account.

    Razorpay Account

    Copy Razorpay key in your Admin Panel.

    Open Admin Panel-> Settings-> Payments Methods

    Stripe Integrations

    For Stripe Payment gateway integrations your need to register on stripe portal.

    Stripe Payment Gateway Portal

    You need to register your stripe account as a sandbox account. After that once everything work perfect you may go to make your account live.

    Copy Stripe key in your Admin Panel.

    Open Admin Panel-> Settings-> Payments Methods

    Android Configuration


    Get Dependencies

    And just run the following command

    flutter pub get
    

    Change Package Name

    If you want to change the package name following the next steps

    1 - Open /android/app/build.gradle and change the package name

     
        defaultConfig {
            applicationId "ENTER YOU PACKAGE NAME"
            minSdkVersion 23
            targetSdkVersion 29
            versionCode flutterVersionCode.toInteger()
            versionName flutterVersionName
        }
    

    2 - /android/app/src/main/AndroidManifest.xml , /android/app/src/profil/AndroidManifest.xml, /android/app/src/debug/AndroidManifest.xml and specify your:

  • YOUR PACKAGE NAME
  • YOUR APPLICATION NAME
  • YOUR GOOGLE MAPS KEY
  •  
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="YOUR PACKAGE NAME">
        <application
            android:name="io.flutter.app.FlutterApplication"
            android:label="YOUR APPLICATION NAME"
            android:icon="@mipmap/ic_launcher">
            <meta-data android:name="com.google.android.geo.API_KEY"
                android:value="YOUR GOOGLE MAPS KEY"/>
            <activity
    

    3 - Open /android/app/src/main/kotlin/Your Package name folders/MainActivity.kt and change the package name

    Drag and Drop Firebase Google-Service.json file

    Open Android Studio and Drag and Drop Firebase Google-Service.json file into android/app folder

    iOS Configuration


    Get Dependencies

    And just run the following command

    flutter pub get
    

    Google Maps Key

    Specify your API key in the application delegate ios/Runner/AppDelegate.swift:

     
    @UIApplicationMain
    @objc class AppDelegate: FlutterAppDelegate {
      override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
      ) -> Bool {
        GMSServices.provideAPIKey("YOU GOOGLE MAPS KEY")
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
      }
    }
    

    Firebase Notifications

  • For iOS platform follow all the steps which are mentioned on firebase console.
  • For this you must have enrolled apple developer account.
  • Register your application with updated bundle id.
  • Configure push notification and download development and distribution certificates.
  • Add those certificates to your system keychain with double click on that certificates.
  • Generate .p12 certificates and add both the certificates on firebase console.
  • Download GoogleService-Info.plist file.
  • Drag and Drop that file on ios -> runner folder.

  • Register new identifier

    Configure Push Notification on Developer Account

    Add .p12 certificates to Firebase Console

    Run App

    Open the simulator to run iOS or Android (as the step above)

    Then press the run button to start the project (you can still open multi simulator at the same time)




    Configuration

    YourPoject/lib/config/theme.dart file contains all configuration variables Colors, Theming, Text Styles... for Dark and Bright theme

    class AppThemeData{
      //
      // Dark mode flag
      //
      bool darkMode = false;
      //
      // colors
      //
      Color colorGrey = Color.fromARGB(255, 209, 210, 205);
    
      Color colorPrimary = Color(0xffff8652);
      Color colorCompanion = Color(0xffc13525);
      Color colorCompanion2 = Color(0xffffbb43);
      Color colorCompanion3 = Color(0xffb6e9d1);
      Color colorCompanion4 = Colors.green;
    
      text14bold = TextStyle(
        color: theme.colorDefaultText,
        fontWeight: FontWeight.w800,
        fontSize: 14,
      );
    



    Multi language support

    YourPoject/lib/config/lang.dart file сontains all expressions, words, phrases contained in the project

      Map langEng = {
        10 : "Food Delivery Flutter App UI Kit",
        11 : "Skip",
        12 : "Down",
        13 : "Let's start with LogIn!",
        14 : "Enter you login details to access your account.",
        15 : "Login",
        16 : "Password",
        17 : "Forgot password",
        18 : "Continue",
        19 : "Don't have an account? Create",
    ...
    



    Build and Install App

  • After you making all you changes and customizations save the project.
  • Open Console, navigate to you project folder
  • Run flutter build apk --release you should get the apk file in the /output folder
  • Run flutter install to install you application on your connected devises