Documentation

(PCES International Mobile App)

Ivhan Christopher M. Salazar

[email protected]
09669448658
Feb 2, 2024
Environment Setup:

Git
- https://git-scm.com/download/win

Android Studio - for AVD or Android Virtual Device

Visual Studio Code for the Coding

Download VS Code Extensions

- Flutter
- Dart

Firebase – Database

Flutter SDK
- https://docs.flutter.dev/get-started/install

How to Setup Flutter SDK

1) Download latest SDK version
2) extract the zip file
3) Go to C:\ and make a new folder named src
4) Go to the Environments > User Variables > Path > New
5) Go to the Environments > System Variables > Path > New
Firebase:
Spark Plan - Free but has limited features like
- 10 SMS sent per day
- 50k/month Monthly Active users
- Only 1gb total of data for storage (Pictures and such)

Blaze Plan
- Varies depending on how many read writes happened.
- Post Paid, you need to pay after a month or else the project will downgrade to spark plan and
some functions will not function

Deployment:
Firebase App Distribution (For app testers)

APK – Free (Use Android Studio to Deploy)

Android - 25$ (One-time) for a Google Play Developer Console, one-time payment and you can
upload limitless application if you want.

IOS - 99$ (Annually) for Apple Developer Program

Flutter File Names:
main.dart – The heart and soul of the Flutter project. This is the initialization point of the project.
This is also know as the index.html or index.php but for flutter.
pubspec.yaml – This is where you install the packages/dependencies needed for your project
get_started_pages.dart – This is the Get Started Pages.
applicant_registration.dart – This is the Send OTP Page.
email_sender.dart – This is the page for the OTP sending and OTP Modal.

Registration Pages:
Terms – Page for Terms and Conditions
Page 1 – This includes the Job Title, Employment Status, Shifting Schedule, Job Location, and
Expected Salary
Page 2 – This includes the username, first name, last name, password, confirm password, age,
mobile number, address, currently employed, immediately available, OFW experience, driver’s
license.
Page 3 – Educational Attainment
Page 4 – Work Experience
Page 5 – Skills
Page 6 – Language
Page 7 – Personality Traits
Page 8 – Cover Letter
Dependencies/Packages:

cupertino_icons: ^1.0.2
A package that provides a set of Cupertino (iOS-style) icons for Flutter applications. It's useful
for apps aiming to mimic the iOS design language.

http: ^1.1.0
This package allows you to make HTTP requests to fetch data from the internet, submit forms,
and more. It's a fundamental package for interacting with REST APIs.

flutter_secure_storage: ^9.0.0
Provides a way to securely store data locally on the device. Data is encrypted using AES
encryption on iOS and Android, making it suitable for storing sensitive information like tokens
and credentials.

shared_preferences: ^2.2.2
A wrapper around platform-specific persistent storage (NSUserDefaults on iOS and macOS,
SharedPreferences on Android) for storing simple data (key-value pairs). Ideal for lightweight
data storage like user settings.

flutter_svg: ^2.0.9
Enables the rendering of SVG (Scalable Vector Graphics) files in Flutter applications. This is
useful for displaying high-quality vector graphics that scale cleanly to different sizes.

mailer: ^6.0.1
A package for sending emails from Dart code using SMTP servers. It supports attachments,
HTML emails, and custom headers, making it useful for apps that need to send emails directly.

flutter_dotenv: ^5.1.0
Allows Flutter apps to load configuration variables from .env files at runtime, which is helpful
for managing environment-specific settings (like API keys) without hard-coding them into the
source.

random_string: ^2.3.1
Generates random strings of specified lengths and patterns. Useful for creating unique identifiers,
passwords, or any other use cases requiring random string generation.

dropdown_button2: ^2.3.9
An enhanced version of Flutter's original DropdownButton with more customizable features. It
provides additional options for styling and controlling the behavior of dropdown menus.

intl: ^0.17.0
Provides internationalization and localization facilities, including message translation, plurals
and genders, date/number formatting and parsing, and bidirectional text. Essential for apps
supporting multiple languages.

image_picker: ^1.0.5
A plugin for picking images from the device's camera and gallery. It's widely used in apps that
require users to upload photos or select images from their device.

provider: ^6.1.1
A popular state management solution recommended by the Flutter team. It's used for efficiently
managing app state and propagating changes to the UI in a scalable way.

dropdown_search: ^5.0.6
A customizable dropdown search widget that supports asynchronous item fetch, search, and
selection. Ideal for forms where users need to select from a large list of options, possibly fetched
from a web service.
Plan:
- To add pricing before the OTP
- Use Riverpod State Management as it is the best to use when the application heavily relies on
REST API interactions
- Change inputs accordingly to whatever will be developed on PCES International
- Use Radius based coordinates matching for the preferred location rather than exact location.
With Radius based coordinates matching, the data should not be a dropdown of data from a csv,
but the data should be based on Google Places API.

Code Snippets:
autovalidateMode: AutovalidateMode.onUserInteraction - Text Form Field
autoValidateMode: AutovalidateMode.onUserInteraction – Dropdowns
List<String> _sample2json = []; - This is used to load json into a dropdown
Future<List<String>>? _sample1json; - This is used for dropdown with Search Function but
with a larger scale
void: Indicates a function that performs an action but does not return a value.
void with async: Used for defining asynchronous functions that do not return a value but may
perform operations that complete in the future.
await: Waits for an asynchronous operation to complete and returns its result.
final: Declares a variable that can only be set once and cannot be reassigned.
Future: Represents a value (or error) that will be available at a future time, allowing
asynchronous operations.
void dispose(): Cleans up resources when a widget is removed from the widget tree, preventing
memory leaks.
void initState(): Initializes the widget state when the widget is first created, often used to set up
data or state that is needed upfront.
Future<void>: Specifies an asynchronous operation that returns no value, useful for functions
that may complete in the future but do not need to return data.
late: Allows lazy initialization of a variable, ensuring it's only set when accessed the first time
and must be non-null by that point.
@override: Indicates that a method is overriding a method defined in a superclass, ensuring that
the superclass method is replaced with a custom implementation.
super key: Calls the constructor of the superclass, useful for initializing inherited properties.
class with extends: Creates a new class that inherits properties and methods from another class,
facilitating code reuse.
const: Defines a compile-time constant, used for values that are known at compile time and do
not change.
FutureBuilder: A widget that builds itself based on the latest snapshot of interaction with a
Future, handling different states of that Future.
snapshot.error: Accesses the error that might have occurred during the Future's execution in
FutureBuilder or StreamBuilder.
the ... (spread operator): Expands the elements of a collection or iterable within another
collection.
Map<String, dynamic>: Defines a dictionary-like collection of key-value pairs where keys are
strings and values can be of any type.
setState(): Notifies the framework that the widget’s state has changed, triggering a rebuild of the
widget to reflect the updated state.
Main Entry Point (main.dart)

main() Function
Uses MaterialApp to set up navigation and theming.
Sets SplashScreen as the home screen.
Theming
The app defines custom colors for use throughout the app:

primaryColor: Blue color used for primary elements in the app.

tertiaryColor: Dark blue color, potentially for accents or secondary elements.
textColor: White color for texts against dark or primary backgrounds.
These colors are utilized within the ThemeData to maintain a consistent look and feel.

SplashScreen Widget
This stateless widget serves as the introductory screen for the app. It displays the company logo
and provides options for the user to either start exploring the app or log in if they already have an
account.

Features
Company Logo: Uses SvgPicture.network to load and display an SVG image from a URL.
Get Started Button: An elevated button that navigates the user to the GetStartedPage. The button
style is customized to match the app's theme.
Login Navigation: A rich text allowing users to navigate to the LoginScreen if they already have
an account. The "Log In" text is interactive and styled using the app's primary color.
Navigation
The app uses Navigator.push for navigation:

Login_page.dart
Key Components:
MyDataWidget:
Type: StatefulWidget
Functionality: Fetches and displays data from a REST API upon initialization. Utilizes
FlutterSecureStorage to retrieve a custom user ID, which is then used to make an authenticated
request.

Key Methods:
initState(): Initializes the widget state and triggers data fetching.
fetchData(): Performs an HTTP GET request to retrieve user-specific data.

LoginScreen:
Type: StatefulWidget
Functionality: Provides a user interface for login, including text fields for username and
password, and a login button to submit credentials. Successful authentication navigates to
MyDataWidget.

Key Methods:
_login(): Handles the login logic, including HTTP POST request submission and response
handling. Stores session information using FlutterSecureStorage.

Security and Data Handling:

Secure Storage: The application uses FlutterSecureStorage for secure credential and session
storage, ensuring sensitive information is encrypted on the device.
HTTP Communication: Utilizes the http package for REST API interactions, handling both user
authentication and data retrieval.
email_sender.dart
Purpose: Sends an OTP to a specified recipient's email address for verification purposes.
Parameters: String recipient - The email address of the recipient who will receive the OTP.

Key Steps
Configuration: Reads SMTP details from assets/smtp.env for email sending.
OTP Generation: Generates a 6-character alphanumeric OTP.
Secure Storage: Stores the OTP and its expiry time in Flutter Secure Storage.
Email Composition: Creates an HTML email with the OTP and company branding.
Sending: Utilizes the mailer package to send the email via the configured SMTP server. Error
Handling
Catches and logs any MailerException errors, including detailed problem descriptions provided
by the SMTP server, aiding in troubleshooting sending issues.
Security Considerations
Utilizes FlutterSecureStorage for secure, encrypted storage of sensitive information like OTPs.
Employs best practices for SMTP communication, including password protection and optional
SSL configuration based on the SMTP server's requirements.

Usage
To use the sendOtpEmail function, ensure you have the necessary SMTP server configuration,
and call the function with the recipient's email address where the OTP should be sent.
applicant_registration.dart
This concise documentation outlines the functionality of the OtpEmailScreen widget in a Flutter
application designed to handle OTP (One-Time Password) email verification.
Purpose: Facilitates the sending of an OTP to a user's email for verification purposes and allows
the user to enter the received OTP for validation.
Key Components:
Form for email input
OTP sending and validation
Countdown timer for OTP expiry

Key Functionalities
Email Input: Collects the user's email address to which the OTP will be sent.
OTP Generation and Sending:
Upon submitting the email, the app checks if the email exists. If not, it generates an OTP, sends it
to the specified email, and starts a countdown timer for OTP validity.

OTP Verification:
Allows the user to enter the received OTP and verifies it against the stored value. If the OTP
matches, it navigates the user to the registration page.

Countdown Timer:
Displays a countdown timer indicating the remaining validity period of the OTP. If the timer
expires, the user can request a new OTP.

Navigation
Navigates to a registration page upon successful OTP verification, resetting the widget's state
upon returning to ensure a fresh start for the next verification process.