Introduction To POS Saas- Flutter POS Inventory Software

App + Web + Super Admin

Pos Saas - POS SaaS is a cutting-edge Point of Sale (POS) solution delivered as a Software as a Service (SaaS)
application. Developed using the Flutter framework for a seamless cross-platform experience, it integrates
seamlessly with Firebase to provide a robust and scalable backend. Utilizes Flutter for a responsive and consistent
user experience across iOS andAndroid devices. Real-time data synchronization ensures that your data is always
up-to-date. Access real-time analytics and reports for a holistic view of business performance. Multiple admin roles
with customizable permissions for each user.Efficiently manage users, roles, and access levels for optimal
security. Easily add, edit, and organize products with a user-friendly interface. Categorize products for efficient
inventory management. Real-time tracking of stock levels to prevent overstock or stockouts. Automated alerts for
low inventory.

Getting Started
This guide will get you started with the setup of the application on your local machine.Now that you have set up
your
server, it’s time to set up the mobile application to consume the data from your website. This guide will help you
to
connect the application with your server.

Please make sure that you follow the steps mentioned in this section very carefully.
If you miss some steps it may lead to unwanted behavior or errors.

Prerequisite:
● Android Studio: 2024.1.1
● Flutter version: 3.22.3 (min)

1
 Install Flutter

Before you can start testing your application, you will need to install Flutter on your machine.

Please install Flutter version +3 to avoid any dependency issues.

Setting up an Android Emulator or an iOS Simulator which will run your application on your local machine is
part of the flutter installation.

After you've installed flutter then please follow the steps from the following link to setup
your dev machine: https://flutter.dev/docs/get-started/install

Please make sure that you follow each and every step that is mentioned in the flutter installation
guide properly

Set Up an editor
The recommended editor is Android Studio. Follow the guide from the link to setup an editor:
https://flutter.dev/docs/get-started/editor

Flutter Doctor
After you've followed through all the steps from the Flutter installation guide above, you
need to check your installation for any issues that might cause some problem. You can do this
by following the command below:

flutter doctor

Note that the summary above has all tick marks. If you see a cross (X) in-front of an option then follow the
steps mentioned below that option to complete your installation. If you see [!] No Connected device
(0 available) do not worry, you will open an iOS Simulator or an Android Emulator later in the setup
process which will resolve this.

2
 Modify App

Once you installed Android Studio on your machine, you can start changing the required files for App
from android studio by following this guide.

Open app in Android Studio

To modify the required settings for your POS Saas applications, you need to open it in
Android Studio. Follow the steps below to open the application in android studio.

1. Open Android Studio on your machine.

2. From the Welcome to Android Studio screen, click on Open.

3. Choose the Pos Saas - App / Pos Saas Web/ Pos Saas super admin directory and open
it. Note that you have to set the web first. It is located at download or the folder you selected
when it was downloaded from the marketplace. This will open the application source code in
android studio.

Now you are ready to make the necessary changes in the application files by following the
guide below.

3
 Get Flutter Packages

Now you have to open tool option from the topbar and from the opening menu you have to
choose Flutter and then Flutter Pub Get & press or select that.
Also if required, you have to give the sdk path, & allow for the configuration.

1. You can do it from your terminal also. For that you have to open the terminal from the topbar.

Select:
View → Tool Windows → Terminal as shown in the Next figure.

4
Now type flutter pub get on terminal and press enter.

This will get the dependencies for the application.

Make sure that you are connected to the internet while performing this task

Build and Run App

All below steps must be followed to build and run applications.

1. Locate the main Android Studio toolbar.

2. In the target selector (<no device selected>), select an Android device for running the app. Or if you want to
run the web app select the available browser from the dropdown menu. If none are listed as available,
select Tools > Android > AVD Manager and create one there. For details, see Managing AVDs.
3. Click the run icon in the toolbar, or invoke the menu item Run > Run.

After the app build completes, you’ll see the app on your device.

5
 How to update this Project Version

To update your project version, go to the pubspec.yaml file. And click on the Pub upgrade button at the top.
It will automatically update all the packages version.Make sure your pc is connected with the internet.

To update your project version and dependencies in a Flutter project, follow these steps:

1. Open the pubspec.yaml File:

○ Locate the pubspec.yaml file in the root directory of your Flutter project.
○ Open it in your preferred text editor or IDE.
2. Update the Project Version:
○ Find the version field at the top of the pubspec.yaml file.
○ Change the version number to your desired version. For example: version: 1.1.0+2
○ The version format is major.minor.patch+build.

Run pub upgrade:

● Ensure your computer is connected to the internet.

● In your IDE, locate and click the Pub upgrade button. This button is typically found at the top of the editor
or in the pubspec.yaml tab.
● Alternatively, you can run the following command in your terminal from the project directory:

flutter pub upgrade

This command updates all packages to the latest versions allowed by the constraints in pubspec.yaml.

6
 POS Saas Super Admin

Project Structure:

● Images: Apps/widgets/snippets images as well as appIcon are stored here.

● Lib: Applications main files and directories are located here.
○ Screen: Full app’s UI codes are stored here.
○ Widgets: All the reusable widgets are stored here, like(Top bar, Side bar).Also
the constant file located in the folder. Where the all the colors are stored which is
used to design the app.
○ In firebase_option.dart all the code stored which is related with the firebase.From
here you can easily change the firebase credentials.
○ main.dart: All the routes have been declared here.

7
 Firebase Setup

Step 1

First of all you have to go to https: console.firebase.google.com/

and click on Go to the console which is on the right side of the top bar menu.

After tapping on the Go to console a new page will be open.

8
Now you have to create a new project which you want to connect with the app. Click on Add
project to create a new one.

Here you have enter a name for your project.then click on the ckeck box and press continue
to go to the next step.

Here if you want you can enable or disable the google analytics for your project. We
recommended you to disable it for now and press continue.

9
A new project is created for you. Press continues to view the project.

The environment will look like this.

10
Step 2

Note that It is required to complete all of the steps one by one before generate the credentials
for the app.

Now from the sidebar click on the Build section. then select the Authentication from the list
inside the build section.

Then a new page will be open like this with the Title named Authentication.
Press the get started to go to the next step.

A new page will appear with a tab bar. Make sure that you are in the second tab (Sign-in-
method).

11
Select Email/Password from the list.

Enable the Email/Password switch and hit the save button.

12
A new page will be open like this. Here Email/Password are enabled now.

Now the Email/Password is enabled. To setup the project without any error make sure
that This authentication type is enabled.

13
Step 3

Now from the sidebar click on the Build section. then select the Realtime Database from the
list inside the build section. And press on the Create Database button.

Select any location from the dropdown button and hit the next button.

14
Here please select the radio button Start in text mode and press Enable.

Now in Realtime Database page, please select the Rules tab and change the read and write
section to the true as shown in the picture. And press on Publish.

15
Step 4

Now from the sidebar click on the Build section. then select the Storage
from the list inside the build section.

A popup will be arise, here select the radio button for Start in test mode and press the next
button.

16
And then the second popup will arise. And choose the cloud storage
location from the dropdown. And press on the Done button.

Now in the Storage page, go to the second tab named Rules. And Increase the date. Initially
it gives only 1 month but you can increase it as you want

17
Don’t forget to publish it.So press on publish button.

Step 5

Now go back to the Project overview section and press on the web button.

18
Now write a name for the app. No need to check the firebase hosting for this project and
press on the Register app button to go to the next step.

Then it will generate the all credentials for the app which you have to copy and store in a
safe place. Don’t forget to copy the credentials.

Copy all the codes which is inside the firebaseConfig (Which credentials generate for your
project) & press the Continue to console button. For example you can see the screen below.

19
Step 6

Now again come to the sidebar and go to the Authentication section.

Here you have to add a new user for your project. Press Add user button.

Enter a valid email & password to add a user. And note the email and
password to use later.

Keep in mind that without this email you can’t log in to the Super Admin app panel.

20
Step 7

To complete setup you have to go back to your project file which you opened in your
environment (Android Studio, Visual code or etc).

You have to open the dart file named “firebase_options.dart”.

Location: Project/lib

(You can also see the project structure to find it easily)

After open the firebase_option.dart file, come to the last section of the code, marked with the red
color and paste all the credentials.(api key, authDomain, databaseURL, projectID, storageBucket,
messagingSenderId,appId) which you copied in the last section.
Make sure that you have pasted the correct code.

Now you have to open the constant.dart file.

Location: Project/lib/screen/widgets/Constant Data/constant.dart

After open the constant.dart, you have to change the email address.Replace the email
[email protected] and write the email address which you used to create the user in
firebase authentication panel. Make sure that you have written the valid & the same email.

21
Then you have to run the app. From the top bar of your environment select a platform
were you want to run the application. And press on the Run button

After opening the app enter the user's email and password. Which you have given to
add a new user.
After Login you have to follow some steps and it is required to setting up your app
successfully.

22
After setup your firebase please visit all the menu from sidebar at least one time.It is
required for the first time only.

Keep in mind, Add at least one category if the category list is empty.

23
Build File for Server Upload

To build the web application to upload the server, you have to open the terminal section.
With android studio you can open it from the bottom bar of the environment.
In terminal write the command

flutter build web --release --web-renderer=html

and press enter.

It will take some time to build the file.After build the app, you have to go to the directory
where you store the file. And open the web folder which is inside the build folder.

Path: pos-saas-superadmin/build/web

Now compress the web folder and extract it to the server

24
Make sure you select the web folder which is inside the build folder. Not outside the build
folder.

25
 Upload web file to server

Please browse the cPanel url from your laptop/pc and login with your credentials.

A new screen will appear with various menu options. From there, select and
open "File Manager."

26
Now upload the server file that you built for your POS SaaS web app. You can find it
in the build folder.

First, compress the web file you built, then proceed to upload it. You can move the file
from the build folder to another location to make it easier to find. You can name the
folder anything you like, but ensure it's easily identifiable for future reference.

27
After uploading the file, you will see it in your File Manager. Then, extract the file in
this folder to make all the files visible.

To extract the file, place your mouse cursor over the file you uploaded, right-click on
it, and select "Extract" from the menu to extract the contents.

28
Now, you will be able to see the full contents of the files like this.

29
 Change the App logo
To change the logo in the easy way, you have to make a logo for your app, and rename it to
Logo.png

Now open the project, copy your logo from the local folder and paste it to the images
directory in the project.

It will give you a warning to replace or override the image. You have to agree for that. And
the image will replace the previous image.

30
 App name change

To change the app name which uses inside the app, you have to go to the constant.dart file
and change the name as you want.

After doing all the tasks successfully, without any error then build the file for server upload.

End of the Super Admin setting.

31
 POS Saas Web

Open and run the project on you environment.You can follow the previous
instructions to open.

Project structure:

32
● Images: Apps/widgets/snippets images as well as appIcon are stored here.
● Lib: Applications main files and directories are located here.
○ Screen: Full app’s UI codes are stored here.
○ Widgets: All the reusable widgets are stored here, like(Top bar, Side bar).Also
the constant file located in the folder. Where the all the colors are stored which is
used to design the app.
○ In firebase_options.dart all the code stored which is related with the
firebase.From here you can easily change the firebase credentials.
○ main.dart: All the routes have been declared here.

33
Now open the URL https: console.firebase.google.com/
and click on Go to the console which is on the right side of the top bar menu.

And choose Your created project, which you created for the
POS Saas Super Admin & open it.

34
Step 1

Press on the Project overview section and press on the web button.

Now write a name for your web app. No need to check the firebase hosting
for this project and press on the Register app button to go to the next step.

Then it will generate the all credentials for the app which you have to copy and store
in a safe place. Don’t forget to copy the credentials.

35
Copy all the codes which is inside the firebaseConfig (Which credentials generate for
your
project) & press the Continue to console button. For example you can see the screen
below.

36
Now open the dart file named “firebase_options.dart”.
Location: Project/lib

(You can also see the project structure to find it easily)

After open the firebase_option.dart file, come to the last section of the code, marked with the red
color and paste all the credentials.(api key, authDomain, databaseURL, projectID, storageBucket,
messagingSenderId,appId) which you copied in the last section.
Make sure that you have pasted the correct code.

37
Then you have to run the app. From the topbar of your environment select a platform
where you want to run the application. And press on the Run button

After opening the app, register an account. If the registration is complete successfully,
it will open the web dashboard.

38
This is the dashboard screen of the POS SAAS web.

To make it live you have to build the web html file & upload it to the server.

39
 Build File For Server Upload
To build the web application to upload the server, you have to open the terminal section.
With android studio you can open it from the bottom bar of the environment.
In terminal write the command

flutter build web --release --web-renderer=html

and press “Enter”.

It will take some time to build the file.After build the app, you have to go to the directory
where you store the file. And open the web folder which is inside the build folder.

Path: salespro-saas-super-admin/build/web

Now compress the web folder and extract it to the server.

40
Make sure you select the web folder which is inside the build folder. Not outside the
build folder.

41
 Upload admin web file to server

Open the cPanel from your laptop/pc and login with your credentials.

A new screen will appear with various menu options. From there, select and open
"File Manager."

42
Now upload the server file that you built for your POS SaaS web app. You can find it
in the build folder.

First, compress the web file you built, then proceed to upload it. You can move the
file from the build folder to another location to make it easier to find. You can name
the folder anything you like, but ensure it's easily identifiable for future reference.

43
After uploading the file, you will see it in your File Manager. Then, extract the file in this folder to make all
the files visible.

To extract the file, place your mouse cursor over the file you uploaded, right-click on
it, and select "Extract" from the menu to extract the contents.

44
Now, you will be able to see the full contents of the files like this.

45
 Change the App logo

To change the logo in the easy way, you have to make a logo for your app, and
rename it to
Pos.png

Now open the project, copy your logo from the local folder and paste it to the images
directory in the project.

It will give you a warning to replace or override the image. You have to agree for that.
And the image will replace the previous image.

46
 App name change

To change the app name which uses inside the app, you have to go to the
constant.dart file and change the name as you want.

After doing all the tasks successfully, without any error then build
the file for server upload.

47
 POS Saas Mobile App Setting
Run the app like the web and super admin in any environment.

Then setting up the firebase with the app. For this you have to go to the firebase
console
again. And go to the project which we created for the POS saas web & super admin.

Now click on the Add app button to connect the app with the firebase.

48
Select the android button from the list.

A new page will appear and there you have to give all the information.

49
For android package name you have to go to your environment. And go to the
AndroidManifest.xml file. And at the top of the screen you can see the package
name.

path: Project/android/app/src/main

Copy the package name (inside the double quotation)from there and paste it to the Android
package name and press on Register App

50
51
Then it will generate a google-services.json file.Which you have to download and press on
next again next & then Continue to console.Don’t forget to download the file.

Now copy the google-service.json file, and open your project. Paste the google-service.json
file inside the app. To do it easily just select the app directory and paste the file.

Now go to the environment and run the project.

52
 Change the app name

To change the app name you have to go to the AndroidManifest.xml file.

path: Project/android/app/src/main

After opening the file change the android:label =”AppName”

And build the app. The App name will be changed.

53
 Change the app logo

For this first you have to design a logo for your app. Then to create different sizes of logo
easily, you have to go to http://appicon.co. Then drag and drop or upload your image file to
the site. And select only Android from the list. No need to give any file name. And click on
generate. It will generate a zip file for you.

Now Unzip the file and enter the folder.

54
Copy marked these 5 folders. And go to the environment where the project is
opened.

55
Now from the project go to the res directory.
path: Project/android/app/src/main/res/

Now select the marked five folder and paste the folder you have copied from the zip
and replace it.

Now build the APK. It will show the new logo.

56
Change Onboarding image:

● Open images folder

57
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 images with the following filenames:

○ First Image: onboard1.png
○ Second Image: 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.
● 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.
Project version Update:

58
 Build release apk

To build an APK, go to the menu section of your environment, then select the Build
section
and move the cursor on Flutter and then select the Build APK. That's all. After
sometimes it
will build a release APK file.

After completing the build process, go to the build directory of the main project
directory. It will build a new release apk file.

path: build/app/outputs/release

Inside the release directory you can find the release.

To publish your app in google play store you can follow this instruction:
https://docs.flutter.dev/deployment/android

59
 Help & Support

Support skype: https://join.skype.com/invite/kEPqImF1Vfqk

Support email: [email protected]

You can expect an answer within 24-48 hours, usually as soon as possible in the order they
were received.

60