Magento 2 Mobile POS App(Flutter POS App)

Flutter POS App is a JS(Javascript) library created by Facebook. It’s used for building user interfaces for single-page applications. Flutter POS is also used for handling the view layer for web and mobile apps.

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

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.

Also, if you know 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.

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.

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 Open Store button.

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.

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, Hold–Cart, CashDrawer, 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.

To increase the product count for a particular product in the cart, tap the numeric number to the left of the product.

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.

Here, you can also apply the discount by tapping the Discount button.  After tapping the button, a pop-up appears where the cashier can select the type of discount to be applied as –

• Fixed or Percentage

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

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

Category Selection

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

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.

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

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

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

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 –

• Entering the Product SKU
• 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.

Product SKU:

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.

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

Under this section, the cashier can check for the Online and offline orders that have been placed. To check the orders, tap the calendar and select the date range(Start and End date) for which you want to check the orders and the respective list of orders will get displayed.

Online Orders

Tapping the start date brings up a pop-up. Set the starting date and click Set after that.

To set the end date select the end date and then tap the Set button.

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

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

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 date range, tap the start and end dates under the offline orders. After this, you can see the list of offline orders that have been placed.

Tap on an order number to check the details of the order. Here, the cashier can synchronize the offline orders by tapping the refresh button on the top right-hand end. This syncs the order with the server for a product update.

The cashier can easily put a cart on hold if the situation requires so. The cashier can put the current cart on-hold so as 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.

Tapping the pause button brings up a pop-up confirming whether to move your Cart To Hold or not.

Tapping Yes, Move asks the cashier to add a note for putting the cart on hold. After entering the note tap the UPDATE NOTE button. This empties the current cart contents.

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 tap the Cart Icon on the top. From here, the cashier can event delete a hold-cart by tapping the delete button.

Tapping the re-cart button adds the hold-cart to your Cart. For this, the cashier will have to Select Yes, Replace.

After this, the hold-cart is added to the cart again.

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

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 and here the cashier can search for the customer or can add a new customer as well.

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 Tick icon to save the new customer.

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.

Before proceeding further, the cashier can also edit the customer’s address by tapping the address on the left. After making the changes, the cashier can tap the Tick icon to update the customer’s address.

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.

Update payment Amount

Here, the cashier will tap the Refresh button to update the amount that the customer is paying in cash and then tap the UPDATE PAYMENT button.

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

The cashier can also apply the coupon code by tapping the Apply Coupon Code option. Here, enter the coupon code and then Tap Apply to apply it.

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 last 4 digits of the customer’s credit card, and tap the UPDATE PAYMENT button.

Now, the cashier can see the updated details showing the amount the customer is paying in cash and via card.  Cash Payment – $100 and Card Payment – $9.33

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

Lastly, tapping the PLACE ORDER button completes the order.

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

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 Refresh button on the top.

Tapping the refresh button 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 Tick icon.

After tapping the Tick icon, the credit memo gets generated.

Moreover, the cashier can check the details of the same by tapping the Credit Memo List which brings up the details of the credit memo.

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

Tapping the short detail opens up the complete description of the credit memo.

Under here, the cashier will be able to check the In Cash and Out Cash details for any of the days by making use of the calendar. Apart from that, the cashier can also check the Opening and Closing Balance.

To check the details of the cash drawer for a particular day in the calendar, tap the respective date and you can check the details for the In Cash, Out Cash, opening, and closing balance.

Here, the cashier will be able to refresh the product list and the category list by tapping on the refresh icon that’s present in front of the respective options.

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

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

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

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.
• USB Printer – When this option is selected, then after placing the order the cashier can print the invoice using a USB-connected printer.