Khóa luận tốt nghiệp Hệ thống thông tin: Building a mobile-based restaurant management system

Nguyen Thanh Binh Duration: July 1%, 2022 to December 31", 2022 Students: Ha Huy Quoc - 18521307 Contents: Details of what to be done: The project that I will be working on consists of 4

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY

UNIVERSITY OF INFORMATION TECHNOLOGY

ADVANCED PROGRAM IN INFORMATION SYSTEMS

NATIONAL UNIVERSITY HO CHIMINH CITY UNIVERSITY OF INFORMATION TECHNOLOGY ADVANCED PROGRAM IN INFORMATION SYSTEMS

PhD.NGUYEN THANH BINH

HO CHI MINH CITY, 2022

ASSESSMENT COMMITTEE

The Assessment Committee is established under the Decision , đate

by Rector of the University of Information Technology.

1 - Chairman.

2 Secretary.

3 - Member 4 « + —— Member.

VIETNAM NATIONAL UNIVERSITY CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Number of pages 126 Number of chapter 05

Number of tables 28 Number of figures 86

Number of references 12 Products 04

Evaluation of instruction on report format:

General assesSIeIN{f: eueuee 2222 ng vn eves „ ratings

Score of student:

Ha Huy Quoc : /10

Evaluation instructor

VIETNAM NATIONAL UNIVERSITY CONG HÒA XÃ HOI CHỦ NGHĨA VIET NAM

UNIVERSITY OF Độc Lập - Tự Do - Hạnh Phúc INFORMATION TECHNOLOGY

GRADUATE THESIS EVALUATION OF COMMITTEE

Thesis title:

BUILDING AN MOBILE-BASED RESTAURANT MANAGEMENT SYSTEM

Student: Thesis committee:

Ha Huy Quoc 18521307 PhD Le Kim Hung

Evaluation of thesis

1 Report paper:

Number of pages 126 Number of chapter 05

Number of tables 28 Number of figures 86

Number of references 12 Products 04

Evaluation of instruction on report format:

2 Thesis content:

The thesis topic of building a mobile-based restaurant management system is the

content that I researched and made my graduation thesis after studying at the

Faculty of Information Systems, University of Information Technology - Vietnam National University Ho Chi Minh City During the process of researching and

completing the thesis, I have received much attention and help from teachers,

colleagues, family and friends For the success of this thesis, I would like to express

my sincere thanks to:

Faculty of Information Systems, University of Information Technology - Vietnam National University Ho Chi Minh City has created a very good learning and training environment, providing me with useful knowledge and skills to help me apply use and facilitate the implementation of the thesis.

Instructor PhD Nguyen Thanh Binh is a dedicated teacher who has dedicatedly

guided and helped me throughout the research and implementation of the thesis He gave me some ideas and suggestions to help me complete this research.

I would also like to thank the Management Board and teachers of the University of Information Technology for giving me the opportunity to study and work at the

school to gain practical knowledge and experience I have useful information to

make my thesis.

Finally, I would like to thank my family and friends for always encouraging and

creating the best conditions for me to strive to complete the research well.

Thank you sincerely!

Ho Chi Minh City,

Ha Huy Quoc

UNIVERSITY OFINFORMATION TECHNOLOGY

Advanced ADVANCED PROGRAM ENhgatinri

IN INFORMATION SYSTEMS Program

THESIS PROPOSAL

THESIS TITLE: BUILDING A MOBILE-BASED RESTAURANT MANAGEMENT

SYSTEM

Advisor: PhD Nguyen Thanh Binh

Duration: July 1%, 2022 to December 31", 2022

Students: Ha Huy Quoc - 18521307

Contents:

Details of what to be done:

The project that I will be working on consists of 4 small modules (applications)

to form a mobile-based restaurant management system

If the user is a diner who comes to the restaurant to eat or use the service of the

restaurant, they will be able to use the electronic menu The electronic menu is the first module in the project and its function is to show the restaurant's dishes

or combos In addition, there will be an additional feature to press the bell to call the waiter to serve.

Seller is the second module in this project and is used by waiters The main

function in this app is that waiters can choose tables for guests, choose dishes or

combos and create menus for the kitchen to prepare dishes.

Next, the third module is the kitchen If the user is in a kitchen, they can see a

list of orders the waiter has made, sorted from oldest to newest in real time Chefs will prepare and order items to order and they can adjust the status of the

order as complete or incomplete so the waiter can know.

Finally, the general management software for the entire restaurant is the last module in this project Features of this application include managing the list of

dishes, combos, managing accounts (waiter,chef, ).

Features of each module:

= For waiters: Choose a table, choose a dish and create an order for the

diners to let the chef make the dish.

= For the kitchen (chef): View restaurant order lists in real time Order

status can be adjusted: completed or not completed.

= For the restaurant manager (admin): Manage the list of dishes, tables,

orders, employee accounts and view total revenue.

Scope: The project focuses on using Flutter Framework and Firebase Platform to build the mobile-based

Methodologies:

- Study some basic knowledge about Flutter Framework

- Study about Firebase platform for mobile database

- Design and build applications.

Expected results: Many businesses or organizations have already adopted this

concept But with this thesis, I want to aim to develop an application that will be quicker to operate, more compact in terms of capacity, and still completely

functioning.

Research timelines:

01/07/2022 to 15/07/2022:

- Research market survey and collect survey customers about food service

- Research method restaurant management process 15/07/2022 to 20/09/2022:

- Geta rough idea of what features will be in the app 20/09/2022 to 31/10/2022:

- Research the technologies that will be used in the application (flutter and

- Write the thesis report

Approved by the advisor(s) Ho Chi Minh city, September 14*, 2022 Signature(s) of advisor(s) Signature(s) of student(s)

Nguyén Thanh Binh A

guyen tha m Hà Huy Quoc

vii

LIST OF FIGURES

LIST OF TABLES

LIST OF ACRONYMS cescscssesssesssesssessecssesnecssessnesssssessnecsecsscesecsnccsncesecsscesscesesesees xvii ABSTRACT

Chapter 1 Problem Statement ssscssecssssseessessesssscsecsessnscsscssecsnecsncsnsessceseeeneeeneesees 1

1.1 Objective and Motivation

2.1.5 Architectural layers

2.1.6 State

2.1.7 Navigator.

2.1.8 Package

2.2.3 Cloud FireStOre - ¿5s T8

2.2.4 Firebase Authentication 2.2.5 Firebase Cloud Messaging

2.3 Reason for ChOOSiING eeseseseeseesssseeseeeeseesseseeneeneeseeneesesuesneeeeneeneeaeeneeneeeeeeeeesee Chapter 3 System Analysis and Design - 5s 5< 5< ssessessessresessessesrse 22

E0 3.2 Uses Case Design

3.2.1 Uses Case Diagram

3.2.2 Description of Actors

3.2.3 Specification of uses case

3.3 Activity Diagram Design

3.3.1 Order Activity 3.3.2 Login Activity.

3.3.3 Create user Activity

3.3.4 Logout Activity

3.3.5 Search Activity

3.4 Sequence Diagram Design

3.4.2 Show foods & combo for Customer.

3.4.3 Waiter create the order

3.4.4 Waiter search foods and combos

3.4.5 Kitchen changes status order

3.4.6 Admin create user.

3.5 Class Diagram Design.

Chapter 4 Implementation Results «5o s< 5° s< se ssessesseseesersersersesool 82

4.2.4 Item Detail SCreen -5- ©2252 EEkrrkrrrrrrrrrrrrkerree 88

4.2.5 Cart Screen 4.2.6 Select table Screen.

4.2.7 Placed Order Screen.

4.3 Kitchen

4.3.1 Home Screen

4.3.2 History Screen 4.3.3 Order Detail Screen

4.4.1 Home Screen

4.4.2 Drawer Screen 4.4.3 Item Screen

4.44 Add Item Screen & Add Category Screen

4.4.5 Item Detail Screen 4.4.6 Register Waiter

4.4.7 List Account Screen.

Chapter 5 Conclusions and Future WOrKS s-s-sssssssssessesssssessessese 104

5.1 Conclusions.

5.2 Future Work:

REFERENCES cĂĂ Ăn HH HA HA HA g1014014001001400180840014014014008 16 105

APPENDICES esccsssssssssossscsnsccsnsccsnecsnsscensccsnscsanecssncsessscesscessccsssecensccensccsnscessscensccsnscesnees 106

LIST OF FIGURES

cae

Figure 2.1 Components of Flutter app cccccscssessesseseesseseeseesesseeseesesesssseeseeseeseeneenesee 5 Figure 2.2 Widget (T€C Lành HH HH HH HH Hàn 7 Figure 2.3 Flutter architectural layers -¿«c55++cscrerxeererteerrereererrcre

Figure 2.4 Life cycle of Stateful Widget 0.0 cece cty 11 Figure 2.5 Ephemeral State and App State cceeceeseseesseesesseseesseseeseenseeeeaeeneesenses 13 Figure 2.6 Pub.dev Webi(€ - «se cseretiekierieiiririrrrrrrrrrrrrrrrrrrrrer L7 Figure 3.1 System ATChit€C(UIF 6-6 SE kề ve 22

Figure 3.2 Use Case — General of System ¿5+ + tt ưec 23 Figure 3.3 Customer Module’s uses €aS@S - 552552 22+ccsrxerrerkrererrree 24

Figure 3.4 Detail of Customer Module’s uses cases — Show foods - 24

Figure 3.5 Detail of Customer Module’s uses cases — Notify the waiter

Figure 3.6 Waiter Module’s uses cases

Figure 3.7 Detail of Waiter Module’s uses cases — Login

Figure 3.8 Detail of Waiter Module’s uses cases — Choose a table for custome

Figure 3.9 Detail of Waiter Module’s uses cases — Choose the foods

Figure 3.10 Detail of Waiter Module’s uses cases — Create the orders 2 7 Figure 3.11 Kitchen Module’s uses CaSGS - 5-5-5 ườn 27 Figure 3.12 Detail of Kitchen Module’s uses cases — View the order 28 Figure 3.13 Detail of Kitchen Module’s uses cases — Change the status of

OTET (5 2S 2 E2 E2 12212211221211.111.11.11.T1 1 111101.1 1.1.1rr 28

Figure 3.14 Admin Module’s uses CaSeS - 5: 5-5 St gườn 29

Figure 3.15 Detail of Admin Module’s uses cases — Manage food lists 29

Figure 3.16 Detail of Admin Module’s uses cases — Manage food combo 30

Figure 3.17 Detail of Admin Module’s uses cases — Account management 30

Figure 3.18 Detail of Admin Module’s uses cases — Table management

Figure 3.19 Detail of Admin Module’s uses cases — Orders managemen

Figure 3.20 Activity Diagram — Order Activity

Figure 3.21 Activity Diagram — Login Activity.

xi

Figure 3.22 Activity Diagram — Create waiter Module’s or chef Module”s

CCOUHIẨ, 52+ T1 121 1111111111111 11210 1T 110 1.1101 111 0111011 11 tre 36 Figure 3.23 Activity Diagram — LOgOUK -. ¿©5<5cccceeereereeereereereerv 7 Figure 3.24 Activity Diagram — SearcHh ¿- ¿+5 tk TH ước Figure 3.25 Sequence Diagram — Login . -

Figure 3.26 Sequence Diagram — Show foods for Customer

Figure 3.27 Sequence Diagram — Show combo for Customer

Figure 3.28 Sequence Diagram — Waiter create the OFd€T - sccscvseerxeee 40

Figure 3.29 Sequence Diagram — Waiter search foods and combos 4 Ï Figure 3.30 Sequence Diagram — Kitchen changes status order Ï

Figure 3.31 Sequence Diagram — Admin create user -‹-©-« -«+-« .t2

Figure 3.32 Class Diagram

Figure 3.33 Database Design

Figure 3.34 Menu Electronic Module’s wireframe— Home Screen.

Figure 3.35 Menu Electronic Module’s wireframe— Drawer -e 49 Figure 3.36 Menu Electronic Module’s wireframe— Item Detail Screen 50 Figure 3.37 Waiter Module’s wireframe — Home Screen s-s+c++c++xesxex+ 51 Figure 3.38 Waiter Module’s wireframe — Drawer

Figure 3.39 Waiter Module’s wireframe — Item Screen

Figure 3.40 Waiter Module’s wireframe — Item Detail Screen

Figure 3.41 Waiter Module’s wireframe — Pending Order Screen

Figure 3.42 Waiter Module’s wireframe — Cart Screen ccccccccxeeer.c Ð Ô, Figure 3.43 Waiter Module’s wireframe — Select table Screen tees 7 Figure 3.44 Waiter Module’s wireframe — Placed Order Screen . -Ð 8 Figure 3.45 Waiter Module’s wireframe — Login Screen

Figure 3.46 Waiter Module’s wireframe — Register Screen

Figure 3.47 Waiter Module’s wireframe — Order Detail Screen

Figure 3.48 Waiter Module’s wireframe — Search Screen - «sec 62

Figure 3.49 Kitchen Module’s wireframe— Home Screen - 63

Figure 3.50 Kitchen Module’s wireframe— Done Orders Screen - - 64

Figure 3.53 Kitchen Module’s wireframe— Register SCr€en «5s +sxsxsxses 67

Figure 3.54 Admin Module’s wireframe— Home SCreen - +5 5+ x+essxsxssreees 68

Figure 3.55 Admin Module’s wireframe— ÏDTaW€T cà terereererer 69

Figure 3.56 Admin Module’s wireframe— Items SCT€en - 5 +ssssrsrseseeee 70

Figure 3.57 Admin Module’s wireframe— Items Detail Screen -‹-‹- 71

Figure 3.58 Admin Module’s wireframe— Total Earning Screen - -‹-«- 72

Figure 3.59 Admin Module’s wireframe— New Order Screen - «+2 73 Figure 3.60 Admin Module’s wireframe— Order Detail Screen - -s+5 74 Figure 3.61 Admin Module’s wireframe— History Screen cccceeeseeeseeeeseeeeseeeeeees 75 Figure 3.62 Admin Module’s wireframe— Add menu Screen - -+ss+-s++ 76 Figure 3.63 Admin Module’s wireframe— Add item Screen 5s ++sssx+s++ 77 Figure 3.64 Admin Module’s wireframe— Login SCreen - s«+sssx+x+ecexex 78 Figure 3.65 Admin Module’s wireframe— Register Kitchen Screen - 79

Figure 3.66 Admin Module’s wireframe— Register Waiter Screen - 80

Figure 3.67 Admin Module’s wireframe— Add Table Screen -«<=es+ 81 Figure 4.1 Menu Electronic Module’s implementation results — Home Screen 82

Figure 4.2 Menu Electronic Module’s implementation results — Home Screen 83

Figure 4.3 Menu Electronic Module’s implementation results — Drawer 84

Figure 4.4 Waiter Module’s implementation results— Home Screen - 85

Figure 4.5 Waiter Module’s implementation results— Drawer Screen - 86

Figure 4.6 Waiter Module’s implementation results— Item Screen - - 87

Figure 4.7 Waiter Module’s implementation results— Item Detail Screen 88

Figure 4.8 Waiter Module’s implementation results— Cart Screen - - 89

Figure 4.9 Waiter Module’s implementation results— Select Table Screen 90

Figure 4.10 Waiter Module’s implementation results— Placed Order Screen 91

Figure 4.11 Kitchen Module’s implementation results— Home Screen 92

Figure 4.12 Kitchen Module’s implementation results— History Screen 93

Figure 4.13 Kitchen Module’s implementation results— History Screen 94

Figure 4.14 Admin Module’s implementation results— Home Screen 95

Figure 4.15 Admin Module’s implementation results— DrawWer -‹- 96

Figure 4.16 Admin Module’s implementation results— Item Screen 97

xII

Figure 4.17 Admin Module’s implementation results— Add Item Screen &

Add Category SCT€€I 5 2G SH TH HH HT TH HT TH TT Hà ngu 98

Figure 4.18 Admin Module’s implementation results— Item Detail Screen 99

Figure 4.19 Admin Module’s implementation results— Register Screen 100

Figure 4.20 Admin Module’s implementation results— List Available Account

LIST OF TABLES

cs Leo

Table 1 Description 0o uc 1 32

Table 2 Specification Of USCS CAS€ - << 2S TH TH TT HH TH TT TH TH HH rkp 32 Table 3 Admin ˆs database esCTIpfTOII 5 55 S+ S2 2 St SE St EEEsEekekrekrkrerrkrerrrer 45 Table 4 Menu’s database €SCTIDẦIOT 5 2+2 EE*ESEEE+EEeEEEEErkekrekrkrerkrerrrer 45 Table 5 Kitchen’s database deSCTIDẦIOII 55c 2S S221 **E£EE+EEeEetrerekrereeereersre 45 Table 6 Waiter’s database €SCTIDẨIOTI 5 55 + 2S St 9# vn ngư 46 Table 7 Table’s database €SCTIDfIOH 5 1S ST 2v ng ng re 46 Table 8 Item’s database description 1 46

Table 9 Order’s database description eceesescssesessesesseceeeseseseceseeeeseseeeeseeeeseeeeeaeeeeaes 47 Table 10 Screen specification — Menu Module — Home Screen - «5 82 Table 11 Screen specification — Menu Module — Item Detail Screen - 83

Table 12 Screen specification — Menu Module — DraWeT - 5 5+5 5s <+x+sc+x+x 84 Table 13 Screen specification — Waiter Module — Home Screen -«- 85

Table 14 Screen specification — Waiter Module — Item Screen - «+ 87

Table 15 Screen specification — Waiter Module — Item Detail Screen 88

Table 16 Screen specification — Waiter Module — Cart Screen eee 89 Table 17 Screen specification — Waiter Module — Select Table Screen 90

Table 18 Screen specification — Waiter Module — Placed Order Screen 91

Table 19 Screen specification — Kitchen Module — Home Screen - ‹ 92

Table 20 Screen specification — Kitchen Module — History Screen - 93

Table 21 Screen specification — Kitchen Module — Order Detail Screen 94

Table 22 Screen specification — Admin Module — Home Screen -‹ 95

Table 23 Screen specification — Admin Module — [DraWT 555 s<+xscexsx 96 Table 24 Screen specification — Admin Module — Item Screen - -« 98

Table 25 Screen specification — Admin Module — Add Item Screen & Add Cate gory SCTOOM 0n 99

Table 26 Screen specification — Admin Module — Item Detail Screen 100

Table 27 Screen specification — Admin Module — Register Screen 101

XV

Table 28 Screen specification — Admin Module — List Available Account

It would be great if there are restaurant management applications applied as well

as helping them with some part of their management process.

Currently on the market there are many applications that have been applied, but

most of them are applied to professional and luxurious restaurants So how do we deal with small grocery stores and small businesses?

To solve this problem, the idea of mobile-based restaurant management system was bom with the hope to help restaurant owners reduce their thoughts and difficulties in the process of managing their stores With the functions that the applications have, it is hoped that the applications will partially solve the problems

that managers often encounter in the management process.

Chapter 1

Problem Statement

1.1 Objective and Motivation

The management of the restaurant's orders to improve the customer experience is essential For regular restaurants, they will only note information such as dish

information, number of dishes, through forms such as paper or words This causes a

nuisance that the information can be lost or wrong leading to the dish not being according to the customer's wishes For example , when the customer orders the food through with the waiter For some reason, the waiter forgot or misremembered the name, quantity, etc of the dish Or, the kitchen can't manage which orders come before or after because their job is to cook, they can't remember them all That's why I created these software applications to unify the order that the food will be selected by

the waiter and that information will reach the kitchen quickly and correctly.

The reason I do this project on my phone is because of many reasons First, the phone is a compact and easy-to-use device for many people today Second, the creation of mobile applications ensures security as well as future development

1.2 Thesis specification

The project that I will be working on consists of 4 small modules (applications)

to form a mobile-based restaurant management system

If the user is a diner who comes to the restaurant to eat or use the service of the restaurant, they will be able to use the electronic menu The electronic menu is the first module in the project and its function is to show the restaurant's dishes or combos In addition, there will be an additional feature to press the bell to call the

waiter to serve.

Seller is the second module in this project and is used by waiters The main

function in this app is that waiters can choose tables for guests, choose dishes or combos and create menus for the kitchen to prepare dishes.

Next, the third module is the kitchen If the user is in a kitchen, they can see a list of orders the waiter has made, sorted from oldest to newest in real time Chefs

will prepare and order items to order and they can adjust the status of the order as

complete or incomplete so the waiter can know.

Finally, the general management software for the entire restaurant is the last module in this project Features of this application include managing the list of dishes, combos, managing accounts (waiter,kitchen).

1.3 Thesis goal

Building a mobile-based restaurant management system

e Using Flutter framework to render UI/UX.

e Using Firebase to store the database.

e The proposed system included four module as below:

o Menuelectronic module:

- View the list of food combos.

- Notify the waiter.

o Waiter module:

- Select the table.

- Select the food or combo.

- Manage the menu of the restaurant.

- Manage account (waiter,kitchen,admin).

1.4 Contents of thesis

This thesis report includes four chapters:

Chapter 1 : Problem Statement — Overview thesis : Reason, specification, goal

Chapter 2 : Theoretical basis — Flutter — A Cross platform Mobile SDK ,

Cc

D

ie Cc

Firebase — A Google cloud service hapter 3 : System Analysis And Design — System Architecture, Analysis and design Use Case, Activity Diagram , Sequence Diagram, Class iagram, Database Design, Wireframe Design,

hapter 4 : Implementation Results

-hapter 5 : Conclusions and Future Works - Achievements, New

contributions and new proposals.

Flutter uses Dart, a fast, object-oriented language with many useful features like

mixins, generics, isolates, and static types.

In terms of appearance and functionality, apps created using Flutter are almost indistinguishable from those created with the Android SDK Additionally, with a few adjustments, they can function on iOS smartphones.

Flutter consists of two important parts:

SDK (Software Development Kit): A set of tools that will assist you in creating your applications Tools for converting your code to native

machine code are also included (code for iOS and Android).

Framework (UI Library based on widgets): A collection of reusable user

interface (UI) elements, such as buttons, text inputs, sliders, and other elements, that you can alter for your own needs.

2.1.2 Outstanding Feature

Hot Reload: Hot Reload works in milliseconds to render the interface to you Use a set of customizable widgets to build interfaces in minutes In addition, Hot Reload also helps you add features, fix bugs to save more time without having to go through virtual machines, android or iOS machines [2].

Cross-platform development: Developers may write code that runs on multiple platforms thanks to Flutter Two separate applications can use the

Expressive and Flexible UI: There are many components to building

Flutter's interface beautifully in Material Design and Cupertino styles,

supporting a variety of motion APIs, smooth scrolling

2.1.3 Components of Flutter

J File Edit Selection View Go Run Terminal Help

a EXPLORER “+ @ maindart X widget testdart

v APP

main.dart - app - Visual Studio Code [Administrator]

lib > @ main.dart MyHomePage > @ build

p

analysis_options.yaml

app.iml class MyHomePage extends Statele

final String title;

Eigure 2.1 Components of Flutter app

Flutter components are divided into several parts Following the example above,

we can see that Flutter has different components and different functions [3] Some

important files or folders can be listed here for example:

e android — Auto-generated directory for Android apps

e ios— Auto-generated directory for iOS

e lib — Main folder contains Dart file when using Flutter framework.

Flutter has made available for us a source code file, main.dart This is

also where we create our dart files and write our code

e lib/main - The first file and considered the starting point of the Flutter

application

e test — Folder containing Dart file to test flutter application This is also

the place to write Unit Tests for the project

e test/widget_test.dart — Sample code

e gitignore — Git version control file - This file contains the

configuration for the git project

e metadata— automatically generated by flutter tools (configuration file)

e packages — automatic generation to manage and monitor flutter

packages (configuration file)

e pubspec.yaml — Flutter package manager This is the place to declare

the project name, project description, libraries used in the project, assets

such as icons, images or fonts used in the project

e README.md — Project description

2.1.4 Widget

The most core concept in the Flutter framework is “In Flutter, everything is a

widget” Widgets are the most basic interface components that make up the entire

user interface of an application [4]

A Widget is simply Dart class It can represent a text field, an icon, a button, or a

text that is displayed on the screen

The program itself is already a widget in Flutter Every application is a top-level

widget made up of one or more sub-widgets, each of which has the ability to contain

one or more more sub-widgets We are able to construct any complex application

thanks to this flexible combination

Figure 2.2 Widget tree

A Widget Tree is simply a tree structure, a collection of nodes, where each node is

a Widget Nodes connect to each other according to the parent node - child node

relationship Every widget if itis not a leaf node, it has sub widgets

Figure 2.3 Flutter architectural layers

Layers are an important concept of the Flutter framework, grouped into

several categories in terms of complexity and arranged in a top-down approach [3]

Typically, developers interact with Flutter through the Flutter framework,which provides a modem, reactive framework written in the Dart language Itincludes a rich set of platform, layout, and foundational libraries, composed of a

series of layers Working from the top to bottom, we have:

e First, the comprehensive control sets provided by the Material and

Cupertino libraries implement the Material or iOS design languages usingthe composition primitives of the widget layer

e The widgets layer is a composition abstraction Each render object in the

rendering layer has a corresponding class in the widgets layer In addition,

the widgets layer allows you to define combinations of classes that you can

reuse.

e The rendering layer provides an abstraction for dealing with layout With

this layer, you can build a tree of renderable objects

e The underlying foundation classes and building block services such as

animation, painting, and gestures provide the abstractions commonly

used on the underlying platform

2.1.6 State

State can be described as "whatever data you need in order to rebuild your UI at

any moment in time”

When the state of your app changes (for example, the user flips a switch in the

settings screen), you change the state, and that triggers a redraw of the user interface

There is no imperative changing of the UI itself (like widget.setText)—-you change

the state, and the UI rebuilds from scratch [5]

2.1.6.1 Stateless Widgets

All widgets cannot or will not rebuild themselves even if the data or variables

within them change A typical stateless widget looks like this:

Any widget that inherits the Stateless Widget class from Flutter's material package

is considered a stateless widget by Flutter These widgets will not change when the

user interacts with them, even if the data inside them changes It is only interested in

displaying certain data with a certain style

There are several factors that need to be considered, such as:

e These widgets are created only once, 1e when they are displayed on the

screen, they will remain unchanged until and unless the external data

(parent widget) providing them changes

e The buildQ method of these widgets can only be worked if the parent

widget of these widgets is rebuilt or data is made available to them

externally through changes to their constructor

e Life cycle of Stateless : Because it does not change, the life cycle of

stateless widgets is quite simple, just revolves around the build( function

e For example, the stateful widget is the parent of a stateless widget If the

parent stateful widget's build(){ } method is somehow triggered, the childstateless widget is rebuiltas well

e In Flutter, Text(),Column(),Row(), is the example of a Stateless Widget

2.1.6.2 Stateful Widgets

Stateful widgets are not just a class but a combination of two classes

createState() =>

The first class inherits StatefulWidget and overrides createState() method Using

@override to let Flutter know that we are returning a new object based on the second

class and we can bind the two together

The second class includes all the logic related to the widget state

@override

build(

In this class is named _<widget_name>State where the underscore specifies that it

is private and the widget name is required to indicate that the widget's state it will

hold

State is a class imported from flutter's material package So we give it the name of

the widget to let the user know the widget's state we want to bind to it

Time to trigger StatefulWidget State object

(1) the widget is first

inserted into a tree (2) constructor

Figure 2.4 Life cycle of Stateful wid get

With the above figure , the life cycle of stateful widget divide into 3 part:

e Time to trigger

e StatefulWidget : widget part of Stateful widget

e State object: state part which can be changed to Stateful widget

Follow each number :

e (1): the widget is first inserted into a widget tree

e (2) and (3): After calling the constructor, Flutter will call createState() to

create an object of state for the widget Since then, Flutter has mostly only

worked with State objects (because Stateful Widget objects are

immutable)

e (4): On the State object , after calling createState() , initState() will be

called Especially, this function is only called once for each State object

e (5): The didChangeDependencies() method is called immediately after the

first initState()

e (6) : Function buildQ is called to render the UI So complete the steps

since the first time the widget is initialized Here are the steps to take when

there are any changes

11

(7) : In the case of an InheritedWidget where the widget has data that

depends on changes, the didChangeDependencies() function will be

triggered, then Flutter will call build( to re-render the UI

(8) and (9) : Assuming the user affects the UI to change the state of the

widget, then the developer's job will be to call the setState() function to

change the state of the object This will keep the framework informed of

this change and will call the buildQ function to re-render the corresponding

UL

(10) and (11) : When its parent widget rebuilds and asks its child widgets

to update again, Flutter will make a call to didUpdateWidget() Then the

buildQ function will also be called

(12): The disposeQ function is called when the state object is permanently

removed from the widget tree

2.1.6.3 State management

In Flutter, state management 1s divided into two types of concepts, given below:

Ephemeral State (also known as UI state or local state) : is the state you

can neatly contain in a single widget In this type of state, you don't need to

use state management techniques For example, current page in a

Page View, current progress of a complex animation, current selected tab in

a BottomNavigationBar,

App State (sometimes also called shared state) : is defined as a state that is

not ephemeral, that you want to share across several areas of your app, and

that you want to keep between user sessions

ị

Who need it?

Most Widgets | Some widgets | Single Widget |

| App State | | Ephemeral State |

Figure 2.5 Ephemeral State and App State

2.1.7 Navigator

Flutter provides a Navigator widget to manage and manipulate the stack while

navigating screens Navigator provides 2 types of functions and the two callings

below are equivalent [6]

Navigator pushNamed(context, string)

2.1.7.1 Push and pop

The two most fundamental and frequently used techniques while doing

navigational operations

e Push: Perform push widget to the navigator's stack, each function call is a

push widget to the stack Push contain 2 types : push and pushNamed ,

detail below:

- push(context,route) also known as direct navigation This gives you

better control over initializing the new screen, allowing you to do more

preprocessing, or pass params to the new screen, etc

13

return Screen1();

}));

pushNamed(context, string) with static navigation : The below script is

to define all the names in a Routes class This way helps you to define a

short route, but is limited when routeNamed will return a fixed constructor

class Routes {

static final String screen1

static final String screen2

Navigator pushNamed (context, Routes.screen1) ;

pushNamed(context, string) with dynamic navigation : The above way

limits us to being flexible and cannot be a custom constructor of

navigation, then using onGenerateRoute will overcome those

break;

default:

return MaterialPageRoute(builder: (_) => Screen1());

e Pop: Pop the widget at the top of the stack navigator, calling one time at a

time until the stack runs out of widgets

Navigator pop(context)

2.1.7.2 Data transmission

e Passing constructor : To do this, in class A you will need to use

push(context, route) In class B, just declare the value to be passed in

e Passing arguments : Push functions that support optional param arguments

support data passing Can use push(context, route, arguments) or

pushNamed(context, string, arguments)class A {

pushNamed (context, » arguments:

2.1.7.3 Other popular push and pop function

Using shared packages created by other developers and added to the Flutter and

Dart ecosystems is supported by Flutter This allows quickly building an app without

having to develop everything from scratch

Dart packages are hosted and published on servers such as pub.dev [7] In

addition, Flutter provides basic tools and pubs to manage Dart packages in the

application The steps needed to use the Package are as follows:

e Enter the appropriate package name and version in the pubspec.yaml file as

shown below, for example, the cupertino_icons package provides a default

e Install the package by using command :

e For example, Cupertinolcon.heart_circle is a Cupertino icon for a filled

heart shape

Signin Hel

The official package repository for Dart and

Flutter Favorites

‘Some of the packages that demonstrate the highest levels of quality, selected by the Flutter Ecosystem Committee

font_awesome_flutter provider geolocator bottom_navy_bar

Icon pack A wrapper around Geolocation plugin for Flutte A beautiful and animated

InheritedWidget to make them This plugin provides a cross: bottom navigation The

icons easier to use and more platform (i0S, Android) API for navigation bar use your current

© futtercommunity dev @ casnovertiow ne! ‘@pasefiow.com @pedtor

VIEW ALL

Figure 2.6 Pub.dev website

2.2 Firebase - A Google cloud service

2.2.1 What is Firebase?

Firebase is a platform for developing mobile apps and websites The platform will

include simple APIs without the need for a backend or server [8]

Firebase is a backend system service provided by Google for apps It will help

users develop, deploy, and scale their mobile apps much faster

This platform is a combination of cloud and Google's server system to focus on

two main objects:

e Develop & test your app: develop and test designed and developed apps

e Grow & engage your audience: analyze data and optimize user experience

17

2.2.2 Service

Real-time Database : Users can store and synchronize data in real timeusing a real-time database service This service is hosted directly on the

cloud They will consume up the memory on your device if it is offline and

then sync to the server when it is online As a result, the interaction is

guaranteed

Authentication : It provides your application with several authentication

methods via email, password, phone number, Google account, Facebook

account, need to use separate registration data It also brings extremelyconvenient and fast benefits to application developers to save time and

effort to build applications

Firebase database query : One of the outstanding services of Firebase isthat it can help you simplify the process of getting data instead of going

through complicated SQL statements Services using NoSQL are hosted on

cloud infrastructure

Firebase cloud messaging : Originally, Firebase was built with thepurpose of providing an API for integrating chat functionality Therefore,

Firebase cloud messaging (FCM) is the most basic feature of this platform,

it allows users to build chat applications and push notifications to many

different devices such as web, Android, iOS, etc According to Firebase,for use cases such as instant messaging, a message can transfer a payload

of up to 4000 bytes to a client app Moreover, the FCM service also allows

you to choose when to send messages immediately or in the future

according to the user's local time zone

2.2.3 Cloud FireStore

2.2.3.1 Introduction

Cloud Firestore is Firebase's new database developed for mobile apps It is theReal time Database's replacement with a newer, easier-to-use data model In

comparison to Realtime Database, Cloud Firestore is larger, faster, and more scalable

[9].

Similar to Firebase Realtime Database, it provides offline support for mobile and

web and maintains your data synchronized across client apps using real-time

subscriptions Additionally, Cloud Firestore provides connectivity with Cloud

Functions as well as other Firebase and Google Cloud Platform technologies

2.2.3.2 Main capabilities

There will be 5 main features that Cloud Firestore brings to developers

Flexibility : Hierarchical data structures that are adaptable are

supported by the Cloud Firestore data architecture Organize your data

in documents into collections Sub-collections and complicated nested

items can both be found in documents

Expressive querying : You can use queries in Cloud Firestore to

retrieve single, particular documents or to retrieve every document in a

collection that matches your query parameters You can combine

filtermg and sorting in your searches by using numerous, chained

filters Additionally, because they are already indexed, query

performance is determined by the size of your result set rather than

your data set

Realtime updates: Like Realtime Database, Cloud Firestore uses datasynchronization to update data on any connected device However, it'salso designed to make simple, one-time fetch queries efficiently

Available offline : The data that your app is actively consuming iscached by Cloud Firestore, allowing it to write, read, listen to, and

query data even while the device is offline Any local updates are

synchronized back to Cloud Firestore when the device is back online

19