Grocery Shop - Flutter App with Laravel Admin Panel

This document contains general information and step by step guidelines
on how to install on your Local/Live server Admin Panel & App

Get started

Getting Started

Grocery Shop - Admin Panel

  • Uploaded Date: 29-October-2024
  • Project: Grocery Shop
  • Author: Acnoo
  • Email: acnooteam@gmail.com

Thank you for purchasing our product. If you have any questions that are beyond the scope of this documentation file, please feel free to email us via our user page contact form or directly to email at acnooteam@gmail.com

Requirements

We are using laravel 10 So these are the minimum server requirements, the installer will check if your server meets these or alternatively you can contact your hosting provider in order to make sure your server meets them.

  • PHP >= 8.1
  • Ctype PHP Extension
  • cURL PHP Extension
  • DOM PHP Extension
  • Fileinfo PHP Extension
  • Filter PHP Extension
  • Hash PHP Extension
  • Mbstring PHP Extension
  • OpenSSL PHP Extension
  • PCRE PHP Extension
  • PDO PHP Extension
  • Session PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

For more information about deployment see the Laravel documentation here https://laravel.com/docs/10.x/deployment

 

Download Project from Envato

After successfully purchase Grocery Shop download the project from Envato download page

Extract the downloaded file. You will have another zip file named grocery_shop.zip containing the main project's files and a documentation folder. You are reading this documentation, that means you already have theme both.

Creating Database

Before installing, you will need to create a new database. If you already know how to do this or have already created one, skip to the next step.

Note: Please use empty database. In most cases you should be able to create a database from your cpanel.

Login to your cPanel by entering this in your browser url

yourdomian.com/cpanel

Step: 1
Step: 2
Step: 3

Now you need to create a new user. On the same page go to create a new database user

Step: 4

Now add the user to the database

Step: 5

And select full permissions on the database to that user

Uploading Files

On some operating systems, the dotfiles are hidden by default. Before starting to upload the files, please make sure your file explorer has the option to view hidden files turned on.

After creating a database, Upload the grocery_shop.zip file on the web root folder of your domain. This folder is generally called public_html, html, or example.com, but depending on your server's configuration, it might be named differently.

After that in the public_html directory upload the downloaded file.

Note: Important Make sure that you have .env file in your folder.

Note: Make sure that .htaccess file got copied properly from the download to your server.

Installation Wizard

Go to your website address, then you'll see an installation wizard. To open the installer. Visit

yourdomain.com/install

Now the installer will show up.The First screen will be Welcome Screen

Note : If you are not able to access the website by accessing yourdomain.com/install, but you are able to access it via yourdomain.com/index.php/install, this means that you probably don't have Apache mod_rewrite installed and enabled.

Server Requirements

After clicking on "Check requirement" button, you will be redirected to System Requirements step during the installation wizard, System Requirements.

Directory Permissions

After successfully enabling and installing all required PHP extensions, next step is to set the appropriate permissions for some system folders that shows on below picture.

For giving permissions please open your terminal window. and type command sudo chmod 777 directory_name for example sudo chmod 777 app

Note : If your control panel has no terminal window, then go to public_html or the directory where you have uploaded the project. now give permission for some system folders that show on Installer. For example, we have demonstrated storage/framework directory permission in the below image.

Open required directory Change permissions for specific directory

Note: You have to change the directory permissions for the storage/logs and bootstrap/cache folders as shown in the image. If these folders do not have the correct permissions, please adjust them accordingly.

Database/Environment Setting

You have to fill in your database credentials

Exit

The last step is exit step.

Congratulations you have successfully installed this project on your server. šŸ˜€

 

Default Password

You can login using several methods depending on your role.

Super Admin

superadmin@superadmin.com

superadmin

Admin

admin@admin.com

admin

Manager

manager@manager.com

manager

In this project, different modules are assigned based on user roles: Super Admin, Admin, and Manager. Each role has distinct responsibilities tailored to their specific tasks and permissions. Below, we will discuss how each user role operates within the system.

Dashboard

This is the admin dashboard page. The essential information regarding the project are displayed here.

Plan List

Here, you can view a list of available plans with filtering options. You can also change the plan status from this page. Additionally, options to view, edit, delete, and multi-delete plans are available.

Create Plan

Here, you have the option to create a plan according to your preferences. You can also add multiple features using the "Add New Feature" input field. Once you have completed filling out the form, simply click the "Save" button.

Shop Category List

This appears to be a screenshot of a shop categories list. Here, you can filter shop categories, as well as edit, delete, or multi-delete them. There is also an "Add New" button for adding new shop categories. To add a new shop category, fill in the necessary fields. You need to enter the shop name, and the description field is optional. You can also update the status from this page.

Shop List

This appears to be a screenshot of a shop list page. Shop list functionalities typically allow users to collect and organize information about shop. By clicking the "View" button, you can see the details of each shop. You can also create a new shop by clicking the "Add New shop" button. Below, we'll describe how you can create a new shop.

Upgrade Plan

If you need to upgrade the plan for any business, click on the "Upgrade Plan" button. You will likely see a popup for this. Here, you can update the plan, gateway, price, and notes. When you select a plan, the price input field will automatically fill in according to the selected plan, but you can also change the price manually. If desired, you can add a note by filling in the notes input field.

Create Shop

By clicking on the "Add New Shop" button, you can create a new shop. You will need to fill in the necessary fields. Here is the screenshot of the create shop page.

Add Promotion

This list allows you to see the current advertising campaigns with status. To create a new advertise, you can click on the "Add Promotion" button at the top right of the screenshot. A pop-up window will open, where you can add an image and change the status.

Staff List

Here, you can view the list of staff members along with a search filter. Additionally, you have the option to edit, delete individual entries, and perform multi-delete operations.

Create Staff

You can create a staff member here by completing the necessary fields.

Shop Reports

The Shop Report List is an essential part of the admin panel that provides a comprehensive view of each shopā€™s details, including business information, enrollment data, and subscription status. This report is useful for administrators to monitor shop activities, track subscription statuses, and manage businesses effectively.

Expire Shop List

The Shop Expire List is a report that shows all of the shops that have expired. This report is used to identify shops that need to be renewed or canceled.

Subscription Report

The Subscription reports section allows users to track their current subscriptions.In the action column, clicking on the three dots (...) will display options to mark as "Paid" or "Reject." Clicking either option will allow you to change the status accordingly.

Roles & Permissions

In this section, you have the ability to define roles and allocate specific permissions to different users as needed.

Roles

In this section, you have the capability to create new roles and update existing ones. When updating roles, you can configure their specific role permissions, granting or restricting access to various features and functionalities as required. This allows you to tailor user roles to your organizational needs and security requirements.

Permissions

In this section, you have the capability to set role-specific permissions, allowing you to fine-tune and control access rights for each role according to your organization's needs and security requirements.

Setting

In the Setting section, you have the capability to configure the fundamental aspects or core elements of this project.

Currency list

Here, you can view a list of currencies with filtering options. Additionally, there is an option to edit currencies, and you can also set a default currency.

Create Currency

You have the option to include currency from this location.

Notification

Here, you can view a list of various notifications. You also have the option to filter these notifications based on available criteria.In each list, clicking the "View" button allows you to see detailed information.

Payment Gateway Settings

Here, you can modify various payment gateways like Stripe, PayPal, SSLCommerz, manual and many others options.

Stripe

Mobile

Paypal

Paystack

Razorpay

Instamojo

Toyyibpay

Flutter Wave

Thawani

Mercadopago

Phonepe

Paytm

Sslcommerz

Manual

System Settings

In this section, you can configure various backend settings for the project, including application setup, driver configurations, mail settings, storage configurations, and other essential components. It's crucial to handle these configurations with care as they impact the functionality and security of the system.

App

Drivers

Drivers

Storage Settings

Mail Configuration

Note: Please note that if you change QUEUE_MAIL from false to true, you need to run the following command: php artisan queue:work. Remember: The command path should be: /home/u186958312/domains/yourdomain.com/public_html. Make sure you're in the correct path.

Note: If you're not familiar with running the command, there's another option. Simply visit yourdomain.com/queue-work and it will be executed automatically.

Note: If you select QUEUE_MAIL as true but do not run the command or visit the URL, email functionality will not work properly.

Others

General Settings

You have the capability to modify the general project information.

Admin Change Logs

Version: 1.1 ( 29 December 2024 )
  1. Language issue fixed.
  2. Optimize some codes.
  3. Some string wrapped for translation.

    4. Note: Before updating to the new version, please make sure you already have a database and full project backup. This is extremely important!

    Note: Please replace the following folders: app, lang, resources.

    Note: If you face any issues with the update, please contact us.


Version: 1.0.0 ( 24 December 2024 )
  1. Initial Release

Flutter App Installation Setup Start

Prerequisite

  • Flutter & Dart SDK (We have used Flutter version 3.24.3)
  • Anyone IDE Android Studio (Recommended), Visual Studio Code or IntelliJ IDEA
  • To edit this project you must have Flutter and Dart installed and configured successfully on your computer.
  • Set up your editor - Install the Flutter and Dart plugins.
  • If you have got Android SDK installed and configured, to install Flutter you only need to:
    • Download Flutter SDK from official website and extract it.
    • Add path to previously extracted SDK to your PATH variable
    • Run flutter doctor tool to check if everything is configured correctly.
    • All above steps are mentioned here: https://flutter.dev/docs/get-started/install/
Make sure you have added the purchase code inside the app.

Directory: /grocery-shop-app-codecanyon/lib/constant.dart

Setup Flutter

Download the Flutter 3.24.3 version from the Flutter SDK Archive link .

  • Please unzip the downloaded file and move the Flutter folder to your desired installation directory for the Flutter SDK (e.g., C:\flutter). We recommend avoiding locations like C:\Program Files to prevent potential permission issues.
  • To add Flutter to your environment path, start by searching for "Environment" in the Start menu and select "Edit the system environment variables." In the System Properties window that opens, click on "Environment Variables" Under the "System variables" section, find and select the "Path" variable, then click "Edit." In the Edit Environment Variable window, click "New" and add the path to the Flutter bin directory (e.g., C:\flutter\bin). Once added, click "OK" to save the changes and close all the windows. This process will ensure that Flutter commands can be executed from the command line.
  • Within the "User variables" section, locate the Path environment variable and click on "Edit." In the dialog box that appears, click "New" and paste the path to the `\bin` directory of your Flutter installation (e.g., `C:\flutter\bin`). After adding the path, click "OK" to close each of the dialog boxes and apply the changes. This will complete the setup of the Flutter path in your environment variables.

To verify that everything is installed correctly, open the Command Prompt and run the command flutter doctor. This command will check your Flutter installation and provide a report on thestatus of your environment. Ensure that there are no critical errors, and follow any suggested steps to resolve warnings or issues

How to instal & Setup Flutter for App Development on Mac - Part 2

Setup Android Studio

  • Launch Android Studio and select the 'Open' option from the welcome screen. Navigate to and select the 'grocery_shop_app' folder that you obtained from Codecanyon. This will open the project in Android Studio, allowing you to start working on it.
  • If you are creating or opening a Flutter project in Android Studio for the first time, you'll need to install the Flutter plugin and configure the Flutter and Dart SDK paths. To do this, open Android Studio and navigate to "Plugins" from the settings menu. Search for and install the Flutter plugin, which will automatically include the Dart plugin as well. After installing, set the path to your Flutter SDK under the Flutter plugin settings, ensuring that the Dart SDK path is also correctly configured. This setup is essential for developing Flutter projects within Android Studio.

      Open File->Settings, then go to Plugins

      And Install flutter, dart, and kotlin plugins.

      In Android Studio, open the settings or preferences menu again. In the left pane, select 'Language and Frameworks,' then click on 'Flutter.' In the right panel, set the path to your Flutter SDK by selecting the directory where Flutter is installed (e.g., `C:\flutter`).

      Now dart sdk should automatically be selected, if not select the flutter path and add \bin\cache\dart-sdk as shown in image

      To configure the Android SDK, navigate to the SDK Manager located in the upper right corner of your screen. Next, go to the "Android SDK" section and uncheck the 'Hide Obsolete Packages' option. From the available packages, select 'Android SDK Command Line Tool Latest.' Click 'Apply' to confirm your selections, and then click 'OK' to start downloading the latest version. Please refer to the image below for guidance.

App Setup

Youā€™ll need to modify the api_config.dart file to replace the existing domain with your new one. Hereā€™s how you can do it:

  • Open the api_config.dart file located in the /Influencer-full-app/lib/config/ directory.
  • Replace 'https://grocery.acnoo.com' with your new domain:
  • Make sure the new URL is correctly formatted and includes the proper protocol (https:// or http://).

Now,

Please open the constant.dart file and update the app name, company name, and app version with the desired values, ensuring they are written correctly.

Change package name

    • Find the current package name, which is com.acnoo.groceryshop

      • path:/grocery-shop-app-codecanyon/android/app/src/main/kotlin/com/maantheme/mobilepos/gro cery_shop_app_codecanyon/MainActivity.kt

    • Select the project file & Press Ctrl + Shift + R to replace the old package name with your new one throughout the entire codebase
    • Now in the first box paste the current package name(com.acnoo.groceryshop) and in the second box write the new name and press Replace All button.Please consider assigning a meaningful package name and try to follow the structure.

Run Flutter Project

  • For first-time users, enable Dart support for the project. Afterward, navigate to the pubspec.yaml file and retrieve the packages by clicking on "Pub Get" located at the top right corner, as illustrated in the image.
  • After enabling Dart support and fetching packages, select a device or run an emulator. Click the 'Play' icon in the upper-right corner to launch the app. For physical devices, enable 'Developer Options' and 'USB Debugging' on your phone.

Change Application Info

How to change application name

  • To change the app name you have to go to the AndroidManifest.xml file.
  • path: /grocery-shop-app-codecanyon/android/app/src/main/AndroidManifest.xml

    • After opening the file change the android:label =ā€AppNameā€ & replace your current name. And build the app. The App name will be changed.

How to change application version

  • Navigate to the pubspec.yaml file and modify the 'version' field. For instance, if the previous version is 1.0.0+1, update it to 1.0.1+2.
  • IMPORTANT: Ensure to execute 'flutter pub get' and 'flutter run' after making this adjustment.

How to change application icon

Select Images:

    • Choose three images that you want to use for icons.
    • Ensure the images are appropriate and formatted correctly for the app's display requirements.

Rename Images:

  • Rename the selected images with the following filenames:
    • icon:appIcon.png
    Make sure to keep the file extension as .png.

Replace Existing Images:

  • Locate the folder where the current onboarding images are stored. This is typically named images
  • Copy and paste your newly renamed image inside this folder named ā€œappIconā€.
  • If prompted, allow the new images to replace the existing ones.

Restart the App:

  • Clos ethe app completely to ensure all changes take effect.

Now from the terminal run the command :

flutter runflutter pub get

dart run icons_launcher:create

Restart the app and verify that the new onboarding images are displayed correctly.

Project Structure

If you want to modify any of these screens, you can do so from these directory. Each directory name corresponds to the title of the respective apps screen, making it easy for you to locate and identify the files you need to edit.

Const: Here you can find the API setup option to change your domain.

Screen: Here you can find the screens of the total app

constant.dart: Here you can find all the static values.

Change Splash logo & logo inside the App.

Select Images:

  • Choose the image that you want to use for the main logo.
  • Ensure the image is appropriate and formatted correctly for the app's display requirements.

Rename Images:

  • Rename the selected image with the following filenames:
    • Splash logo: splash_logo.png
  • Make sure to keep the file extension as .png.

Replace Existing Images:

    • Locate the folder where the current logo & avatar images are stored. This is typically named images
    • Copy and paste your newly renamed images into this folder.
    • If prompted, allow the new images to replace the existing ones.

Restart the App:

    • Close the app completely to ensure all changes take effect.

Restart the app and verify that the new onboarding images are displayed correctly.

Change Onboarding App:

    • Open images folder

Select Images:

    • Choose three images that you want to use for the onboarding screens.
    • Ensure the images are appropriate and formatted correctly for the app's display requirements.

Rename Images:

  • Rename the selected image with the following filenames:
    • First Image: onboard1.png
    • SecondImage: onboard2.png
    • Third Image: onboard3.png
  • Make sure to keep the file extension as .png.

Replace Existing Images:

  • Locate the folder where the current onboarding images are stored. This is typically named images
  • Copy and paste your newly renamed images into this folder(images)
  • If prompted, allow the new images to replace the existing ones.

Restart the App:

  • Clos ethe app completely to ensure all changes take effect.

Restart the app and verify that the new onboarding images are displayed correctly.

How to build release apk

To build a release APK for your Flutter project, follow these steps:

  • Open Your Project: Launch Android Studio and open your Flutter project.
  • Access the Terminal:

      In the bottom left corner of the Android Studio interface, locate the navigation bar.

      Click on the Terminal icon to open the terminal window.

      And Install flutter, dart, and kotlin plugins.

  • Run the Build Command:

      In the terminal, enter the following command:

      flutter build apk --release

Locate the APK:

    Once the build process completes, you can find your release APK in the following directory:

    build/app/outputs/flutter-apk/app-release.apk

To build a release APK for your Flutter project using the Android Studio top menu, follow these steps:

  • Open Your Project: Launch Android Studio and load your Flutter project.
  • Access the Build Menu:

      In the top menu bar, click on Build.

      Hover your cursor over Flutter in the dropdown menu.

Select Build APK:

    Click on Build APK from the submenu

  • Monitor the Progress:

      A progress window will appear at the bottom of the screen, displaying the build status.

      The build process may take some time, depending on your project size and system performance.

  • Locate the APK::

      Once the build is complete, you can find the release APK in the following directory:

      build/app/outputs/flutter-apk/app-release.apk

HELP & SUPPORT

Free support policy includes troubleshooting, technical assistance with the product only. It does not include any customization, additional features integration or concerns about third- party plugins compatibility. But, support is applied to plugin(s) we have developed and integrated ourselves. We appreciate your understanding!

If you need assistance and information on purchased product that is not covered in documentation, mail them on our support at

acnooteam@gmail.com

You can expect answer within 24-48 hours, usually as soon as possible in the order they were received.

Additionally, if any email has no response from the item owner for more than 7 days, that support email will be archived by default. However, if you need further assistance, you can mail us again.