Back to Top

Guide for Magento 2 Mobile POS App(Flutter POS App)

Updated 11 June 2024

Magento 2 Mobile POS is built in Dart language with the Flutter framework. It’s used for building user interfaces for mobile applications.

Moreover, Magento 2 Mobile POS allows you to create reusable UI components as Flutter POS App is fast, scalable, and simple.

Why use the Flutter POS App?

Magento 2 Mobile POS App allows us to create exciting mobile apps by just making use of Dart and is both supportable for Android and iOS platforms.

Just create the code once, and the Magento 2 Mobile POS is available for both the iOS & Android platforms, thus saving much of the development time.

As it is an open-source framework, it will surely be compatible with other platforms like Windows and others that are there.

Searching for an experienced
Magento Company ?
Find out More

Also, if you know the Flutter POS App, then the developer doesn’t need to learn Android or iOS-specific languages for development.

The Flutter POS App Framework helps to serve both platforms(Android & iOS) in one go and provides a Flutter app experience on each of these platforms.

What this means is that it ends the war of selection for the developers on whether to go with Android or iOS development.

Magento 2 Mobile POS App(Flutter-Based App)

The Adobe Commerce Mobile POS(Point Of Sale) App is a Flutter-based mobile application for your Magento 2 online website.

Using this flutter app, your cashiers can make use of this single application on their Android or iOS devices for your multiple physical stores.

Check the below mentioned video for a brief overview of this Magento 2 Mobile POS App:

NfGwdzq7EDQ

Features – Flutter POS App

  • Real-Time Synchronization
  • Easy Product Search
  • Interactive Home Page
  • Flutter POS App
  • Offline/Online Mode
  • Print Invoice
  • Barcode Scanning(using device camera)
  • Offline/online Order Hold
  • Multi-Currency
  • Discount Coupon
  • Image For Cashier
  • Invoice Generation
  • Cash Drawer Printing
  • Order Return/Credit Memo
  • Customer Add/Edit/delete

Installation – Flutter POS App

Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

#2 Upload Folder

Once the module zip is extracted, follow path src>app and then copy the app folder into the Adobe Commerce Cloud root directory on the server as shown below:

Upload Folder

#3 Run Commands

After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:flush
 

Home – Flutter POS App

Opening the Store

After opening the app, the login screen appears where the cashier can log in to the POS system by entering his email ID and the password created by the admin and then tapping the Login button on the POS interface.

Opening the Store

Now, the cashier will have to select the Opening Balance for the Point Of Sale system. After entering the amount, the cashier will tap the Proceed button.

Home - Flutter POS App

Now, the cashier can see the POS home screen. Here, the cashier will find the products displayed according to the selection made in the web configuration settings for the POS system.

Homepage

You can also find the cart on the right-hand side, and you can toggle between the main options at the bottom panel – Home, Order, HoldCart, CashDrawer, Report, and More.

Home

On the home page to add a product to the cart, tap on the respective product to add it to the cart. You can add multiple products by tapping them up. To delete all the products from the cart tap the delete button.

Home

To increase the product count for a particular product in the cart, tap the three-dot menu to the right of the product and select the update quantity option.

It brings up a pop-up to change the quantity of the product. Tap the + or buttons to increase or decrease the quantity of the product. After confirming the quantity, tap the Update Quantity button.

update quantity

Here, you can also apply the discount by selecting the Add discount option from the three-dot menu.  After tapping the button, a pop-up appears where the cashier can select the type of discount to be applied as –

  • Fixed or Percentage
Fixed or Percentage

Discount Option –

After choosing the type of discount, the cashier can enter the discount amount as required and tap the ok button after that.

Discount Option

The discount will added to the cart.

discount added

Coupon Code –

When enter on coupon code icon it will show the active coupon code for you. Select the coupon code and apply the same.

Coupon-Code

As per the chosen code, the discount will apply.

Coupon Code added

To clear the products from the cart one at a time,  swipe toward the left-hand side of the respective product, and you will see a delete button. Tap on the delete button to remove the product from the cart.

delete-product

Category Selection

To change the category, tap on the three horizontal lines in the top left-hand corner.

Homepage

It brings up all the available categories. To reach a child category for a particular parent category, tap the right-pointing angle icon in front of that category.

Category

Tapping the right-pointing angle icon brings up the sub-category, and then you can reach the last child as well.

Category

Tapping the Bags will bring up the sub-child under that if any. Or the cashier can tap on the View Products in Bags to display all the products in Bags.

list end

It displays a complete list of watches under the Bags sub-child.

Homepage

Note: To reset the category to the default selected one, tap the three horizontal lines.

Search for Products

The cashier can search for the products by –

  • Product Name/Characters and
  • By product Barcode Scan

The cashier can easily search for the products by tapping on the area next to the search icon on the Home page.

Homepage

Product Name/Characters

Within the search, tab enter the name of the product that you are searching for and it will display back the results for the same.

search product

Barcode Scanner

The cashier needs to tap on the Barcode Icon that is next to the search box for searching the products using the barcode. This opens the camera on the device and the cashier can easily scan the product barcode to add it to the cart.

9.Barcode-Search

Order

Under this section, the cashier can check for the Online and offline orders that have been placed. To check the orders, tap the enter order ID field and fill in the order ID and the respective order will be displayed.

Online Orders

magento-2-pos-online-order

Tap the enter order ID field and fill in the respective order ID.

Online-Order-Search-Details

Now, you will see the particular orders that are placed. Tap a particular Order ID to display the order details for the same.

Online-Order-Search-Details

Here, the cashier can also print the invoice(depending on the option chosen – View PDF, WiFi Printer) for a particular order by tapping the Print button a the top right-hand side.

Online-Order-Invoice

Offline Orders

The cashier can even process a transaction in offline mode. This feature is great for areas where internet connectivity is weak. To check the offline orders for a particular ID, tap and enter the particular order ID under the offline orders. After this, you can see the offline order that has been placed.

Offline-Orders

Tap on an order number to check the details of the order.

Online/Offline Hold Cart – Process

The cashier can easily put a cart on hold if the situation requires. The cashier can put the current cart on hold to process another customer. To do so, the cashier can put the current cart on hold by tapping the Pause button on the top right-hand corner.

Homepage

Tapping the pause button brings up a pop-up for adding a note and then click on the proceed button to move your cart on hold.

Online-hold-cart

Tapping Proceed, the cashier can add a cart note for putting the cart on hold. After entering the note tap the proceed button.

Now you can check the hold cart for online orders.

hold cart

Now, the cashier can again add the hold-cart contents into the cart for checkout by first navigating to the Hold-Cart section, and for the respective order tapping the Resume button.

Online-hold-cart

Then, the POS agent clicks on the proceed button and selects the customer.

select customer

From here, the cashier can even Remove a hold cart by tapping the Remove button.

hold cart

Offline Hold Cart – The cashier can put the cart on hold in offline mode as well.

Homepage

You can enter the cart hold note and click on the proceed button to move further.

Online-hold-cart

The offline order will added in the hold section now the cashier can resume it or remove it as per their choice.

Flutter POS App

Click on the resume button the popup will show again to resume the order.

Flutter POS App

Tapping the Resume button adds the hold-cart to your Cart. For this, the cashier will have to Select proceed. After this, the hold-cart is added to the cart again.

offline_hold_cart1

After clicking on the remove button it will ask you permission to remove the order. Once you click on the Proceed button the order will be removed from the hold cart.

Checkout Process

After adding the products to the cart the cashier can tap on the Pay button.

discount added

Here, the cashier can see the default customer that is added from the admin backend panel. The cashier can also add a new customer by tapping the Customer Icon.

This brings up a section where the cashier can search for the customer or can add a new customer as well.

select customer

To add a new customer tap the Customer Add button. This brings up the section to enter the customer details. After entering the details, tap the save customer button to save a new customer.

Flutter POS App

This brings up the section where the cashier can tap the PLACE ORDER button to complete the order.

pos flutter app

Here, the customer has to pay the Grand Total amount in cash.

cash

After updating the payment.

cash

Note: if the customer is low on cash and wants to make the remaining amount, then the cashier can make use of the credit card button to receive the remaining amount for the order to be placed.

For this, the cashier will first enter the amount the customer is paying out in cash by tapping the Cash button which brings up a pop-up.

cash amount

Update payment Amount

Here, the cashier will enter the amount and tap the update payment button to update the amount that the customer is paying in cash.

Now, this updates the amount that the customer is paying in Cash as shown below in the snapshot.

pos flutter app

Here, enter the amount the customer is paying via credit card, enter the 16 digits of the customer’s credit card, and tap the UPDATE PAYMENT button.

card

Now, the cashier can see the updated details showing the amount the customer is paying in cash and via cardCash Payment$100 and Card Payment$41.

both

Before placing the order, the cashier can also add a note for the order to be placed. To do so, tap the add order note button which brings up a pop-up to enter the note. After entering the note, tap the Add button.

cash

Lastly, tapping the PLACE ORDER button completes the order.

order placed

Here, the cashier can also print the invoice by tapping the PRINT INVOICE button.

invoice

Order Return – Credit Memo

It might happen that a customer sometimes wants to return the items within an order.  To do so, the cashier will navigate to the Order section. Here, select the order to create its credit memo and tap the order Return button on the bottom.

credit memo

Selecting the checkbox brings an option to update the return quantity for the respective items in the order.

Now, the cashier can easily update the return quantity for the items in the order as required. After updating the quantity, tap the create button and select the check return to the stock checkbox.

create memo

After tapping the create button, the credit memo gets generated.

credit memo

Moreover, the cashier can check the details of the same by tapping the Credit Memo icon on the top right which brings up the details of the credit memo.

credit memo

Now, the cashier can check the details for the same.

Flutter POS App

Cash Drawer

Under here, the cashier will be able to check the close counter, Today cash, and Sale history pages.

close draw
close drawer

Check today cash section to check the opening drawer amount, cash sale, and other payment sales.

today sale

Check previous sale history.

sale history

Reports

The cashier can check the reports here on a daily, weekly, or monthly basis.

Daily Report – It will show gross revenue and order in graphical form.

report

Weekly Report –

report

Monthly Report –

report

More Section

Here, the cashier will be able to refresh the POS which includes refresh the Hold orders, Orders list, cash drawer, product list, and category list by tapping on the refresh icon that’s present in front of the respective options.

store refresh

Here, the cashier can synchronize the offline hold orders, orders lists, cash drawer, product, and category list by tapping the refresh icon. This syncs all mentioned with the server for a POS update.

Refresh-POS1

To go back to the home page, the cashier can tap the <Home icon on the bottom left-hand corner, log out tap the Icon on the top right-hand corner.

Flutter POS App

Under the Select Language option, the cashier can change the language of the POS system. After tapping on the drop-down option the cashier can see the different languages to choose from and can select one as per need.

change language

Under the Printer option, the cashier can select the options to view the PDF and WiFi.

printer

After tapping the Printer drop-down selection, the cashier will be able to select –

  • View PDF – When this option is selected, then after placing the order, the cashier can view the PDF of the Invoice.
  • WiFi Printer – When this option is selected, then after placing the order the cashier can print the invoice using a WiFi-connected printer.

However, that’s much about the Adobe Commerce Mobile POS App(Flutter POS App)  For any queries or doubts related to the app get back to us at [email protected] or raise a ticket at our HelpDesk System.

Current Product Version - 5.1.0

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


4 comments

  • ABSAR
    • Zeba Hakim (Moderator)
  • [email protected]
    • Nishad Bhan (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content