Phát triển app ứng dụng công nghệ thực tế tăng cường hỗ trợ trẻ em tìm hiểu về phương tiện giao thông

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

TRỊNH QUỐC TUẤN

PHÁT TRIỂN APP ỨNG DỤNG CÔNG NGHỆ THỰC
TẾ TĂNG CƯỜNG HỖ TRỢ TRẺ EM TÌM HIỂU VỀ
PHƯƠNG TIỆN GIAO THƠNG

KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Cơng nghệ Kỹ thuật Điện tử - Viễn thông

HÀ NỘI - 2023


ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

TRỊNH QUỐC TUẤN

PHÁT TRIỂN APP ỨNG DỤNG CÔNG NGHỆ THỰC
TẾ TĂNG CƯỜNG HỖ TRỢ TRẺ EM TÌM HIỂU VỀ
PHƯƠNG TIỆN GIAO THƠNG

KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Cơng nghệ Kỹ thuật Điện tử - Viễn thông

Cán bộ hướng dẫn: TS. Nguyễn Kiêm Hùng

HÀ NỘI – 2023

VIETNAM NATIONAL UNIVERSITY, HANOI
UNIVERSITY OF ENGINEERING AND TECHNOLOGY

TRINH QUOC TUAN

DEVELOPMENT OF AN AUGMENTED REALITY
APPLICATION TO ENHANCE SUPPORT FOR
CHILDREN TO LEARN ABOUT
TRANSPORTATION

Major: Electronics and Telecommunications Engineering

Supervisor: Dr. Nguyen Kiem Hung

HANOI - 2023


TĨM TẮT
Tóm tắt: Khóa luận "Phát triển app ứng dụng công nghệ thực tế tăng cường hỗ trợ trẻ em tìm
hiểu về phương tiện giao thơng" nhằm tạo ra một ứng dụng công nghệ thực tế tăng cường AR
(Augmented Reality) trên nền tảng Flutter, giúp trẻ em tìm hiểu về phương tiện giao thông và
nâng cao nhận thức về an tồn giao thơng. Khóa luận tập trung vào nghiên cứu và phát triển
tính năng AR để tạo ra các hình ảnh và âm thanh của các phương tiện giao thông khác nhau, và
cho phép trẻ em tương tác với chúng bằng cách chạm vào màn hình hoặc di chuyển thiết bị.
Ứng dụng cũng cung cấp các nội dung giáo dục về các quy tắc và quy tắc an toàn giao thơng.
Ứng dụng sẽ có tính tương tác và sinh động để thu hút sự quan tâm và thích thú của trẻ em. Kết
quả của khóa luận là một app ứng dụng cơng nghệ thực tế tăng cường AR hồn chỉnh, chất
lượng và hữu ích cho trẻ em trong việc nâng cao nhận thức về an tồn giao thơng và tìm hiểu
về phương tiện giao thơng.

Từ khóa: Flutter, phương tiện giao thơng, an tồn giao thơng, giáo dục, trẻ em, AR.

i


ABSTRACT
Abstract: The thesis "Development of an augmented reality application to enhance support for
children to learn about transportation" aims to create an augmented reality (AR) application
on the Flutter platform to help children learn about transportation and improve their awareness
of traffic safety. The thesis focuses on researching and developing AR features to create images
and sounds of various transportation vehicles and allows children to interact with them by
touching the screen or moving the device. The application also provides educational content
about traffic rules and safety regulations. The application will be interactive and lively to attract
the attention and interest of children. The result of the thesis is a complete, high-quality, and
useful AR application for children to enhance their awareness of traffic safety and learn about
transportation vehicles.
Keyword: Flutter, transportation vehicles, traffic safety, children, augmented reality.

ii


LỜI CẢM ƠN
Trước khi bắt đầu, em muốn bày tỏ lòng biết ơn chân thành đến TS. Nguyễn
Kiêm Hùng, người đã hướng dẫn em suốt q trình thực hiện khóa luận tốt nghiệp với
tinh thần tận tâm và cung cấp tài liệu tham khảo hữu ích.
Em cũng muốn gửi lời cảm ơn đến các giáo viên công tác tại khoa Điện tử - Viễn
thơng và các cán bộ của Phịng đào tạo Đại học tại Trường Đại học Công nghệ, những
người đã tạo điều kiện tốt nhất để em có thể học tập và nghiên cứu khóa luận tốt nghiệp.
Em cũng xin bày tỏ lịng biết ơn đến gia đình và những người bạn thân thiết,
những người đã luôn ủng hộ và động viên em trong những thời điểm khó khăn để có thể

hồn thành tốt khóa luận này.
Trong q trình thực hiện khóa luận tốt nghiệp, em nhận thấy mình vẫn cịn thiếu
sót. Vì vậy, em rất mong nhận được sự chỉ bảo và góp ý tận tình từ phía các thầy cơ để
em có thể hồn thiện khóa luận tốt nghiệp một cách tốt nhất. Em xin chân thành cảm
ơn!

Hà Nội, ngày ... tháng 4 năm 2023

iii


LỜI CAM ĐOAN
Em xin cam đoan khóa luận “Phát triển app ứng dụng công nghệ thực tế tăng
cường hỗ trợ trẻ em tìm hiểu về phương tiện giao thơng” đều do em hoàn toàn thực hiện
dưới sự hướng dẫn và giám sát của TS. Nguyễn Kiêm Hùng.
Tất cả các nội dung tham khảo và nghiên cứu đều được trích dẫn nguồn gốc rõ
ràng trong mục tài liệu tham khảo. Nếu phát hiện bất kỳ sự gian lận nào, em xin chịu
trách nhiệm trước Hội đồng cũng như kết quả khóa luận của mình.

Hà Nội, ngày ... tháng 4 năm 2023
Tác giả

iv


MỤC LỤC

TÓM TẮT ............................................................................................................... i
LỜI CẢM ƠN .......................................................................................................iii
LỜI CAM ĐOAN ................................................................................................. iv

MỤC LỤC ............................................................................................................. v
DANH MỤC HÌNH ẢNH ................................................................................... vii
DANH MỤC BẢNG ..........................................................................................viii
Chương 1: Giới thiệu ............................................................................................. 1
1.1. Giới thiệu chung về đề tài ........................................................................... 1
1.2. Lý do chọn đề tài ........................................................................................ 1
1.3. Mục đích và mục tiêu của khóa luận .......................................................... 1
1.4. Phạm vi nghiên cứu .................................................................................... 2
1.5 Kết quả mong đợi ........................................................................................ 2
Chương 2: Cơ sở lý thuyết ..................................................................................... 3
2.1 Môi trường phát triển ................................................................................... 3
2.2.1 Android Studio ...................................................................................... 3
2.2.2. Git ........................................................................................................ 3
2.2.3. Visual Studio Code .............................................................................. 4
2.2 Giới thiệu về Flutter ..................................................................................... 5
2.2.1 Tổng quan về Flutter ............................................................................. 5
2.2.2 Ưu điểm ................................................................................................ 5
2.2.3 Nhược điểm .......................................................................................... 6
2.2.4 Kiến trúc Flutter .................................................................................... 6
2.2.5 Widget ................................................................................................... 7
2.2.6 Trạng thái (State) .................................................................................. 7
2.2.7 Vòng đời của stateful widget ................................................................ 8
2.2.8 Khái niệm về Widget tree và Element tree ........................................... 9

v


2.2.9 Các widget quan trọng ........................................................................ 10
2.2.10 Package ............................................................................................. 11
2.3 Giới thiệu về ngôn ngữ Dart ...................................................................... 12

2.3.1 Kiểu dữ liệu ........................................................................................ 13
2.3.2 Các biến và hàm (function)................................................................. 15
2.3.3 Toán tử (operators) ............................................................................. 15
2.4.4 Lập trình hướng đối tượng .................................................................. 16
2.4 Công nghệ ARCore .................................................................................... 18
2.5 Nguyên lý nhận diện ảnh ........................................................................... 19
2.5.1 Điểm đặc trưng ................................................................................... 19
2.5.2 Ghép nối .............................................................................................. 22
2.5.3 Phân bố điểm đặc trưng ...................................................................... 22
2.5.4 Áp dụng thực tế................................................................................... 23
CHƯƠNG 3: THIẾT KẾ HỆ THỐNG ................................................................ 25
3.1. Mơ hình user flow ..................................................................................... 25
3.2. Chi tiết và danh sách giao diện ................................................................. 26
3.2.1 Màn hình chào mừng .......................................................................... 26
3.2.2 Màn hình chính ................................................................................... 27
3.2.3 Màn hình chi tiết phương tiện ............................................................. 28
3.2.4 Màn hình thực tế tăng cường .............................................................. 29
3.2.5 Yêu thích ............................................................................................. 30
3.2.6 Tin tức ................................................................................................. 31
3.2.7 Cài đặt chung ...................................................................................... 32
3.3 Kết quả thử nghiệm và đánh giá ................................................................ 33
CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .................................... 36
4.1 Kết quả đạt được ........................................................................................ 36
4.2 Hướng phát triển ........................................................................................ 36
TÀI LIỆU THAM KHẢO ................................................................................... 38

vi


DANH MỤC HÌNH ẢNH

Hình 2.1: Kiến trúc Flutter. .................................................................................... 6
Hình 2.2: Minh hoạ cây widget của một chương trình Flutter cơ bản. ................. 7
Hình 2.3: Hệ thống state. ....................................................................................... 8
Hình 2.4: Vịng đời của stateful widget. ................................................................ 9
Hình 2.5: Widget tree, Element tree, Render tree................................................ 10
Hình 2.6: Mơ tả biến Null. ................................................................................... 13
Hình 2.7: Minh hoạ về thêm phần tử vào mảng. ................................................. 14
Hình 2.8: Ví dụ mơ phỏng tính chất kế thừa. ...................................................... 18
Hình 2.9: Các vùng đặc trưng được chọn. ........................................................... 19
Hình 2.10: Mơ tả Vùng 1. .................................................................................... 20
Hình 2.11: Mơ tả vùng 2. ..................................................................................... 20
Hình 2.12: Mơ tả vùng 3. ..................................................................................... 21
Hình 2.13: Mơ tả vùng 4. ..................................................................................... 21
Hình 2.14: Mơ tả các vị trí đặc trưng khác. ......................................................... 22
Hình 2.15: Mơ tả các điểm đặc trưng khác. ......................................................... 22
Hình 2.16: Mơ tả so sánh hai đối tượng đặc trưng. ............................................. 23
Hình 2.17: Mơ tả sự sai lệch của hai đối tượng. .................................................. 23
Hình 2.18: Mơ tả các điểm ảnh. ........................................................................... 24
Hình 3.1: Mơ tả mơ hình user flow...................................................................... 25
Hình 3.2: Mơ tả màn hình chào mừng. ................................................................ 26
Hình 3.3: Mơ tả màn hình chính. ......................................................................... 27
Hình 3.4: Mơ tả màn hình chi tiết phương tiện. .................................................. 28
Hình 3.5: Mơ tả màn hình thực tế tăng cường. .................................................... 29
Hình 3.6: Mơ tả màn hình mục u thích. ........................................................... 30
Hình 3.7: Mơ tả màn hình tin tức......................................................................... 31
Hình 3.8: Mơ tả màn hình cài đặt chung. ............................................................ 32
Hình 3.9: Thử nghiệm thực tế tăng cường. .......................................................... 34

vii

DANH MỤC BẢNG

Bảng 2.1: Mơ tả tốn tử số học. ........................................................................... 15
Bảng 2.2: Mơ tả tốn tử so sánh. ......................................................................... 15
Bảng 2.3: Mơ tả tốn tử logic. ............................................................................. 16
Bảng 3.1: Chú thích giao diện màn hình chào mừng. ......................................... 26
Bảng 3.2: Chú thích giao diện màn hình chính. .................................................. 27
Bảng 3.3: Chú thích giao diện màn hình chi tiết phương tiện. ............................ 29
Bảng 3.4: Chú thích giao diện màn hình thực tế tăng cường. ............................. 30
Bảng 3.5: Chú thích giao diện màn hình u thích. ............................................ 31
Bảng 3.6: Chú thích giao diện màn hình tin tức. ................................................. 32
Bảng 3.7: Chú thích giao diện màn hình cài đặt chung. ...................................... 33

viii


Chương 1: Giới thiệu
1.1. Giới thiệu chung về đề tài
Đề tài "Phát triển app ứng dụng công nghệ thực tế tăng cường hỗ trợ trẻ em tìm
hiểu về phương tiện giao thông" là một đề tài liên quan đến việc áp dụng công nghệ vào
giáo dục và tăng cường nhận thức về an tồn giao thơng cho trẻ em. Đề tài này đặc biệt
hữu ích trong bối cảnh tình trạng tai nạn giao thơng ở Việt Nam vẫn cịn khá nghiêm
trọng, đặc biệt là với những trẻ em thường xuyên di chuyển trên đường.
Ứng dụng công nghệ thực tế AR (Augmented Reality) sẽ được sử dụng trong
việc phát triển ứng dụng, giúp trẻ em hiểu rõ hơn về các phương tiện giao thơng và nhận
thức về an tồn giao thơng một cách trực quan, sinh động. Bên cạnh đó, ứng dụng cịn
cung cấp các tính năng giáo dục như hình ảnh, video, âm thanh và bài kiểm tra để giúp
trẻ em có thể học hỏi và hiểu thêm về các quy tắc an tồn giao thơng.

Với sự phát triển nhanh chóng của cơng nghệ, việc áp dụng AR vào giáo dục
đang được coi là một xu hướng tất yếu và mang lại nhiều lợi ích cho việc giảng dạy và
học tập. Đề tài này khơng chỉ hữu ích cho trẻ em mà cịn có thể được sử dụng trong các
hoạt động giáo dục và tun truyền an tồn giao thơng cho cả cộng đồng.
1.2. Lý do chọn đề tài
Việc chọn đề tài "Phát triển app ứng dụng công nghệ thực tế tăng cường hỗ trợ
trẻ em tìm hiểu về phương tiện giao thơng" đến từ việc nhận thấy tình trạng tai nạn giao
thông vẫn đang diễn ra phức tạp, đặc biệt là với trẻ em. Trẻ em thường khơng có đủ
nhận thức về an tồn giao thơng và có xu hướng thụ động khi di chuyển trên đường. Vì
vậy, việc tăng cường giáo dục về an tồn giao thơng cho trẻ em là vơ cùng cần thiết.
Ngồi ra, ứng dụng công nghệ thực tế đang được áp dụng rộng rãi trong các lĩnh
vực khác nhau, bao gồm giáo dục. Sử dụng AR trong giáo dục giúp cho việc học tập trở
nên sinh động, trực quan hơn và giúp cho trẻ em có thể học hỏi và hiểu thêm về các quy
tắc an tồn giao thơng một cách dễ dàng hơn. Vì vậy, việc phát triển một ứng dụng AR
hỗ trợ trẻ em tìm hiểu về phương tiện giao thơng là một lựa chọn tốt để cải thiện nhận
thức về an tồn giao thơng cho trẻ em và đồng thời đóng góp vào việc ứng dụng cơng
nghệ vào giáo dục.
1.3. Mục đích và mục tiêu của khóa luận
Mục tiêu của khóa luận là phát triển một ứng dụng công nghệ thực tế tăng cường
AR hỗ trợ trẻ em tìm hiểu về phương tiện giao thông và tăng cường nhận thức về an
1


tồn giao thơng cho trẻ em. Tìm hiểu về phương tiện giao thơng và quy tắc an tồn giao
thơng để xây dựng nội dung cho ứng dụng. Nghiên cứu và áp dụng công nghệ thực tế
tăng cường AR vào phát triển ứng dụng giáo dục. Thiết kế giao diện và tính năng cho
ứng dụng, đảm bảo tính tương tác và sinh động cho trẻ em. Kiểm thử và đánh giá ứng
dụng trên nhóm trẻ em để đánh giá tính hiệu quả của ứng dụng và đề xuất các cải tiến
nếu cần thiết.
Kết quả của khóa luận sẽ là một app di động ứng dụng công nghệ thực tế tăng

cường AR hỗ trợ trẻ em tìm hiểu về phương tiện giao thơng và nâng cao nhận thức về
an tồn giao thơng. Ứng dụng này sẽ cung cấp cho trẻ em các nội dung giáo dục về
phương tiện giao thông thông qua các tính năng tương tác và hình ảnh trực quan, giúp
trẻ em có thể học hỏi và hiểu thêm về quy tắc an tồn giao thơng một cách dễ dàng và
thú vị.
1.4. Phạm vi nghiên cứu
Phạm vi nghiên cứu của khóa luận là phát triển một app di động ứng dụng công
nghệ thực tế tăng cường AR trên nền tảng Flutter để hỗ trợ trẻ em tìm hiểu về phương
tiện giao thơng và tăng cường nhận thức về an tồn giao thơng cho trẻ em.
Cụ thể, khóa luận sẽ tập trung vào việc nghiên cứu và phát triển các tính năng
AR trên ứng dụng trên nền tảng Flutter, đảm bảo tính tương tác và sinh động cho trẻ em.
Nội dung giáo dục về phương tiện giao thông sẽ được xây dựng và tích hợp vào ứng
dụng, đồng thời đánh giá hiệu quả của ứng dụng trên nhóm trẻ em để đề xuất các cải
tiến nếu cần thiết.
1.5 Kết quả mong đợi
Xây dựng nội dung giáo dục về phương tiện giao thơng và quy tắc an tồn giao
thơng phù hợp với độ tuổi và sở thích của trẻ em.
Phát triển ứng dụng AR trên nền tảng Flutter, tích hợp các tính năng tương tác và
hình ảnh trực quan giúp trẻ em dễ dàng hiểu và học hỏi.
Đánh giá hiệu quả của ứng dụng trên nhóm trẻ em, đồng thời đề xuất các cải tiến
nếu cần thiết để tăng tính hiệu quả và tương tác của ứng dụng.
Tạo ra một sản phẩm hồn chỉnh, chất lượng và hữu ích cho trẻ em trong việc
nâng cao nhận thức về an tồn giao thơng và tìm hiểu về phương tiện giao thơng

2


Chương 2: Cơ sở lý thuyết
2.1 Môi trường phát triển
2.2.1 Android Studio

Android Studio [1] là một môi trường phát triển tích hợp (IDE) được phát triển bởi
Google để phát triển ứng dụng Android. Nó cung cấp một loạt các cơng cụ để xây dựng,
kiểm tra và triển khai các ứng dụng trên nền tảng Android.
Android Studio được xây dựng trên nền tảng IntelliJ IDEA của JetBrains, vì vậy
nó kế thừa nhiều tính năng mạnh mẽ của IntelliJ IDEA như lập trình tự động, kiểm tra
lỗi và tự động hồn thiện mã. Điều này giúp cho quá trình phát triển ứng dụng Android
trở nên dễ dàng và hiệu quả hơn.
Một số tính năng của Android Studio bao gồm: chỉnh sửa mã với các tính năng tự
động hồn thiện, xác định lỗi cú pháp và gợi ý mã, giám sát và kiểm tra hiệu suất ứng
dụng, quản lý tài nguyên, bao gồm các tệp hình ảnh, âm thanh, font chữ và các tài nguyên
khác, tạo và quản lý hệ thống tập tin và các thiết bị ảo để kiểm tra ứng dụng và các phiên
bản ứng dụng cho việc phát triển đa phiên bản, hỗ trợ tích hợp cơng cụ Google, bao gồm
Google Maps, Google Analytics, Google Play Services và Google Cloud Messaging.
Android Studio là một công cụ quan trọng cho những người phát triển ứng dụng
Android, và được sử dụng rộng rãi trên toàn thế giới.
2.2.2. Git
Git [2] là một hệ thống quản lý phiên bản mã nguồn mở phổ biến nhất hiện nay.
Git được sử dụng để theo dõi các thay đổi trong mã nguồn, quản lý các phiên bản khác
nhau của mã và hợp nhất các phiên bản khác nhau từ nhiều người cùng làm việc trên
cùng một dự án.
Git cho phép các nhà phát triển làm việc độc lập trên các phiên bản khác nhau của
mã, sau đó hợp nhất các thay đổi vào phiên bản chính của dự án. Điều này giúp cho các
nhà phát triển làm việc hiệu quả hơn và tránh ghi đè lên các thay đổi của nhau.
Một số khái niệm cơ bản trong Git bao gồm:
Repository (kho chứa): là nơi lưu trữ tất cả các phiên bản của dự án. Mỗi
repository có thể được chia thành nhiều nhánh (branch) khác nhau để phát triển và thử
nghiệm các tính năng mới mà khơng ảnh hưởng đến nhánh chính của dự án.

3

Commit (gửi): là quá trình ghi lại các thay đổi vào repository. Mỗi commit bao
gồm các thay đổi được thực hiện trong phiên bản đó và một thơng điệp mơ tả các thay
đổi đó.
Merge (hợp nhất): là q trình kết hợp các phiên bản khác nhau của mã vào phiên
bản chính của dự án.
Pull (kéo): là q trình tải các thay đổi mới nhất từ repository về máy tính cá nhân
của mình để làm việc trên các thay đổi đó.
Push (đẩy): là quá trình đẩy các thay đổi đã được commit từ máy tính cá nhân lên
repository để chia sẻ với các nhà phát triển khác.
Git là một công cụ quan trọng trong quá trình phát triển phần mềm và được sử
dụng rộng rãi trong cộng đồng phát triển phần mềm nguồn mở. Nó cũng được sử dụng
trong các cơng ty và tổ chức lớn để quản lý các dự án phần mềm.
2.2.3. Visual Studio Code
Visual Studio Code [3] là một trình biên tập mã nguồn mở và miễn phí, được
phát triển bởi Microsoft. Nó được thiết kế để hỗ trợ phát triển ứng dụng web và các ứng
dụng đa nền tảng khác, bao gồm cả ứng dụng di động và desktop.
Visual Studio Code có nhiều tính năng hữu ích cho các nhà phát triển, bao gồm:
-

-

-

-

-

Hỗ trợ nhiều ngôn ngữ lập trình: Visual Studio Code hỗ trợ nhiều ngơn ngữ
lập trình phổ biến như C++, Java, Python, PHP, JavaScript, HTML, CSS và

nhiều ngôn ngữ khác.
Giao diện người dùng thân thiện: Giao diện của Visual Studio Code đơn
giản và dễ sử dụng, cho phép người dùng tùy chỉnh các bố cục trang và bố
trí của trình biên tập để phù hợp với nhu cầu sử dụng của mình.
Chỉnh sửa mã nguồn thơng minh: Visual Studio Code cung cấp các tính
năng chỉnh sửa mã nguồn thơng minh, bao gồm tính năng gợi ý, kiểm tra
lỗi và định dạng mã nguồn tự động, giúp người dùng tiết kiệm thời gian khi
phát triển.
Hỗ trợ tích hợp với các cơng cụ phát triển phần mềm: Visual Studio Code
tích hợp với nhiều cơng cụ phát triển phần mềm phổ biến như Git, GitHub,
Subversion, Docker và nhiều cơng cụ khác.
Hỗ trợ các tiện ích mở rộng: Visual Studio Code cung cấp một thư viện các
tiện ích mở rộng để giúp người dùng mở rộng tính năng của trình biên tập
và tùy chỉnh quy trình phát triển của mình.
4


Visual Studio Code là một trong những trình biên tập mã nguồn phổ biến nhất
hiện nay và được sử dụng rộng rãi trong cộng đồng phát triển phần mềm.
2.2 Giới thiệu về Flutter
2.2.1 Tổng quan về Flutter
Flutter [4] là một bộ công cụ phát triển phần mềm mã nguồn mở giúp các lập trình
viên xây dựng ứng dụng trên nền tảng di động, web và máy tính với một codebase duy
nhất. Flutter được giới thiệu vào năm 2015 sau đó được thử nghiệm và phát triển cho
đến khi ra mắt phiên bản chính thức vào ngày 4 tháng 12 năm 2018. Từ đó Flutter đã
phát triển mạnh mẽ và trở thành đối thủ đáng gờm với các công cụ lập trình đa nền tảng
trước đó, hiện tại thì Flutter đang là một trong những giải pháp phát triển ứng dụng đa
nền tảng được sử dụng nhiều nhất với cộng đồng không ngừng phát triển [5].
Flutter sử dụng ngôn ngữ lập trình Dart để viết mã. Nó cung cấp một bộ công cụ
phát triển gồm các thư viện và công cụ để giúp bạn phát triển ứng dụng dễ dàng hơn.

Flutter sử dụng kiến trúc Widget để xây dựng giao diện người dùng, cho phép bạn tạo
ra các ứng dụng với giao diện đẹp và tương tác mượt mà.
Với khả năng tạo ra các ứng dụng đa nền tảng nhanh chóng và dễ dàng, Flutter
đã được sử dụng rộng rãi trong các dự án phát triển ứng dụng di động và web. Flutter
cũng đang trở thành một trong những framework phổ biến nhất để xây dựng ứng dụng
di động với nhiều ưu điểm vượt trội so với các công nghệ cạnh tranh.
2.2.2 Ưu điểm
Tiết kiệm thời gian và nhân lực: Flutter là một cơng cụ lập trình đa nền tảng, vì
vậy ta có thể tạo ứng dụng cho cả Android và iOS. Từ đó tiết kiệm được thời gian và
nguồn nhân lực khi phát triển, kiểm thử, cập nhật và bảo trì.
Hiệu năng tuyệt vời: Flutter sử dụng ngơn ngữ Dart, sẽ được biên dịch trực tiếp
thành mã máy mà không phải thông qua các cách giao tiếp trung gian khác. Vì thế ứng
dụng sẽ hoạt động với hiệu năng cao hơn các công cụ phát triển ứng dụng đa nền tảng
khác.
Hỗ trợ hot reload: Hot reload cho phép trực tiếp thay đổi giao diện trên máy ảo
hay thiết bị thật mà không cần phải rebuild hay khởi động lại ứng dụng, từ đó tiết kiệm
thời gian của lập trình viên và giúp việc xây dựng ứng dụng, sửa lỗi dễ dàng hơn.
Khả năng tương thích: Flutter sử dụng giao diện của chính nó nên lập trình viên
sẽ gặp ít vấn đề liên quan tới khả năng tương thích hơn vì các giao diện này ít gặp vấn
đề trên các phiên bản hay hệ điều hành khác nhau.
5


Mã nguồn mở: Flutter là một công nghệ mã nguồn mở được phát triển bởi Google
và cộng đồng lập trình viên hoạt động tích cực. Việc phát triển và ra mắt ứng dụng với
Flutter hồn tồn miễn phí. Nhiều gói mở rộng và tài liệu được đóng góp giúp việc phát
triển phần mềm bằng Flutter trở nên dễ dàng hơn.
2.2.3 Nhược điểm
Kích thước ứng dụng: Do Flutter sử dụng một lượng lớn mã để tạo ra các giao
diện đẹp và tương tác mượt mà, nên kích thước ứng dụng Flutter thường lớn hơn so với

ứng dụng được viết bằng các cơng nghệ khác. Điều này có thể là vấn đề đối với các ứng
dụng có dung lượng giới hạn.
Cập nhật thường xuyên: Flutter là một công nghệ đang phát triển nhanh chóng,
do đó nó thường xuyên được cập nhật với các phiên bản mới. Điều này có thể làm cho
việc bảo trì và nâng cấp ứng dụng trở nên khó khăn hơn.
2.2.4 Kiến trúc Flutter
Flutter gồm hai tầng chính là Engine và Framework.
Tầng engine chứa một thư viện đồ họa 2D giúp render giao diện người dùng và
máy ảo Dart là môi trường để thực thi mã và biên dịch mã Dart. Đây cũng là nơi thực
hiện việc kết nối với hệ thống.
Flutter framework: được viết bằng Dart, cung cấp các lớp, chức năng và widget
được dùng để tạo ứng dụng Flutter. Lập trình viên sẽ sử dụng chủ yếu tầng này để lập
trình. Flutter framework cung cấp hai tập hợp widget là Material và Cupertino ứng với
hai hệ điều hành Android và iOS.

Hình 2.1: Kiến trúc Flutter.

6


2.2.5 Widget
“Mọi thứ đều là widget” là khái niệm chính của Flutter. Widget trong Flutter là các
thành phần sẽ xây dựng UI của ứng dụng. Mọi thứ bao gồm văn bản, hình dạng, hoạt
ảnh đều được tạo thơng qua widget.
Các widget trong chương trình được tổ chức dưới dạng cây, widget chứa các
widget khác gọi là widget cha, widget được chứa trong widget khác gọi là widget con.
Ngay cả ứng dụng Flutter cũng là một widget lớn chứa các widget khác.

Hình 2.2: Minh hoạ cây widget của một chương trình Flutter cơ bản.

2.2.6 Trạng thái (State)
Widget gồm hai loại là “Stateless widget” và “Stateful widget.
Stateless widget: Stateless widget là immutable, có nghĩa là tất cả các fields của
nó đều khơng thay đổi kể từ khi chúng ta render đến khi destroy chúng.

7


Stateless Widget khơng mang trạng thái, nó chỉ thay đổi khi nó được khởi tạo lại.
Chúng chỉ đơn thuần nhận dữ liệu và hiển thị một cách thụ động, việc tương tác với nó
khơng sinh ra bất kỳ một event nào để chính bản thân nó phải render lại.
Stateful widget: Ngược với stateless widget, stateful widget là những widget có
State. State ở đây không chỉ mang trạng thái của một biến, nó mang trạng thái của cả
Widget.
Một stateful widget sẽ track những sự thay đổi của state và update UI dựa trên
những thay đổi đó [10].

Hình 2.3: Hệ thống state.

2.2.7 Vòng đời của stateful widget
Vòng đời của một stateful widget trải qua các bước sau:
-

-

createState: hàm này tạo một State ứng với Stateful element. Bước này
được gọi để tạo widget.
initState: hàm này được gọi ngay sau khi widget được tạo ra, ở đây ta
thường khởi tạo giá trị cho dữ liệu của stateful widget.
dirty: khi thuộc tính dirty của stateful widget có giá trị là true Flutter

framework sẽ biết rằng widget này sẽ được vẽ lại ở khung hình sau. Lúc
này một widget mới được tạo để sẵn sàng thay thế cho widget cũ trong
widget tree.
build: hàm này thực hiện vẽ widget lên màn hình.
clean: thuộc tính dirty có giá trị là false, widget khơng cần vẽ lại ở khung
hình sau.

8


-

didUpdateWidget: hàm này được gọi khi dữ liệu của widget cha thay đổi

-

và widget này phải vẽ lại, giá trị dirty sẽ được đặt là true.
setState: hàm này sẽ thay đổi giá của dữ liệu trong state và thông báo với
framework rằng state hiện tại có thay đổi, giá trị dirty sẽ được đặt là true.
Hàm này có thể được gọi bởi frameowork hoặc lập trình viên.

-

dispose: hàm này được gọi khi State object bị xóa khỏi widget tree.

Hình 2.4: Vòng đời của stateful widget.

2.2.8 Khái niệm về Widget tree và Element tree
Widget tree [10] là tất cả các widget trong chương trình, ta có thể tác động trực
tiếp tới widget tree thơng qua các đoạn mã. Widget tree có thể xem là các cấu hình ta có

thể thiết lập, nó khơng trực tiếp được vẽ lên màn hình mà nó mơ tả những gì sẽ được vẽ
lên màn hình. Widget tree sẽ thay đổi mỗi khi widget được thay mới hoặc rebuild.
Element tree được tạo bởi flutter framework dựa trên widget tree, có nhiệm vụ liên
kết các widget trong widget tree với các đối tượng được vẽ lên màn hình. Element tree
khơng phải lúc nào cũng thay đổi khi widget rebuild.

9


Hình 2.5: Widget tree, Element tree, Render tree.

2.2.9 Các widget quan trọng
2.2.9.1 Widget tạo ứng dụng và thiết lập trang
MaterialApp/CupertinoApp: widget gói nhiều widget thường dùng để xây dựng
ứng dụng theo phong cách có sẵn cho Android và iOS. Widget này cung cấp các chức
năng như tương tác phím vật lý, vuốt để lùi, tùy chỉnh chủ đề, … đây là widget vô
cùng quan trọng để quyết định phong cách của ứng dụng.
Scaffold/CupertinoPageScaffold: widget đóng vai trị như phần nền để bố trí các
widget khác theo phong cách Material (Android) hoặc Cupertino (iOS). Loại widget
này cung cấp nơi để đặt các widget như NavigationBar, AppBar, BottomSheet, …
2.2.9.2 Widget dùng để bố trí
Container: một widget rất đa dụng và thường được sử dụng trong Flutter. Widget
này có thể kích thước tùy chỉnh, thêm viền, tơ màu, chỉnh hình dáng, … Nó có thể
chứa một widget con và căn chỉnh widget con theo nhiều cách khác nhau.
Row/ Column: dùng để đặt nhiều widget cạnh nhau theo chiều ngang hoặc dọc.
Các widget con có thể được căn chỉnh theo nhiều cách khác nhau. Để tạo kiểu Row/
Column, lập trình viên thường kết hợp sử dụng với Container.
Flexible/ Expanded: giúp tùy chỉnh kích thước của widget trong Row hoặc
Column.

10


Stack: dùng để đặt nhiều widget chồng lên nhau, khi dùng Stack có thể dùng
widget Positioned để hỗ trợ đặt widget ở một vị trí dễ dàng hơn.
Card: một Container có sẵn các thiết lập tạo kiểu như đổ bóng, màu nền, bo trịn
góc,
2.2.9.3 Widget cuộn
GridView: dùng để chứa tập hợp nhiều widget con và được sắp xếp theo dạng
lưới. Thường dùng để chứa dữ liệu dạng chuỗi và có số lượng lớn.
ListView: dùng để chứa tập hợp nhiều widget con, giống như Row và Column
nhưng có thể cuộn. Thường dùng để chứa dữ liệu dạng chuỗi và có số lượng lớn.
ListTile: một container đã được tạo kiểu sẵn thường dùng để tạo các phần tử con
trong danh sách. Mỗi ListTile hỗ trợ tạo widget với phần đầu, tiêu đề, các nút hành
động. Widget tiện dụng để tạo UI cho nhiều loại ứng dụng trên thị trường.
2.2.9.4 Widget chứa nội dung
Text: widget dùng để chứa văn bản, văn bản có thể được chỉnh kiểu, chỉnh cách
hiển thị, … Đây là một trong những widget không thể thiếu với Flutter.
Image: widget dùng để chứa và hiển thị ảnh, hỗ trợ từ nhiều nguồn (trong bộ nhớ,
từ internet, …).
Icon: dùng để hiển thị biểu tượng, hỗ trợ nhiều biểu tượng đa dạng theo phong
cách Material, Cupertino. Có thể thêm nhiều biểu tượng từ bên ngoài một cách dễ dàng.

2.2.9.5 Widget nhận đầu vào của người dung
TextField: tạo ra một trường để người dùng có thể nhập văn bản, hỗ trợ nhiều loại
bàn phím.
ElevatedButton: các loại nút bấm để tương
dùng để xử lý hành động khi nhấn qua thuộc tính onPress.

tác

với

ứng

dụng,

GestureDetector: có thể kết hợp với hầu hết mọi loại widget để xử lý các hành
động của người dùng như bấm, nhấp đôi, vuốt, kéo, … trên các widget này.
2.2.10 Package
2.2.10.1 Khái niệm
Flutter hỗ trợ nhiều thư viện ngoài (được gọi là package) được tạo bởi lập trình
viên của Flutter hay những lập trình viên khác trong cộng đồng Flutter và hệ sinh thái

11


Dart. Những package này giúp việc phát triển phần mềm trở nên nhanh chóng và dễ
dàng hơn.
Những chức năng cần phải gọi platform-specific API cũng có thể được hỗ trợ thơng
qua package, những package này có thể giúp lập trình viên không cần phải viết bất cứ
platform-specific code nào nhưng vẫn tạo được các chức năng nêu trên.
Các package có thể được tìm ở trang />2.2.10.2 Sử dụng package
Chọn package cần thêm tại sau đó thêm tên package dưới mục
dependencies. Có thể thêm phiên bản phía sau tên package để cài phiên bản cụ thể.
Sau đó tiến hành cài đặt package bằng cách thực thi lệnh “flutter pub get” trong
terminal.
Tìm đến widget cần dùng và import package theo cú pháp ở trang pub.dev. Đôi
khi cần phải khởi động lại ứng dụng để tránh những hành vi kì lạ hoặc lỗi như
MissingPluginException khi sử dụng package.

2.2.10.3 Một số package thường dùng
path: việc lấy thông tin đường dẫn là việc thường làm đối với ứng dụng di động,
đây là thư viện giúp ta làm việc đó dễ dàng khồng cần phải thơng qua platform-specific
code.
location: thư viện hỗ trợ lấy vị trí theo thời gian thực.
intl: thư viện thường dùng để định dạng ngày tháng, số.
arcore_flutter_plugin: đặc biệt cần cho hỗ trợ liên quan điến ARCore

2.3 Giới thiệu về ngôn ngữ Dart
Dart [6] là một ngơn ngữ lập trình đa nền tảng, được phát triển bởi Google và được
sử dụng để xây dựng các ứng dụng web, mobile, desktop và IoT. Dart được thiết kế để
cung cấp một cú pháp đơn giản, dễ đọc và dễ học cho các nhà phát triển.
Dart hỗ trợ kiểu tĩnh và kiểu động, với cơ chế thu gom rác tự động, đảm bảo rằng
các đối tượng khơng cịn được sử dụng sẽ bị thu hồi bộ nhớ tự động. Nó cũng cung cấp
nhiều tính năng tiên tiến như async/await, generics, extension methods và mix-ins, cho
phép các lập trình viên viết mã dễ dàng hơn và hiệu quả hơn.
Dart cũng có các cơng cụ mạnh mẽ cho phát triển ứng dụng, bao gồm trình biên
dịch JIT và AOT cho tốc độ cao và một bộ thư viện chuẩn phong phú, bao gồm các gói
12


cho HTTP, JSON, giao tiếp WebSocket, đồ họa, xử lý tệp và cả lập trình hướng đối
tượng.
Dart được sử dụng rộng rãi trong Flutter, một framework phát triển ứng dụng di
động đa nền tảng của Google, và được hỗ trợ trong nhiều nền tảng khác nhau như Google
Cloud Platform và Firebase.

2.3.1 Kiểu dữ liệu
Các kiểu dữ liệu chính trong Dart hầu hết giống với các ngơn ngữ lập trình khác,
gồm 2 kiểu chính:

-

Non-nullable types

-

Nullable types

Chương trình sẽ bị crash (lỗi) nếu ta truy cập các phương thức của biến với giá trị
null.

Hình 2.6: Mơ tả biến Null.

2.3.1.1 Kiểu String
Kiểu String trong Dart sử dụng để biểu diễn chuỗi ký tự Unicode (UTF-16) (bạn
có thể sử dụng các xâu có kí tự tiếng Việt hoặc bất cứ thứ tiếng nào mà sử dụng được
với mã Unicode.

13


Nhìn chung string trong Dart giống các ngơn ngữ khác.
Ví dụ: String myName = Tuan;

2.3.1.2 Kiểu num, int, double
Kiểu dữ liệu num là viết tắt của một số.
int là kiểu số nguyên. Tùy thuộc vào bộ nhớ máy, nền tảng máy (32 bit hay 64 bit)
mà kiểu số nguyên trong Dart có giá trị từ -263 đến 263 - 1.
double là kiểu số thực. Các phiên bản cũ của Dart thì kiểu số thực bắt buộc phải
có chứa dấu “.”

Ví dụ: int age = 25; double = 125.50;

2.3.1.3 Kiểu Bool
Nó sử dụng từ khóa bool để biểu thị giá trị Boolean true hoặc false.
Ví dụ: bool var_name = true; (Hoặc) bool var_name = false;

2.3.1.4 Kiểu mảng (array)
Kiểu dữ liệu array (danh sách – List) trong Dart được sử dụng để biểu diễn cho
một tập hợp các đối tượng theo một thứ tự nhất định. Kiểu array trong Dart tương đương
với kiểu mảng Array trong các ngôn ngữ khác (java, kotlin). Dữ liệu trong array được
lưu trữ theo vị trí.

Hình 2.7: Minh hoạ về thêm phần tử vào mảng.

14