TÌM HIỂU FLUTTER và xây DỰNG ỨNG DỤNG QUẢN lý CHI TIÊU

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
-----☺☺☺-----

ĐỒ ÁN 2
ĐỀ TÀI: “TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG
QUẢN LÝ CHI TIÊU”
Giảng viên hướng dẫn:

Thái Thụy Hàn Uyển

Sinh viên thực hiện:
1. Tạ Quang Tiến

17521129

2. Ngô Hà Thế Vĩ

17521255

Tp. Hồ Chí Minh, tháng 01 năm 2021

1


LỜI CẢM ƠN
Nhóm em xin chân thành cảm ơn sự hướng dẫn tận tình của cơ Thái Thụy
Hàn Uyển - giảng viên hướng dẫn môn Đồ án 2 đã hỗ trợ cho nhóm trong
q trình nghiên cứu để nhóm hồn thành đề tài này.
Vì kién thức của chúng em vẫn cịn hạn hẹp nên khơng thể tránh khỏi

những thiéu sót trong quá trình thực hiện đồ án. Vì vậy nhóm chúng em
luôn mong đợi nhận được những ý kién đóng góp quý báu từ phía giảng
viên để qua đó có thể rút kinh nghiệm, tự sửa chữa, hoàn thiện bản thân
mình trên tinh thần nghiêm túc, tự giác học hỏi. Một lần nữa nhóm chúng
em xin chân thành cảm ơn.
Nhóm nghiên cứu

2


NHẬN XÉT CỦA GIÁO VIÊN

............................................................................................................................................................... ...........
.................................................................................................................................................... ......................
......................................................................................................................................... .................................
.............................................................................................................................. ............................................
................................................................................................................... .......................................................
........................................................................................................ ..................................................................
............................................................................................. .............................................................................
.................................................................................. ........................................................................................
....................................................................... ...................................................................................................
............................................................ ..............................................................................................................
................................................. .........................................................................................................................
...................................... ....................................................................................................................................
........................... ...............................................................................................................................................
................ ..........................................................................................................................................................
..... ............................................................................................................................................................... .....
.......................................................................................................................................................... ................
............................................................................................................................................... ...........................
.................................................................................................................................... ......................................

......................................................................................................................... .................................................
.............................................................................................................. ............................................................
................................................................................................... .......................................................................
........................................................................................ ..................................................................................
............................................................................. .............................................................................................
.................................................................. ........................................................................................................
....................................................... ...................................................................................................................
............................................ ..............................................................................................................................
................................. .........................................................................................................................................
...................... ....................................................................................................................................................
........... ..............................................................................................................................................................
. ............................................................................................................................................................... .........
...................................................................................................................................................... ....................
........................................................................................................................................... ...............................
................................................................................................................................ ..........................................
..................................................................................................................... .....................................................
.......................................................................................................... ................................................................
............................................................................................... ...........................................................................
...........................................................................................................................................................................

3


MỤC LỤC

1. MỞ ĐẦU.................................................................................... 6
1.1. Lí do chọn đề tài................................................................. 6
1.2. Phương pháp nghiên cứu & phát triển............................ 6
1.3. Đối tượng hướng đến........................................................ 8

2. GIỚI THIỆU VỀ FLUTTER........................................................9
3.1. Giới thiệu ngơn ngữ lập trình Dart...................................9
3.1.1. Ngơn ngữ lập trình Dart là gì?................................ 9
3.1.2. Ưu điểm của Dart.................................................. 10
3.2. Giới thiệu về framework Flutter.................................... 11

3.2.1. Flutter là gì?........................................................... 11
3.2.2. Kiến trúc của Flutter............................................. 12
3.2.3. Ưu điểm của Flutter so với các framework khác13
3. CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER................ 15
3.1. Yêu cầu cấu hình phần cứng........................................... 15
3.2. Hướng dẫn cài đặt Flutter...............................................16
3.3. Tạo project Flutter đầu tiên với Visual Studio Code....18

4. PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ CHI TIÊU CÁ NHÂN
VỚI FLUTTER.............................................................................20
4.1. Đặt vấn đề......................................................................... 20
4.2. Phạm vi ứng dụng............................................................ 20
4


4.3. Mơ tả bài tốn...................................................................21
4.4. Các chức năng chính........................................................ 21
4.5. Phân tích thiết kế............................................................. 22
4.5.1. Lược đồ phân cấp chức năng............................... 22
4.5.2. Sơ đồ use case và đặc tả use case........................ 22
4.5.3. Sơ đồ cơ sở dữ liệu................................................23
4.6. Giao diện ứng dụng..........................................................24

5. KẾT LUẬN...............................................................................34

5.1. Kết quả thu được..............................................................34
5.2. Khó khăn........................................................................... 35
5.3. Phương hướng phát triển............................................... 35
TÀI LIỆU THAM KHẢO............................................................36

5


1. MỞ ĐẦU
1.1. Lí do chọn đề tài
Quản lý, kiểm soát thu nhập cũng như hạn mức chi tiêu cá nhân vẫn luôn

là một vấn đề nhức nhối đối với hầu hết mọi người. Việc không lưu trữ, thống
kê các khoản thu chi làm chúng ta mất đi cái nhìn tổng thể cũng như khả năng
phân tích đánh giá mức tiêu dùng cá nhân và phần nào đó, trực tiếp dẫn đến
nhiều vấn đề phát sinh liên quan đến tài chính.

Sau thời gian tìm hiểu và cân nhắc, nhóm thấy đây là vấn đề mang tính

thực tế, vơ cùng thiết yếu nên nhóm đã quyết định lựa chọn đề tài này để
nghiên cứu và phát triển cho môn học.

1.2. Phương pháp nghiên cứu & phát triển
Nhóm chúng em sẽ thực hiện đè tài này bằng ngôn ngữ Dart với công

nghệ ứng dụng là Flutter.

Trong quá trình tìm hiểu nghiệp vụ, nhóm chúng em có tham khảo các

diễn đàn vè quản lý tài chính trên mạng xã hội. Cùng với đó là các ứng dụng

có sẵn và phát triển thành cơng trên chợ ứng dụng để có cái nhìn tổng qt vè
đè tài đã chọn.

6


• Nhóm phát triển tuân theo quy chuẩn thiết kế ứng dụng hiện hành.

Nhóm đã thực hiện bài bản từng bước sau trong quá trình phát triển ứng dụng:
Bước 1: Nhóm tiến hành thu thập thơng tin u cầu người dùng.

Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mơ hình hố u cầu

của người dùng.

Bước 3: Nhóm tiến hành nghiên cứu các ứng dụng sẵn có (với chức

năng gần giống) trên thị trường để bắt kịp xu hướng.

Bước 4: Nhóm thực hiện chỉnh sửa lại mơ hình hố u cầu người dùng

theo những gì đã thu thập được.

Bước 5: Nhóm thực hiện thiết kế CSDL.

Bước 6: Nhóm tiến hành nghiên cứu các cơng nghệ sẵn có để lựa chọn

một mơi trường phù hợp phát triển ứng dụng của mình. Nhóm đã chọn Flutter

(Cross platform) để phát triển ứng dụng vì phát huy tối đa được tốc độ thực
thi, đồng thời hỗ trợ các tính năng cấp phục vụ cho yêu cầu của người dùng.
Bước 7: Nhóm tiến hành thiết kế giao diện Prototype cho ứng dụng.
Bước 8: Nhóm tiến hành cơng đoạn cài đặt cho ứng dụng.

Bước 9: Nhóm tiến hành cơng việc bảo trì (sửa chữa lỗi và phát triển

thêm những tính năng chưa được đề ra ban đầu).
Bước 10: Nhóm hồn thành đồ án.

• Mơ hình sử dụng để xây dựng đề tài: MVC

7


1.3. Đối tượng hướng đến
Nhóm đối tượng chủ yéu của ứng dụng là các bạn trẻ địi hỏi tính di
động cao, cùng với đó là sự bùng nổ của nèn tảng ứng dụng di động.

Cụ thể, ứng dụng của nhóm hướng đén những người có nhu cầu ghi lại,

xem thống kê lịch sử các giao dịch tièn mặt, nhất là các bạn trẻ, học sinh, sinh
viên sống tại thành thị. Đây là nhóm người chi tiêu thường xuyên với các

khoản phí lặt vặt phát sinh trong đời sống hàng ngày. Do đó họ thường hay
quên mất mình sử dụng tiền vào đâu, thời điểm nào và vì mục đích gì.

Chính vì vậy, ứng dụng này sẽ là trợ thủ đắc lực giúp họ ln có thể kiểm

tra lịch sử chi tiêu của mình. Từ đó có thể kiểm soát, nắm rõ những các khoản

thu chi của mình để nhận định mình đã sử dụng tiền hợp lý hay chưa và tiến

hành lên kế hoạch chi tiêu cho bản thân - vốn là một kỹ năng quan trọng khi
bắt đầu cuộc sống tự lập.

8


2. GIỚI THIỆU VỀ FLUTTER

Hinh 1-1 Logo Dart

2.1. Giới thiệu ngơn ngữ lập trình Dart
2.1.1. Ngơn ngữ lập trinh Dart là gi?
- Dart là ngơn ngữ lập trình mới, được phát triển bởi Google, hiện đã

được chấp thuận bởi tổ chức Ecma (ECMA-408). Nó được sử dụng để xây
dựng các loại ứng dụng: web, server, di động (IOS và Android).

- Dart là ngơn ngữ lập trình hướng đối tượng, với cơ ché garbage

collector, cú pháp kiểu C. Nó hõ trợ những khái niệm lập trình hiện đại như

interface, mixin, abstract, generic, và type-safe. Đây là ngơn ngữ lập trình mã
nguồn mở, được công bố trên Github.

9


2.1.2. Ưu điểm của Dart

Một số ưu điểm vượt trội của Dart so với các ngơn ngữ lập trình khác:

- Năng suất: Dart có cú pháp dễ hiểu, rõ ràng và súc tích. Type-safe giúp

lập trình viên có thể xác định sớm các lõi. Bên cạnh đó Dart có hệ sinh thái
rộng lớn lên đén hàng nghìn packages.

- Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có

được dự đoán hiệu suất cao và khởi động nhanh trên các thiét bị di động và
web.

- Dễ làm quen: Do Dart có cú pháp kiểu C/C++, nên rất dễ học. Néu bạn

đã biét C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sau vài
ngày.

- Reactive: Dart rất phù hợp với lập trình Reactive, với sự hõ trợ để

quản lý các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget
UI, thông qua phân bổ đối tượng nhanh và garbage collector. Dart hõ trợ lập
trình khơng đồng bộ thơng qua các tính năng ngơn ngữ và API sử dụng các đối
tượng Future và Stream.

Từ ngơn ngữ lập trình Dart, Google giới thiệu Framework Futter sử

dụng ngôn ngữ Dart để phát triển ứng dụng di động chạy đa nèn tảng.

10

2.2. Giới thiệu về framework Flutter

Hinh 1-2 Logo Flutter
2.2.1. Flutter là gi?
- Flutter được phát triển nhằm giải quyét bài toán thường gặp trong việc

phát triển ứng dụng là Fast Development (phát triển ứng dụng nhanh) và

Native Performance (hiệu suất tối ưu cho từng nèn tảng). Néu như React

Native chỉ đảm bảo Fast Development còn Native language chỉ đảm bảo Native
Performance thì Flutter làm được cả 2 đièu trên.

- Phiên bản đầu tiên của Flutter được gọi là "Sky" và chạy trên hệ đièu

hành Android. Nó được công bố tại hội nghị nhà phát triển Dart 2015, hõ trợ
các ứng dụng hoạt động ở mức 120 khung hình trên giây.

- Trong bài phát biểu chính ở hội nghị Google Developer Days tại

Thượng Hải, Google công bố phiên bản Flutter Release Preview 2, đây là phiên
bản lớn cuối cùng trước Flutter 1.0.
kiện

- Vào ngày 4 tháng 12 năm 2018, Flutter 1.0 đã được phát hành tại sự
Flutter Live, là phiên bản "ổn định" đầu tiên framework này.
11

2.2.2. Kiến trúc của Flutter

Hinh 1-3 Kiến trúc Flutter
Flutter được viét chia làm hai tầng:
- Tầng ở trên sử dụng ngôn ngữ Dart cung cấp các đoạn mã xây dựng lên

một ứng dụng Flutter. Các đoạn mã này cung cấp phương tiện để có thể thay
đổi và chỉnh sửa chúng. Từ đó giúp ứng dụng của lập trình viên có thể được

tùy chỉnh theo mong muốn. Tầng Framework này giúp lập trình viên thay đổi
mã nguồn ứng dụng ở thời điểm compile time.

- Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viét bằng ngôn

ngữ C++. Tầng Shell này chứa các công cụ trợ giúp ứng dụng Flutter trong q

trình chạy. Ở tầng này cịn có máy ảo Dart VM. Khái niệm máy ảo là khái niệm
vè một ứng dụng chạy song song với mã nguồn chính như một phần của ứng
dụng. Máy ảo Dart VM có ba nhiệm vụ chính bao gồm:

12


+ Làm ứng dụng trung gian giữa mã nguồn được viét bởi Dart và thiét bị

phần cứng (hoặc phần mèm nằm ngồi ứng dụng).

+ Thơng dịch các đoạn mã Dart theo phương thức JIT (Just in time) hoặc

AOT (Ahead of Time).

+ Thực thi các đoạn mã đã được thông dịch hoặc biên dịch cũng như

cung cấp các runtime system bao gồm garbage collector, và các thư viện cần có
khác.

→ Máy ảo Dart VM chịu trách nhiệm lớn nhất trong việc quản lý các

runtime system, hõ trợ debugging hoặc hot reload cho các ứng dụng viét bằng
Flutter.

2.2.3. Ưu điểm của Flutter so với các framework khác
- Flutter là bộ SDK đa nèn tảng, hõ trợ cả Android, iOS và web.
- Hõ trợ hot reload – các sửa đổi trong mã nguồn sẽ được cập nhật trực

tiép lên ứng dụng đang chạy. Ngồi ra Flutter cịn bổ sung thêm tính năng

stateful hot reload - cập nhật ngay lập tức các thay đổi lên ứng dụng đang chạy

mà không cần phải khởi động lại và giữ trạng thái đang có. Tính năng này đặc
biệt hữu ích, giúp nhà phát triển ứng dụng tiét kiệm rất nhièu thời gian.

- Ứng dụng được viét bằng Flutter hõ trợ hiển thị lên đén 60FPS (hoặc

120FPS tuỳ thiét bị). Cho hiệu ứng chuyển cảnh mượt mà, nâng cao trải
nghiệm người dùng.

13

- Một đối thủ khác của Flutter là React Native. Đây là framework được

tạo bởi Facebook. Tương tự như Flutter, React Native cũng cho phép các lập

trình viên sử dụng JavaScript để làm ứng dụng di động đa nèn tảng, trên cả
Android và iOS.

So sánh Flutter và React Native
Flutter

Khả năng tái
sử dụng
Cấu trúc mã
nguồn

Cài đặt môi
trường phát
triển
Các thư viện
hõ trợ

React Native

Flutter cho phép Overwriting React Native cho phép bạn
code. Hõ trợ tốt cho việc tái
sử dụng lại code, nhưng đièu
sử dụng vè sau.
này lại bị giới hạn trong một
vài components cơ bản.
Khi sử dụng Flutter, các

Developer có thể thực hiện
mọi thứ trên cùng một màn
hình, trong đó đặc biệt khơng
cần phải chuyển từ code sang
ché độ thiét ké hoặc ngược
lại,
vì vậy các trải nghiệm trên
Flutter khá tiét kiệm thời
gian.
Việc cài đặt Flutter diễn ra
nhanh chóng, tiện lợi với sự
hõ trợ của câu lệnh flutter
doctor -v giúp chẩn đoán lõi
trong quá trình cài đặt.
Có nhièu các third-party
packages đang được sử dụng
và đang ngày càng được phát
triển, và chúng thực sự rất
hữu dụng.

Sử dụng React Native cần có
thêm JSX hoặc XML để tạo
giao diện hay các công cụ
đặc biệt để tạo layout.

Cài đặt môi trường phát
triển React Native trông khá
loằng ngoằng và khó khăn
đối với các lập trình viên
mới.

Từ khi React Native trở lên
phổ bién, đã có rất nhièu
các thirdparty packages
được phát triển và được sử
dụng rất nhièu trong ứng
14


Độ phổ bién

Số lượng người sử dụng
Flutter đang ngày càng gia
tăng. Đặc biệt nhờ sự hậu
thuẫn tích cực từ phía Google.

Tài liệu tham
khảo

Cách viét tài liệu của Google
đơn giản, dễ hiểu nên việc tài
liệu hóa cho Flutter cơ bản là
hiệu quả.

dụng.

React Native có lượng
developer sử dụng đang
nhièu hơn bởi vì lượng
developer

sử
dụng
JavaScript rất dễ dàng để sử
dụng với các thư viện của
React

Việc tìm kiém tài liệu có lúc
khá khó khăn, phụ thuộc
vào các cơng cụ dev bên
ngồi, u cầu người dùng
phải kiém tài liệu cho từng
bộ mặc dù Facebook đã khá
nõ lực để xây dựng một kho
tài liệu trực quan nhất.

Bang 1-1 So sánh giữa Flutter và React Native

3. CÀI ĐẶT MƠI TRƯỜNG PHÁT TRIỂN FLUTTER
3.1. u cầu cấu hình phần cứng
- Hệ đièu hành: Windows 7, Windows 8.1, Windows 10
- Dung lượng ổ cứng: 1GB

- Công cụ: Visual Studio Code, Android Studio, IntelliJ,…

15


3.2. Hướng dẫn cài đặt Flutter
- Tải Flutter tại đường dẫn: />
rồi giải nén. Tránh giải nén thư mục flutter vào ổ C:\Program Files\

- Sau khi giải nén xong bạn nên thiét lập bién mơi trường, vào Control

Panel tìm kiém từ khóa System và chọn vào mục Edit the system environment
variables.

Hinh 2-1 Chỉnh sửa biến môi trường

16


+ Chọn Environment Variables, tại mục System Variables bạn chọn

PATH và nhấn tiép chọn Edit. Trong cửa sổ Edit System Variable bạn chọn
New và dán đường dẫn tới thư mục Flutter đã giải nén trước đó.

+ Trong thư mục vừa giải nén bạn tìm tập tin flutter_console.bat và khởi

chạy sau đó nhập lệnh flutter doctor -v

Hinh 2-2 Chẩn đoán Flutter với flutter doctor
Cài đặt extension/plugin hõ trợ cho IDE. Ví dụ như extension Flutter (sẽ

tự động cài thêm Dart) trên Visual Studio Code.

Hinh 2-3 Extension Flutter trên Visual Studio

17

3.3. Tạo project Flutter đầu tiên với Visual Studio Code
- Mở Visual Studio Code.

- Nhấn tổ hợp phím Ctrl + Shift + P sau đó gõ “new project” và ấn Enter

để tạo project mới.

Hinh 2-4 Tạo project Flutter mới trong Visual Studio Code

- Sau đó chọn thư mục đích nơi chứa project, và nhập tên project như

hình dưới.

Hinh 2-5 Nhập tên project Flutter mới

18


- Sau khi hồn tất q trình tạo project mới. Chúng ta sẽ thấy Visual

Studio Code có giao diện tương như sau.

Hinh 2-6 Giao diện Visual Studio Code sau khi tạo thành công project
Flutter

19


4. PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ CHI TIÊU CÁ NHÂN
VỚI FLUTTER

4.1. Đặt vấn đề
Quản lý, kiểm soát thu nhập cũng như hạn mức chi tiêu cá nhân vẫn luôn
là một vấn đề nhức nhối đối với hầu hết mọi người. Việc không lưu trữ, thống
kê các khoản thu chi làm chúng ta mất đi cái nhìn tổng thể cũng như khả năng
phân tích đánh giá mức tiêu dùng cá nhân và phần nào đó, trực tiếp dẫn đến
nhiều vấn đề phát sinh liên quan đến tài chính.
Sau thời gian tìm hiểu và cân nhắc, nhóm thấy đây là vấn đề mang tính
thực tế, vơ cùng thiết yếu nên nhóm đã quyết định lựa chọn đề tài này để
nghiên cứu và phát triển cho mơn học.

4.2. Phạm vi ứng dụng

Nhóm đối tượng ứng dụng hướng đến chủ yéu là các bạn trẻ địi hỏi tính
di động cao, cùng với đó là sự bùng nổ của nèn tảng ứng dụng di động.
Cụ thể, ứng dụng của nhóm hướng đén những người có nhu cầu ghi lại,

xem thống kê lịch sử các giao dịch tièn mặt, nhất là các bạn trẻ, học sinh, sinh
viên sống tại thành thị. Đây là nhóm người chi tiêu thường xuyên với các

khoản phí lặt vặt phát sinh trong đời sống hàng ngày. Do đó họ thường hay
quên mất mình sử dụng tiền vào đâu, thời điểm nào và vì mục đích gì.

Chính vì vậy, ứng dụng này sẽ là trợ thủ đắc lực giúp họ luôn có thể kiểm

tra lịch sử chi tiêu của mình. Từ đó có thể kiểm soát, nắm rõ những các khoản
thu chi của mình để nhận định mình đã sử dụng tiền hợp lý hay chưa và tiến

hành lên kế hoạch chi tiêu cho bản thân - vốn là một kỹ năng quan trọng khi
bắt đầu cuộc sống tự lập.

20


4.3. Mơ tả bài tốn
- u cầu chức năng: Phần mèm cơ bản hiển thị được danh sách các giao

dịch trong một đơn vị thời gian, có thể thêm xố sửa thông tin giao dịch, thể
hiện được tổng thu và tổng chi, thể hiện được số dư sau khi cập nhật thông tin

giao dịch. Cùng với đó, thể hiện tất cả thơng tin đó dưới dạng biểu đồ để có cái
nhìn tổng quát nhất.

- Yêu cầu phi chức năng: Phần mèm đáp ứng được với kích cỡ màn hình

của các thiét bị di động phổ biển, giao diện trực quan, sinh động, thao tác đơn

giản, tốc độ đáp ứng và phản hồi ở mức khá, tạo cảm giác thân thiện cho người
sử dụng.

4.4. Các chức năng chính
- Chức năng Hiển thị lịch sử giao dịch, thống kê được các khoản thu chi.
- Chức năng Thêm mới giao dịch vào lịch sử.
- Chức năng Xem chi tiét thông tin giao dịch.
- Chức năng Sửa thông tin giao dịch.

- Chức năng Xoá thông tin giao dịch.

- Chức năng Thống kê thông tin giao dịch bằng biểu đồ.
- Chức năng đặt lịch nhắc nhở thêm mới giao dịch.

21


4.5. Phân tích thiết kế
4.5.1. Lược đồ phân cấp chức năng

Hinh 3-1 Lược đồ phân cấp chức năng
4.5.2. Sơ đồ use case và đặc ta use case

Hinh 3-2 Use case tổng quát

22


Hinh 3-3 Use case hiển thị lịch sử giao dịch

Hinh 3-4 Use case thêm giao dịch

Hinh 3-5 Use case xem biểu đồ thống kê
4.5.3. Sơ đồ cơ sở dữ liệu

23


4.6. Giao diện ứng dụng
 Màn hình trang chủ

** Mơ tả cách sử dụng và xử lý trên màn hình:

- Màn hình đầu tiên là màn hình khởi chạy ứng dụng giúp người dùng nhận

diện phần mềm.

- Màn hình thứ 2 và 3 là màn hình chính của ứng dụng. Ở màn hình này, ta có
thể chia làm 4 phần:

+ Phần trên cùng là một danh sách các Tag (thẻ) cho phép người dùng

chọn để hiển thị theo tháng bằng cách nhấn vào các thẻ. Thẻ nào được chọn sẽ

đổi sang màu xanh và ngược lại sẽ là màu xám. Dữ liệu ở các phần phía dưới sẽ
hiển thị dựa trên tháng đang được chọn.

24


+ Phần thứ 2 là một Panel Hiển thị tổng số tiền thu nhập và chi tiêu

trong tháng và cho biết số dư khả dụng còn lại.

+ Phần thứ 3 là một ListView hiển thị danh sách các giao dịch trong

tháng. Nếu khơng có giao dịch nào xảy ra thì hiển thị giao diện như màn hình 2.
Khi nhấn giữ vào các giao dịch thì sẽ hiển thị giao diện cho phép chỉnh sửa
thơng tin giao dịch hoặc xóa giao dịch đó.

+ Phần thứ 4 là BottomNavigation gồm 2 Tab: Thống kê, Nhắc nhở và

một FloattingAction Button.

 FloattingAction Button: nhấn vào sẽ mở ra giao diện chọn loại

giao dịch cần thêm mới. Bên cạnh đó, khi người dùng cuộn

ListView các giao dịch ở màn hình chính theo hướng xuống thì
nút FloattingAction Button sẽ tự động ẩn đi để không làm che

khuất thông tin của các giao dịch và chỉ được hiển thị trở lại khi
người dùng cuộn màn hình lên.

 Tab Thống kê: nhấn vào sẽ mở ra giao diện biểu đồ thống kê chi
tiêu dựa trên các giao dịch của người dùng.

 Tab Nhắc nhở: nhấn vào sẽ mở ra giao diện cài đặt lịch nhắc nhở
cập nhật giao dịch hàng ngày.

25