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

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

 

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

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

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

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.

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. šŸ˜€

 

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.

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


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.


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.


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.


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.


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.

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.

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.


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.


Here you have the ability to perform various actions including handling Pages, Features, Manage Blogs, Testimonials, Interfaces, Terms & Condition and Privacy & Policy.

Manage Pages

You can modify various sections of the pages, including the slider, header, content, features, interface, pricing, watch, payment, printer, testimonial, blog, about us, term & condition, privacy, contact us, footer, social media.

You can update the header "button" and its link of your landing page.

You can update different content from here.

Here, you can update the feature title of the Home page.

Here, you can update the interface title and description of the Home Page.

Here, you can update the Pricing title and its link.

You can add this section to the Home page by filling out the required information.

You can update here payment information.

Here you can update printer information of the Home Page.

Here, you can update the testimonial section's title of the Home page.

Here, you can update some information of your Blog page.

Here, you can update information of your About us page.

You can update your term and condition "title" in this section.

You can update your privacy and policy "title" in this section.

You can update your contact us pages's title, button, description in this section.

Here, you can view all parts of the footer section of the landing page. You can update them according to your needs.

You can update social icon of landing page according to your needs.

The features section appears to be a list of features in a software application.Users can add new features by clicking the "Create New" Feature button.The Action column may allow users to perform actions on features, such as "editing" or "deleting" them.

Here you can see some fields, such as 'Title,' 'Status,' and others, for creating new features.

Here you have the option to view the blog and comment lists. Additionally, editing and updating options are available. You can also search for specific items, and multi-delete functionality is also provided.

Feel free to utilize this platform to generate a blog post and complete the necessary fields. As you input your content, you'll notice the inclusion of multiple tags. Additionally, you can craft meta titles and meta descriptions for enhanced SEO purposes.

Here, you have the option to view the testimonial list with update and delete options available. Search and multi-delete options are also provided. After clicking the "Create New" button, you will be taken to a new page where you can add a testimonial by filling in the necessary fields.Here, you can provide the client's name, their workplace, the review, and select a star rating from the existing list. You can also add an image.

Here you create Testimonial to fill required field.

Here, you can view the Interfaces List with filtering options. You can change the status for each interface, as well as edit, delete, or multi-delete them.

Use images to create a visual representation of the interface within the landing page.

Here are the updated terms and conditions for your software.

We need a privacy policy for our software. You can update the policy in this section.


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

Note: Before updating to the new version, please ensure you have a database and full project backup, and that your project is already updated to the latest version. This is extremely important!

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


Version: 2.8 ( 05 August 2025 )
  • FAQs option added for app
  • Tutorials option added for app
  • Sidebar position fixed after reloading the page
  • System ready for web add-on for shop/business panel
  • Bulk upload API added
  • Dashboard filter API updated

  • Note: Please replace the following folders: app, lang, database, public/assets, resources, routes and vendor. After replacing them, visit yourdomain.com/update to install the new version and please don't forget to reload hard your browser. Without visiting the URL and reloading hard, your project will not function correctly, so ensure you complete this step.

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


Version: 2.3 ( 06 April 2025 )
  • Razorpay payment issue fixed.
  • Fiexd some minor issues for other payment gateways.
  • Optimized some codes.

  • Note: Please replace the following folders: app and resources. After replacing them, visit yourdomain.com/update to install the new version and please don't forget to reload hard your browser. Without visiting the URL and reloading hard, your project will not function correctly, so ensure you complete this step.


Version: 2.2 ( 19 March 2025 )
  • Banner Api Issue fixed.
  • Password require removed on shop edit.
  • Plan features option changed and fully dynamic.
  • Fixed some design issues.

  • Note: Please replace/upload the following folders: app, Modules, public/assets and resources. After replacing them, visit yourdomain.com/update to install the new version and please don't forget to reload hard your browser. Without visiting the URL and reloading hard, your project will not function correctly, so ensure you complete this step.


Version: 2.1 ( 18 February 2025 )
  • Sales return api added.
  • GST/VAT api added.
  • Added dynamic VAT/GST in the sales section.

  • Note: Please replace/upload the following folders: app, database, Modules and routes. After replacing them, visit yourdomain.com/update to install the new version. Without visiting the URL, your project will not function correctly, so ensure you complete this step.


Version: 2.0 ( 04 February 2025 )
  • Landing pages added using module.
  • Fixed some design issues.
  • Fixed some known issues.
  • Fixed payment gateways bugs.
  • Tap Payment gateway added.
  • Notes section added for payments gateways.
  • Payment gateway enable and disable issues fixed.
  • Installer updated.
  • 150+ Currencies Added.
  • Subscription payment invoice added.

  • Note: Please replace/upload the following folders and files: app, config,database, lang, Modules, public/assets, resources, routes, vendor, composer.json and modules_statuses.json. After replacing them, visit yourdomain.com/update to install the new version. Without visiting the URL, your project will not function correctly, so ensure you complete this step.


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.


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

In the Admin Panel, you will see the Addon list. You can activate or deactivate an addon by changing its status.

Install / Update Addon

To enter the purchase code and upload a file, you can install/update the Addon.

Sign Up

By clicking "Create an account." a sign-up pop-up will appear, allowing you to create an account.

Create Account

You can create an account by filling in the required fields. Remember to provide your email and password. Once you're ready, click the save button.A verification pop-up will appear, and a verification code will be sent to your email.

Verification

Enter the verification code sent to your email here. If the code is valid, a success pop-up will appear. If needed, you can request a new code after a certain period.

Successful

You can download the APK from here or close the window. After that, you can login using your email and password.


This is the Addon dashboard page, where key project information is presented.


Create Sale

By clicking on "Sale New," you can create a new sale. First, select a customer.By selecting register customer the product prices displayed on the right will automatically update based on the selected customer's type (Retailer, Wholesaler, or Dealer).

Select Product

Next, you need to select a product for the sale. You can search by product name, and if the search result matches a product from the list, it will be automatically added to the cart.

Add to Cart & store product

When you click on a product, it will be automatically added to the cart if this product available in stock. You can adjust the quantity by using the plus or minus buttons, or directly update the quantity by entering a value. To remove a product from the cart, simply click the red cross button.

Below, you will see the total of all products. You can also add VAT or a discount to the total. After the calculations, the total amount will be displayed. Next, you can enter the received amount. If the received amount is greater than the total amount, the remaining balance will be shown in the "Change Amount" field. If the received amount is less, the "Due Amount" field will display the difference. If you want to remove all products from the list, click the reset button. Once everything is correct, click the save button to complete the sale.If you click on save & print button it will save and also give you print option.

Sale List

This appears to be a screenshot of the Sale list page, where you can filter data using the search function. Additionally, you can view invoices, as well as edit, delete, or use the multi-delete option. Furthermore, you will have the option to initiate a Sale Return from this list. Please note, once a sale return is processed, you will no longer be able to update or delete the sale.

Create Sale Return

From the Sale list, when you click on Sales Return, this page will appear. By adjusting the quantity, you can return the desired amount. However, you cannot return more than the quantity sold.

Sale Return List

Here, you can view the complete list of sale returns with a filtering option. To view an invoice, simply click on the invoice No.


Create Purchase

By clicking on "Purchase New," you can create a new purchase. First, select a supplier. Next, choose a product for the purchase. Additionally, you can filter products by name and using the same filters as in the Sale process.

Select Product

Next, select a product for the purchase. When you choose a product, a pop-up will appear. Enter the quantity you wish to purchase and update the prices as needed. Once done, click save.

Add to Cart & store product

After clicking the save button in the pop-up window, the product will automatically appear in the cart list. You can adjust the quantity using the plus or minus buttons or update it directly by entering a value. To remove a product from the cart, click the red cross button.

Below, you will see the total of all products. You can also add discount to the total. After the calculations, the total amount will be displayed. Next, you can enter the received amount. If the received amount is greater than the total amount, the remaining balance will be shown in the "Change Amount" field. If the received amount is less, the "Due Amount" field will display the difference. If you want to remove all products from the list, click the reset button. Once everything is correct, click the save button to complete the purchase.If you click on save & print button it will save and also give you print option.

Purchase List

This appears to be a screenshot of the Purchase list page, where you can filter data using the search function. Additionally, you can view invoices, as well as edit, delete, or use the multi-delete option. Furthermore, you will have the option to initiate a Purchase Return from this list. Please note, once a Purchase return is processed, you will no longer be able to update or delete the Purchase.

Create Purchase Return

From the Purchase list, clicking on Purchases Return will open this page. You can adjust the quantity to return the desired amount, but you cannot return more than the purchased quantity.

Return List

Here, you can view the complete list of Purchase returns with a filtering option. To view an invoice, simply click on the invoice No.


Product List

Here, you can view the Product list with filtering options available. The list can be exported as Excel, CSV, and there is also a print option. By clicking the "View" button, you can see details in a pop-up window. Additionally, you can edit, delete, or perform multi-delete actions.

Create Product

You can create a product by filling in the required fields. When you select a Product Category, the associated variation fields (such as capacity, color, size, type, or weight) linked to that category will appear. You can then provide the necessary variations. The Product Code field will suggest a code by default, but you can update it if needed. Ensure you carefully input the product price. If everything is correct, click the save button to store the product.


Expired Product List

Here, you can view the expired Product list with filtering options available. The list can be exported as Excel, CSV, and there is also a print option. By clicking the "View" button, you can see details in a pop-up window.


Print Labels

The Print Labels feature in the Grocery system allows users to generate barcode labels for selected medicines. Users can choose products, set label quantity, packing date, and customize label details like product name, price, code, and packing date. It supports various barcode types and paper formats for printing.


Bulk Upload

This is the bulk upload section for the product module. Here, you will find a Download button that lets you download a demo Excel sheet. Required columns are marked with an asterisk (*), indicating that those fields must be filled in. Enter your product data into the Excel sheet based on how many records you want to upload. Then, use the provided form to upload your customized Excel file. An attachment with detailed instructions is also available — please follow the steps carefully to ensure a successful bulk upload.


Category List

You can view the Category list with available filtering options. Furthermore, you have the ability to edit, delete, or use the multi-delete function.

Create Category

You can create a Category by filling in the required fields and selecting the desired variation.


Brand List

You can view the brand list with available filtering options. Furthermore, you have the ability to edit, delete, or use the multi-delete function.

Create Brand

You can create a brand by filling in the required fields.


Unit List

You can view the Unit list with available filtering options. Furthermore, you have the ability to edit, delete, or use the multi-delete function.

Create Unit

You can create a unit by filling in the required fields.


Stock List

Here, you can view the Product list with filtering options available. The list can be exported as Excel, CSV, and there is also a print option. Also in top cart you will see Total quantity and Stock value.


Low Stock List

Here, you can view the low stock Product list with filtering options available. The list can be exported as Excel, CSV, and there is also a print option. Also in top cart you will see Total quantity and Stock value.


Customer List

Here, you can view the customer list with a search filter. Additionally, you have the option to view, edit, delete, or use the multi-delete function.

Create Customer

You can create a customer by filling out the required fields. Additionally, you can add an initial due amount to be stored.

Supplier List

Here, you can view the Supplier list with a search filter. Additionally, you have the option to view, edit, delete, or use the multi-delete function.

Create Supplier

You can create a Supplier by filling out the required fields. Additionally, you can add an initial due amount to be stored.


Income List

Here, you can view the Income list with a search filter. Additionally, you have the option to edit, delete, or use the multi-delete function.

Create Income

You can create an income by filling out the required fields.Here You can also select category and payment type.

Income Category

Here, you can view the Income Category with a search filter. Additionally, you have the option to edit, delete, or use the multi-delete function. Just put category name and description for create Income Category


Expense List

Here, you can view the Expense list with a search filter. Additionally, you have the option to edit, delete, or use the multi-delete function.

Create Expense

You can create an expense by filling out the required fields.Here You can also select category and payment type.

Expense Category

Here, you can view the Expense Category with a search filter. Additionally, you have the option to edit, delete, or use the multi-delete function. Just put category name and description for create Expense Category


Vat List

You can view the vat list and vat groups with available filtering options. Furthermore, you have the ability to edit, delete, or use the multi-delete function.

Here, you can see the form used to create VAT and VAT groups. To create them, you must fill in the required fields. The images below show examples of both VAT and VAT group creation forms.


Due List

Here, you can view the Due list with a search filter. Additionally, you can view invoices and collect the due amounts from this page.

Collect Due

When you click "Collect Due," this page will appear. Here, you can collect the due amount either by invoice or without an invoice if there is any initial due.


Cash Due List

If no customer is selected during a sale, the resulting dues are listed here. You can view the cash due list with a search filter. Additionally, you can view invoices and collect due amounts from this page.

Cash Collect Due

When you click "Collect Due," this page will appear. Here, you can collect the due amount for the selected invoice.


Subscriptions

Here, you can view your current plan status along with all other available plans. You can also upgrade your plan from this page.

Payment

After choosing your desired plan, just click to view the available payment options. Once you complete your payment, you can upgrade your plan.


Loss Profit List

Here, you can view the profit and loss data from sales with search and date filters. You can also export the list as CSV, Excel, and print it. Additionally, the total loss and profit are displayed in the top cart.


Here, various reports are available, including Sale, Sale Return, Purchase, Purchase Return, Income, Expense, Current Stock, Customer Due, Supplier Due, Profit and Loss, Transaction, Subscription and Expired Product. Each report includes filtering options for data. Additionally, you can export data as CSV, Excel, and a Print option is also provided.

Sale Report

Sale Return Report

Purchase Report

Purchase Return Report

Income Report

Expense Report

Stock Report

Customer Due Report

Supplier Due Report

Loss & Profit Report

Due Collection Transactions

Subscription Report

Expired Product Report


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

Currencies

Here, you can view a list of currencies added through the Admin Panel. You can select your preferred default currency, but by default, the system uses the currency set in the Admin Panel.

Notification

Here, you can view a list of notifications for Sales, Purchases, Income, Expenses, and Due Collections. Click the 'View' button on any notification to see its detailed information.

Generale Settings

You can modify the general project information, which will also reflect in all your project invoices. For example, if you update the invoice logo here, it will be displayed on all invoices, including Sales, Purchases, and Due Invoices.

Invoice Settings

In this section, you can select your preferred invoice format. You can choose either A4 or 3-inch (80mm). The selected invoice format will be used throughout the entire project.

User Role

In this section, you can create new roles, update existing ones, and delete them. While updating roles, you can configure specific permissions to grant or restrict access to various features and functionalities. This enables you to customize user roles according to your organizational needs and security requirements.

Payment Type

This is a screenshot of the payment type list. Here, you can filter payment types, as well as edit, delete, or bulk delete them. There is also an 'Add New' button for creating a new payment type. To add one, simply fill in the required fields — enter the name and select the status (active or deactive) from the dropdown.


Download Apk

After this, you will be redirected to a URL where you can download the APK file


Add-on Change Logs

Version: 1.0.0 ( 05 August 2025 )
  1. Initial Release

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://).

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.

    • 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

  • 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.

  • 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.

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.

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.

    • 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.