Reading list Switch to dark mode

    WooCommerce Flutter Native POS Mobile App

    Updated 6 December 2023

    WooCommerce Flutter Native POS Mobile App allows the store owners to manage the POS system just by operating the mobile phones.

    The sales agent can generate invoices, complete orders, and make payment using their mobile devices very easily.

    Moreover, this is a flutter native app that allows seamless operation in both the platforms that are iOS and Android.

    This system will be most usable in case the physical stores have a long queue of people which makes the available sales agent insufficient.

    In such emergency cases, the extra sales agents can work using their mobile phones and manage the complete scenario in just minutes, as it will make the checkout process faster.

    Searching for an experienced
    Woocommerce Company ?
    Find out More

    The complete system is synchronized so the changes done at any end will be reflected in all the other ends like the web store. Meanwhile, let’s have a basic knowledge about Flutter Native.

    Check the Flutter Native POS Mobile App workflow –

    What is Flutter ?

    Flutter is a powerful technology, or we can say a tool backed by Dart language packed with a powerful mobile framework that can be used in both iOS and Android applications.

    Flutter is often used with DART, which is an object-oriented programming language by Google.

    The Flutter development tools come with a graphics library and material design, and the Cupertino design allows faster operations of the app and also gives the app a stunning look, irrespective of its operating platform!

    The biggest advantage of Flutter is that it can be used to create cross-platform apps.

    Using Flutter, one can create iOS apps, Android apps, Websites, and many cross-platform software in just one go, there is no need to write code for different platforms.

    Note: The main configuration of this WooCommerce Flutter Native POS Mobile App will be done from the web end plugin so it is a must to purchase and install the Point of Sale System for the WooCommerce plugin first.

    Features

    • Real-Time Synchronization
    • Easy Product Search
    • Interactive Home Page
    • Flutter Native App
    • Online Mode
    • Print Invoice
    • Discount Coupon
    • Invoice Generation
    • SKU Product Search
    • Cash Drawer Checking
    • Order List
    • Create New Customers
    • Manage Printer
    • Seamless Checkout
    • Change product quantity from the cart page

    Mobile App Functionalities

    Initially when the sales agent starts the mobile application, then the first requirement is to log in to the mobile application.

    Login and Cash Drawer

    First of all, the admin will enter the login credentials in the mobile application. The credentials will include the Username/ Email and Password.

    Just after login the sales agent will navigate to the Cash Drawer page and enter the Opening Amount and click on the Submit Button.

    mockup-2023-11-17T125836.824
    mockup-2023-11-17T125843.225

    This opening amount will be added to the cash drawer of the sales agent that can be used to make the cash returns to the customers in future sales.

    Homepage

    Further, the homepage of the mobile application includes four options in bottom Navigation bar, that are as follows:

    • Home
    • Orders
    • Categories
    • More

    Home

    The sales agent will be able to see the list of products under this section. In the starting, the sales agent can see NO SALE written on the floating rectangle box as shown in the left image below.

    Whereas, if the sales agent will click on the desired product then the product will get added to cart and its price will increase accordingly. Further, the subtotal will be visible in the rectangle box as shown in the right image below:

    mockup-2023-11-17T125849.384
    mockup-2023-11-17T132506.843

    The sales agent can click on the product multiple times to increase the quantity of the same. The quantity of multiple product types added to the cart will also be visible in the same floating box.

    Search Product

    Moreover, the sales agent can also search the desired product by typing its name in the search box as shown in the image box.

    mockup-2023-11-17T125856.216-2

    Orders

    The sales agent can click on the orders option for checking the previous customer orders. The order list includes brief details like Order ID, Ordet total, and Date of order as shown in the left image below:

    mockup-2023-11-17T125902.601

    Further, the sales agent can view any order by clicking on it. The details of order will include the date of order placed, items ordered, customer notes, coupon details, and price details.

    Generate Invoice

    By clicking on the Generate Invoice button, the sales agent can point the order invoice for the customer.

    Further, the sales agent will get directed to the print pdf page and the sales agent can connect with the desired printer. And simply by this, the sales agent can print invoices using the mobile application.

    mockup-2023-11-17T125910.935
    mockup-2023-11-17T125918.682

    Note: In case the printer is not available to work, then the sales agent can also save the PDF and send it via mail to the customer.

    Categories

    Under the category option, the sales agent will find the list of categories available in the store. After viewing any specific category its respective products will be listed.

    For example, the Music category is viewed and the list of music albums available are visible as shown in the right image below:

    mockup-2023-11-17T125924.081
    mockup-2023-11-17T125931.026

    More

    Under this option, the sales agent can see some more amazing functionalities related to the WooCommerce Flutter Native Mobile Application. These are as follows :

    • Printer
    • Counter
    • Customers
    • Reset
    • Account
    • Logout
    mockup-2023-11-17T130636.048

    Printer

    This is one of the most amazing features, as sales can connect the available printer to the mobile application and print the invoice for the customers.

    The best point is this, even after using the mobile application, the sales agent can perform all the basic POS system activities.

    After clicking on the printer option, the sales agent will navigate to the Choose Printer page. There the sales agent can select the WIFI Printer option and connect to the available printer to print the invoice.

    mockup-2023-11-17T130636.048-1
    mockup-2023-11-17T130444.784

    Note: The app supports WIFI printer connectivity for now. In case you want the Bluetooth printer connectivity, then it will be done by paid customization. For that you can connect with our team.

    Counter

    Under this section, the sales agent can check current amount in the drawer. The sales agent can close the drawer when they are for the day.

    mockup-2023-11-17T130548.403

    Customers

    Under this section, the sales agent can check the list of all the customers created from the backend or using this mobile application.

    The sales agent can see the name and email for each customer and can also search for the desired customer by typing the name in the search box.

    Using the delete icon, the sales agent can also delete the customer if any such requirement raises up.

    mockup-2023-11-17T130555.224

    By clicking on the Add Customer icon on the top right corner, the customer can create a new customer and add it to the existing list.

    The basic details required are Name, Email, and Address to create the new account as shown in the image below:

    mockup-2023-11-17T130624.056
    mockup-2023-11-17T130629.471

    Reset

    The Reset button in Point Of Sales gives the power to the POS user to refresh the app’s frontend. After clicking the reset button, the frontend will be refreshed while removing the product from the cart and the sales agent will be redirected to the order list page with an empty cart as shown in the right image below:

    mockup-2023-11-17T130636.048-2
    mockup-2023-11-17T130643.944

    After resetting the app, cash drawer amount will again reach to the initially added amount by sales agent.

    Account Information

    Under the account information section, the sales agents will check the details of their own account. They can also reset their password.

    mockup-2023-11-17T130759.886

    Logout

    By clicking on the logout option the sales agent will simply get logged out from the mobile application.

    Checkout Process

    The sales agent will simply make the checkout process as shown in the process below. First of all the sales agent will add the products to the cart from the list of products as shown in the image below:

    mockup-2023-11-17T130807.708

    The subtotal will be visible in the floating bar as shown in the above image. Click on the button on which the subtotal is visible and it will redirect the sales agent to the cart page. Here the sales agent will see the list of specific products.

    The sales agent can also apply the discount code and under that, the price details will be visible. Price details include the Subtotal, Discount, Tax, and Total amount. The discount can be applied using the coupon code and its details will be visible under price details.

    mockup-2023-11-17T130821.498
    mockup-2023-11-17T130828.900

    Add Product Quantity

    Meanwhile, the sales agent can also change the quantity of the product from, cart page by clicking on the quantity dropdown. Also, by clicking on the More option the desired quantity can be added just by typing as shown in the images below:

    mockup-2023-11-17T130839.653
    mockup-2023-11-17T130845.481

    Also, the sales agent can also sect the customer for the respective order by clicking on the customer option. The list is shown in the image below:

    mockup-2023-11-17T130852.561

    Further, the sales agent will process the payment by clicking on the CONFIRM AND ACCEPT PAYMENT button as shown in the image below. After that, the list of payment methods will be visible like Paypal, Stripe, etc.

    After selecting the mode of payment, the sales agent will navigate to the Collect Cash page. There the sales agent will enter the received amount. The sales agent can also add the customer note for the order that will be visible with the order details.

    mockup-2023-11-17T130859.099
    mockup-2023-11-17T130907.140

    Finally, after clicking on the DONE button, the order will be completed and the customer will navigate to the order success page.

    An email is also sent to the customer for order details. The success page shows the Cash Collected, Order Total, and Change Due. The customer can also click on the Back To Home button for navigating to the home screen.

    mockup-2023-11-17T130914.488

    Eventually, when the order is complete, the sales agent can check the drawer amount increases. Because the order amount adds to the drawer amount in POS mobile app.

    mockup-2023-11-17T130929.898

    That’s all for the WooCommerce Flutter Native POS Mobile App. If you have any queries or suggestions regarding the extension then you can get back to us at webkul.uvdesk.com.

    Current Product Version - 1.0.0

    Supported Framework Version - WooCommerce 3.0.x, 3.1.x, 3.2.x , 3.3.x,3.4.x, 3.5.x, 3.6.x, 3.7.x, 3.8.x, 3.9.x, 4.0.x, 4.1.x, 4.2.x, 4.3.x, 4.4.x, 4.5.x,, 4.6.x; Wordpress - 5.0.x, 5.1.x, 5.2.x, 5.3.x, 5.4.x, and 5.5.x

    . . .

    Leave a Comment

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


    Be the first to comment.

    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