Reading list Switch to dark mode

    Magento 2 Mobile POS App(Flutter POS App)

    Updated 31 January 2024

    What is the Magento 2 Flutter POS App?

    Magento 2 Flutter POS App 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?

    Flutter 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 Flutter POS App 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:

    Installation Of Show Price After Login for Magento2

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

    1.-Login-Page

    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.

    2.Open-Counter-Popup

    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.

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

    3.Homepage1

    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.

    4.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
    5.Discount-popup

    Discount Option –

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

    5.Discountpopup1

    The discount will added to the cart.

    Discount-homepage-2

    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-Code1

    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.

    6.Delete-product

    Category Selection

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

    3.Homepage-1

    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.

    7.Category

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

    7.Category1

    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.

    7.Category2

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

    7.Category3

    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.

    3.Homepage

    Product Name/Characters

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

    8.Product-Search

    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

    10.Online-Orders

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

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

    11.Online-Order-Search-Details-1

    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.

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

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

    14.Online-hold-cart3.png

    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.

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

    14.Online-hold-cart1

    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.

    14.Online-hold-cart2

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

    Online-hold-cart1-1

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

    Flutter POS App

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

    image-134

    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.

    Flutter POS App

    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.

    Flutter POS App

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

    Flutter POS App

    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. Here, the customer has to pay the Grand Total amount in cash.

    Flutter POS App

    Note that, 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.

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

    Flutter POS App

    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.

    Flutter POS App

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

    Flutter POS App

    Moreover, after setting up the amount that the customer is paying in cash, the cashier can tap the CREDIT CARD button to enter the remaining amount to be received from the customer’s credit card.

    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.

    Flutter POS App

    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$23

    Flutter POS App

    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.

    Flutter POS App

    Lastly, tapping the PLACE ORDER button completes the order.

    Flutter POS App

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

    Flutter POS App

    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.

    Flutter POS App

    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.

    Flutter POS App

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

    Flutter POS App

    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.

    Flutter POS App

    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.

    Cash-Drawer-Close-Counter-1
    Cash-Drawer-Close-Counter1

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

    Cash-Drawer-Today-Cash

    Check previous sale history.

    Cash-Drawer-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-Day

    Weekly Report –

    Report-Week

    Monthly Report –

    Report-Month

    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.

    Refresh-POS

    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.

    Flutter POS App

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

    Flutter POS App

    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.

    . . .

    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