KHÓA LUẬN tốt NGHIỆP tìm HIỂU FLUTTER và xây DỰNG ỨNG DỤNG MINH HOẠ

- Tìm hiểu các công nghệ phù hợp có thể kết hợp với Flutter để xây dựng ứng dụng trên nền tảng Android và iOS.. - Biết cách sử dụng các công nghệ hỗ trợ để xây dựng ứng dụng minh họa.

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM

GIẢNG VIÊN HƯỚNG DẪN

TS HUỲNH NGỌC TÍN THS NGUYỄN CÔNG HOAN

THÔNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆP

Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số ……… ngày ……… của Hiệu trưởng Trường Đại học Công nghệ Thông tin

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

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

Độc Lập - Tự Do - Hạnh Phúc

TP HCM, ngày tháng năm 2020

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP

CỦA CÁN BỘ HƯỚNG DẪN Tên khóa luận:

TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG MINH HOẠ

Dương Phước Hải Thọ 15520851 TS Huỳnh Ngọc Tín

Đỗ Thành Thắng 15520787 ThS Nguyễn Công Hoan

Đánh giá Khóa luận

1 Về cuốn báo cáo:

Số trang Số chương

Số bảng số liệu Số hình vẽ

Số tài liệu tham khảo Sản phẩm

Một số nhận xét về hình thức cuốn báo cáo: ………

………

………

………

………

………

………

………

3 Về chương trình ứng dụng: ………

………

………

………

4 Về thái độ làm việc của sinh viên: ………

………

………

………

Đánh giá chung: ………

………

………

Điểm từng sinh viên: Dương Phước Hải Thọ: … /10

Đỗ Thành Thắng: … /10

Người nhận xét

(Ký tên và ghi rõ họ tên)

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

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

Độc Lập - Tự Do - Hạnh Phúc

TP HCM, ngày … tháng … năm 2020

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP

CỦA CÁN BỘ PHẢN BIỆN Tên khóa luận:

TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG MINH HOẠ

Dương Phước Hải Thọ 15520851 ………

Đỗ Thành Thắng 15520787 Đánh giá Khóa luận 1 Về cuốn báo cáo Số trang Số chương

Số bảng số liệu Số hình vẽ

Số tài liệu tham khảo Sản phẩm

Một số nhận xét về hình thức cuốn báo cáo: ………

………

………

………

2 Về nội dung nghiên cứu:

………

………

………

3 Về chương trình ứng dụng: ………

………

………

………

4 Về thái độ làm việc của sinh viên: ………

………

………

………

Đánh giá chung:………

………

………

Điểm từng sinh viên: Dương Phước Hải Thọ: … /10

Đỗ Thành Thắng: … /10

Người nhận xét

(Ký tên và ghi rõ họ tên)

LỜI CẢM ƠN

Lời đầu tiên nhóm em xin chân thành cảm ơn các Thầy (Cô) của trường Đại học Công Nghệ Thông Tin đặc biệt là các Thầy (Cô) trong Khoa Công Nghệ Phần Mềm đã tận tình chỉ dạy, truyền đạt kiến thức quý báu trong suốt thời gian học tập tại trường Tiếp

đó xin chân thành cảm ơn sâu sắc đến TS Huỳnh Ngọc Tín và ThS Nguyễn Công Hoan đã chỉ bảo và hướng dẫn nhóm em trong suốt quá trình thực hiện đề tài

Bên cạnh đó, xin cảm ơn những người thân, bạn bè đã giúp đỡ, động viên để nhóm

có thêm động lực học tập trong suốt thời gian qua

Cuối cùng, dù đã cố gắng hoàn thành đề tài với tất cả sự nỗ lực, nhưng khoá luận không tránh khỏi những thiếu sót, nhóm chúng em rất mong nhận được những ý kiến đóng góp chân thành từ quý thầy cô và các bạn Chúc quý thầy cô luôn có nhiều sức khỏe và thành công trong cuộc sống

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

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

ThS Nguyễn Công Hoan

Thời gian thực hiện: Từ ngày 16/03/2020 đến ngày 11/07/2020

Sinh viên thực hiện:

Dương Phước Hải Thọ – 15520851

- Tìm hiểu các công nghệ phù hợp có thể kết hợp với Flutter để xây dựng ứng dụng trên nền tảng Android và iOS

• Đối tượng:

- Các công cụ và thư viện của Flutter

- Các công nghệ phù hợp hỗ trợ xây dựng ứng dụng minh họa

- Những cá nhân có nhu cầu cập nhật tin tức, giải trí

• Phương pháp thực hiện

- Làm việc nhóm hai thành viên, lên kế hoạch và thực hiện bằng cách trao đổi trực tiếp hoặc gián tiếp qua các kênh chat online

- Tham khảo các ứng dụng tương tự

- Tham khảo ý kiến của giảng viên hướng dẫn để đạt kết quả tốt nhất

- Thu thập phản hồi của người dùng để hoàn thiện ứng dụng

• Kết quả mong đợi

- Hiểu được các kiến thức liên quan đến Flutter

- Biết cách sử dụng các công cụ hỗ trợ lập trình đa nền tảng với Flutter

- Biết được các kỹ thuật lập trình với Flutter

- Biết cách sử dụng các công nghệ hỗ trợ để xây dựng ứng dụng minh họa

- Có khả năng dùng Flutter để xây dựng các ứng dụng đa nền tảng

- Hoàn thành ứng dụng tổng hợp tin tức, bảng xếp hạng bài hát đáp ứng nhu cầu cập nhật tin tức và giải trí của người dùng với giao diện trực quan, hoạt động tốt trên cả hai nền tảng Android và iOS

Kế hoạch thực hiện:

1 Phân tích và lên kế hoạch cho đề tài 16/03/2020 – 25/03/2020

1.2 Tìm hiểu và tham khảo các ứng dụng đã có Thọ, Thắng

2.2 Tìm hiểu về các công cụ, thư viện thu thập dữ liệu Thọ

3 Thiết kế và xây dựng ứng dụng công cụ thu thập,

3.1 Xây dựng chức năng thu thập dữ liệu tin tức Thọ

3.2 Xây dựng chức năng thu thập dữ liệu bảng xếp hạng bài hát Thọ

3.3 Xây dựng API để giao tiếp giữa ứng dụng với cơ sở dữ liệu Thắng

4 Xây dựng các chức năng, giao diện về tin tức 15/05/2020 – 01/06/2020

4.2 Xây dựng màn hình hiển thị danh sách bài viết theo chuyên mục Thắng

4.3 Xây dựng chức năng cho màn hình nội dung bài viết Thắng

4.6 Xây dựng chức năng chế độ tối, chế độ đọc nhanh Thọ

4.9 Tìm hiểu FPT.AI API và xây dựng chức năng chuyển văn bản

thành giọng nói

Thọ

4.10 Xây dựng chức năng cho màn hình lưu bài viết Thắng

5 Xây dựng các chức năng, giao diện về âm nhạc 01/05/2020 - 15/06/2020

5.1 Phác thảo và thiết kế các màn hình giao diện Thọ, Thắng

5.2 Xây dựng màn hình bảng xếp hạng bài hát Thắng

5.3 Xây dựng chức năng phát bài hát từ danh sách Thắng

5.4 Xây dựng các chức năng màn hình chi tiết bài hát Thọ, Thắng

5.6 Xây dựng các chức năng cho màn hình bát hát yêu thích Thọ

6 Kiểm thử, hoàn thiện và đánh giá kết quả đạt

6.3 Đánh giá kết quả đạt được và đề ra hướng phát triển Thọ, Thắng

Xác nhận của CBHD

(Ký tên và ghi rõ họ tên)

Tp HCM, ngày 12 tháng 05 năm 2020

Sinh viên (Ký tên và ghi rõ họ tên)

MỤC LỤC

TÓM TẮT KHOÁ LUẬN 1

Chương 1 MỞ ĐẦU 2

1.1 Lý do chọn đề tài 2

1.2 Mục tiêu và phạm vi đề tài 2

1.2.1 Mục tiêu 2

1.2.2 Phạm vi đề tài 3

1.3 Đối tượng 3

1.4 Kết quả mong đợi 3

Chương 2 TÌM HIỂU VỀ FLUTTER 5

2.1 Tổng quan về Flutter 5

2.1.1 Tổng quan và lịch sử 5

2.1.2 Ưu điểm và nhược điểm của Flutter 6

2.1.3 So sánh Flutter với React Native 7

2.2 Ngôn ngữ Dart 8

2.3 Kiến trúc Flutter 9

2.4 Widget 10

2.4.1 Khái niệm 10

2.4.2 Phân loại widget 12

2.4.3 Khái niệm về Widget tree và Element tree 13

2.4.4 Vòng đời của stateful widget: 14

2.4.5 Các widget quan trọng 15

2.5 Animation 17

2.5.1 Khái niệm 17

2.5.2 Tạo animation 18

2.6 Sử dụng platform-specific code 21

2.6.1 Khái niệm 21

2.6.2 Ví dụ minh họa 22

2.7 Package 25

2.7.1 Khái niệm 25

2.7.2 Sử dụng package 26

2.7.3 Một vài package thường dùng 26

Chương 3 CÁC CÔNG NGHỆ ÁP DỤNG 27

3.1 Flask framework 27

3.1.1 Tổng quan về Flask framework 27

3.1.2 Áp dụng Flask framework vào đề tài 27

3.1.3 Lý do sử dụng Flask framework 27

3.2 Microsoft Azure 27

3.2.1 Khái niệm 27

3.2.2 Áp dụng Microsoft Azure vào đề tài 28

3.2.3 Lý do sử dụng Microsoft Azure 28

3.3 MySQL 28

3.3.1 Khái niệm 28

3.3.2 Áp dụng MySQL vào đề tài 29

3.3.3 Lý do sử dụng MySQL 29

3.4 FPT.AI 29

3.4.1 Khái niệm 29

3.4.2 Áp dụng FPT.AI vào đề tài 29

3.4.3 Lý do sử dụng MySQL 29

3.5 Firebase 30

3.5.1 Khái niệm 30

3.5.2 Áp dụng Firebase vào đề tài 30

3.5.1 Lý do sử dụng Firebase 30

Chương 4 PHÂN TÍCH VÀ THIẾT KẾ 32

4.1 Mô hình use case 32

4.1.1 Sơ đồ use case 32

4.1.2 Danh sách người dùng 33

4.1.3 Danh sách use case 33

4.2 Các sơ đồ và luồng xử lý 35

4.2.1 Tìm kiếm bài viết 35

4.2.2 Xem nội dung bài viết 36

4.2.3 Xem lịch sử bài viết 39

4.2.4 Xem bài viết đã lưu 40

4.2.5 Thay đổi giao diện 42

4.2.6 Lọc chuyên mục 45

4.2.7 Xem bảng xếp hạng bài hát 46

4.2.8 Chơi bài hát 48

4.2.9 Xem danh sách bài hát yêu thích 50

4.2.10 Gửi thông báo bài viết, bài hát nổi bật 51

4.2.11 Thu thập bài viết, bài hát 52

4.3 Thiết kế kiến trúc 54

4.3.1 Mô hình kiến trúc 54

4.3.2 Mô tả 54

4.4 Thiết kế cơ sở dữ liệu 55

4.4.1 Tổng quan cơ sở dữ liệu 55

4.4.2 Mô tả chi tiết các các table trong cơ sở dữ liệu 56

4.5 Thiết kế giao diện 58

4.5.1 Giao diện danh sách bài viết 58

4.5.2 Giao diện tìm kiếm bài viết 59

4.5.3 Giao diện nội dung bản tin 61

4.5.4 Giao diện lịch sử tin đã xem 63

4.5.5 Giao diện tin đã lưu 64

4.5.6 Giao diện bảng xếp hạng bài hát 66

4.5.7 Giao diện chơi bài hát 67

4.5.8 Giao diện nhạc yêu thích 69

4.5.9 Giao diện cài đặt 71

Chương 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 73

5.1 Kết quả đạt được 73

5.2 Hướng phát triển 73

TÀI LIỆU THAM KHẢO 75

DANH MỤC HÌNH

Hình 2.1 Các ứng dụng nổi bật được phát triển với Flutter 5

Hình 2.2 Kiến trúc Flutter 10

Hình 2.3 Minh họa cây widget của một chương trình Flutter đơn giản 11

Hình 2.4 Widget tree, Element tree, Render tree 14

Hình 2.5 Vòng đời của stateful widget 15

Hình 2.6 Kênh giao tiếp giữa ứng dụng Flutter và platform host 22

Hình 4.1 Sơ đồ use case tổng quát 32

Hình 4.2 Activity diagram tìm kiếm bài viết 35

Hình 4.3 Sequence diagram tìm kiếm bài viết 36

Hình 4.4 Activity diagram xem nội dung bài viết 37

Hình 4.5 Sequence diagram xem nội dung bài viết 38

Hình 4.6 Activity diagram xem lịch sử bài viết 39

Hình 4.7 Sequence diagram xem lịch sử bài viết 40

Hình 4.8 Activity diagram xem bài viết đã lưu 41

Hình 4.9 Sequence diagram xem bài viết đã lưu 42

Hình 4.10 Activity diagram thay đổi giao diện 43

Hình 4.11 Sequence diagram thay đổi giao diện 44

Hình 4.12 Activity diagram lọc chuyên mục 45

Hình 4.13 Sequence diagram lọc chuyên mục 46

Hình 4.14 Activity diagram xem bảng xếp hạng bài hát 47

Hình 4.15 Sequence diagram xem bảng xếp hạng bài hát 47

Hình 4.16 Activity diagram chơi bài hát 48

Hình 4.17 Sequence diagram chơi bài hát 49

Hình 4.18 Activity diagram xem danh sách bài hát yêu thích 50

Hình 4.19 Sequence diagram xem danh sách bài hát yêu thích 51

Hình 4.20 Sequence diagram gửi thông báo bài viết, bài hát nổi bật 52

Hình 4.21 Sequence diagram thu thập bài viết, bài bài hát 53

Hình 4.22 Mô hình kiến trúc hệ thống 54

Hình 4.23 Giao diện danh sách bài viết 58

Hình 4.24 Giao diện tìm kiếm bài viết 59

Hình 4.25 Giao diện nội dung bản tin 61

Hình 4.26 Giao diện lịch sử tin đã xem 63

Hình 4.27 Giao diện tin đã lưu 64

Hình 4.28 Giao diện bảng xếp hạng bài hát 66

Hình 4.29 Giao diện chơi bài hát 67

Hình 4.30 Giao diện nhạc yêu thích 69

Hình 4.31 Giao diện cài đặt 71

DANH MỤC BẢNG

Bảng 2.1 So sánh Flutter và React Native 8

Bảng 4.1 Danh sách người dùng 33

Bảng 4.2 Danh sách use case 34

Bảng 4.3 Danh sách table có trong cơ sở dữ liệu 55

Bảng 4.4 Bảng mô tả chi tiết table articles 56

Bảng 4.5 Bảng mô tả chi tiết table musics 57

Bảng 4.6 Chú thích giao diện danh sách bài viết 59

Bảng 4.7 Chú thích giao diện tìm kiếm bài viết 60

Bảng 4.8 Chú thích giao diện nội dung bảng tin 62

Bảng 4.9 Chú thích giao diện lịch sử tin đã xem 64

Bảng 4.10 Chú thích giao diện tin đã lưu 65

Bảng 4.11 Chú thích giao diện bảng xếp hạng bài hát 67

Bảng 4.12 Chú thích giao diện chơi bài hát 68

Bảng 4.13 Chú thích giao diện nhạc yêu thích 70

Bảng 4.14 Chú thích giao diện cài đặt 72

DANH MỤC TỪ VIẾT TẮT

Từ viết tắt Nghĩa tiếng Anh Nghĩa tiếng Việt

API Application Programming

Interface

Giao diện lập trình ứng dụng

HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn bản

URL Uniform Resource Locator Định vị tài nguyên thống nhất

(hay còn gọi là địa chỉ web)

TÓM TẮT KHOÁ LUẬN

Khóa luận đề tài “Tìm hiểu Flutter và xây dựng ứng dụng minh họa” bao gồm các nội dung sau:

- Tìm hiểu Flutter:

• Tìm hiểu tổng quan về Flutter, ưu nhược điểm, so sánh với đối thủ

• Tìm hiểu ngôn ngữ Dart

• Tìm hiểu cách xây dựng UI với Flutter

• Tìm hiểu các kỹ thuật lập trình với Flutter

• Tìm hiểu về các thư viện và công cụ Flutter

- Tìm hiểu về các công nghệ khác hỗ trợ xây dựng ứng dụng minh họa

- Thiết kế và xây dựng ứng dụng minh họa hoạt động tốt trên hai nền tảng Android và iOS

- Trình bày kết luận và hướng phát triển

Chương 1 MỞ ĐẦU

1.1 Lý do chọn đề tài

Ngày nay, công nghệ thông tin ngày một phát triển, kéo theo đó là sự bùng nổ của các thiết bị điện tử, đặc biệt là điện thoại thông minh và máy tính Nếu như trước đây việc sở hữu một chiếc điện thoại thông minh hay máy tính khá khó khăn thì ngày nay

do sự cạnh tranh gay gắt giữa các thương hiệu khiến giá thành những thiết bị này rẻ hơn và việc sở hữu chúng trở nên dễ dàng hơn Vì thế nhu cầu phát triển ứng dụng cho các thiết bị này càng ngày càng tăng cao

Để tiếp cận đến nhiều người dùng, các nhà phát triển ứng dụng mong muốn ứng dụng của họ chạy được trên nhiều nền tảng đặc biệt là Android, iOS, Windows, MacOS và web Thay vì phải tìm hiểu nhiều ngôn ngữ, công nghệ khác nhau ứng với từng nền tảng thì hiện nay trên thị trường có nhiều công cụ hỗ trợ lập trình đa nền tảng như Flutter, React Native, Ionic, … giúp các nhà phát triển ứng dụng tiết kiệm thời gian, chi phí dành cho quá trình phát triển ứng dụng

Trong số đó có Flutter mặc dù là công cụ ra đời muộn nhất nhưng có tốc độ phát triển vượt trội và nhiều ưu điểm so với các công nghệ đi trước, nhiều công ty công nghệ lớn sử dụng Flutter để phát triển sản phẩm của mình như Google, Alibaba, Tencent,

… Ứng dụng xây dựng với Flutter hoạt động với hiệu năng mạnh mẽ và hiếm có vấn

đề về mặt tương thích, ngoài ra đây còn là công cụ mã nguồn mở nên ngày càng nhiều lập trình viên và công ty quan tâm đến công nghệ mới này

Đây là lý do nhóm chọn đề tài khóa luận tốt nghiệp là “Tìm hiểu Flutter và xây dựng ứng dụng minh họa”

1.2 Mục tiêu và phạm vi đề tài

1.2.1 Mục tiêu

- Tìm hiểu tổng quan về Flutter, lịch sử phát triển, ưu nhược điểm, so sánh Flutter với đối thủ

- Tìm hiểu ngôn ngữ Dart: cú pháp, các kiểu dữ liệu thường dùng, lập trình bất động bộ, các kỹ thuật lập trình, …

- Tìm hiểu các kỹ thuật lập trình với Flutter

- Tìm hiểu các công nghệ khác hỗ trợ xây dựng ứng dụng minh họa

- Xây dựng ứng dụng minh hoạ hoạt động tốt trên hai nền tảng Android và iOS

• Tìm hiểu về các công cụ hỗ trợ để phát triển ứng dụng minh họa

• Tìm hiểu về các công nghệ phù hợp để xây dựng ứng dụng minh họa

- Xây dựng ứng dụng minh họa bao gồm các chức năng cơ bản:

• Tổng hợp tin tức từ ba trang báo lớn là VnExpress, VTC News, Tuổi Trẻ Online

• Tổng hợp các bảng xếp hạng bài hát từ cộng đồng Chiasenhac.vn

• Phát các bài hát và điều khiển trình chơi nhạc

• Chia sẻ các tin tức và bài hát

• Lưu các tin tức, bài hát và xem lại/ chơi lại

1.3 Đối tượng

- Các thư viện và công cụ Flutter

- Các công nghệ có thể sử dụng để hỗ trợ xây dựng ứng dụng minh họa

- Các cá nhân có nhu cầu cập nhật tin tức và giải trí

1.4 Kết quả mong đợi

- Hiểu được các kiến thức liên quan đến Flutter

- Biết cách sử dụng các công cụ hỗ trợ lập trình đa nền tảng với Flutter

- Biết được các kỹ thuật lập trình với Flutter

- Biết cách sử dụng các công nghệ hỗ trợ để xây dựng ứng dụng minh họa

- Có khả năng dùng Flutter để xây dựng các ứng dụng đa nền tảng

- Hoàn thành ứng dụng tổng hợp tin tức, bảng xếp hạng bài hát đáp ứng nhu cầu cập nhật tin tức và giải trí của người dùng với giao diện trực quan, hoạt động tốt trên cả hai nền tảng Android và iOS

Chương 2 TÌM HIỂU VỀ FLUTTER

2.1 Tổng quan về Flutter

2.1.1 Tổng quan và lịch sử

Flutter 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 Flutter đang là ứng dụng có số sao đứng thứ 17 trên github Tháng 4 năm 2020 theo thống kê của Google có hơn hai triệu lập trình viên đã sử dụng Flutter và hơn 50.000 ứng dụng sử dụng Flutter được đưa lên PlayStore Chỉ sau một tháng con số đó đã lên tới 60.000

Flutter được sử dụng để phát triển nhiều ứng dụng nổi tiếng phục vụ hàng trăm triệu người dùng trên thế giới

Hình 2.1 Các ứng dụng nổi bật được phát triển với Flutter

2.1.2 Ưu điểm và nhược điểm của Flutter

Ư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 sự vấn đề trên các phiên bản hay hệ điều hành khác nhau

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 hoàn toà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

Nhược điểm Phải học ngôn ngữ mới: Nếu muốn lập trình với Flutter, lập trình viên cần phải học

một ngôn ngữ mới là Dart Tuy nhiên đây không phải vấn đề lớn vì Dart là một ngôn ngữ dễ học

Không phù hợp để xây dựng ứng dụng thuần theo giao diện Android hay iOS:

một vài ứng dụng xây dựng giao diện thuần theo Android hay iOS sẽ không phù hợp với Flutter

Kích thước ứng dụng lớn: vì Flutter không sử dụng giao diện trong hệ điều hành mà

sử dụng thư viện của nó nên kích thước hiện tại của ứng dụng khá lớn Tuy nhiên Google nói rằng sẽ cải thiện điều này trong tương lai

Công nghệ còn mới và các thư viện có sẵn chưa đa dạng: Flutter mới được giới

thiệu bản chính thức chưa được 2 năm, vì vậy vẫn còn nhiều lỗi và vấn đề chưa được giải quyết Cộng đồng tuy đang phát triển nhưng số lượng thư viện vẫn chưa thật sự

đa dạng

2.1.3 So sánh Flutter với React Native

Ngôn ngữ lập

trình

Hiệu năng Dart được biên dịch thành

native code và được thực thi trên thiết bị Cho nên Flutter đạt được hiệu năng cao hơn so với React Native

Mã JavaScript được biên dịch sang mã native (Java/Kotlin cho Android, Object-C/ Swift cho iOS) khi chạy chương trình thông qua JavaScript Bridge Chia sẻ code giữa

o Flutter cho MacOS và Windows vẫn đang được phát triển

Giao diện người

dùng

o Vì chỉ có một codebase nên ứng dụng sẽ hoạt động giống nhau trên Android

và iOS Nhưng người dùng

có thể sử dụng các widget của material và cupertino

đã được bao gồm trong Flutter để giao diện giống với Android và iOS thuần

o Fluttter cung cấp nhiều hiệu ứng animation widget sẵn có

o Các component (thành phần giao diện trong React

Native) sẽ có giao diện giống như ứng dụng native Khi cập nhật hệ điều hành, các component này sẽ tự động được cập nhật

o Các component sẵn có không đa dạng như Flutter nên lập trình viên thường tìm đến các component bên thứ ba

Cộng đồng o Cộng đồng ngày càng lớn

mạnh với tốc độ tăng nhanh

o Số lượng thư viện chưa nhiều như React Native nhưng đang dần phát triển với tốc độ rất nhanh

o Cộng đồng lớn mạnh

o Hiện tại có rất nhiều thư viện với các chức năng đa dạng

Bảng 2.1 So sánh Flutter và React Native

2.2 Ngôn ngữ Dart

Flutter sử dụng ngôn ngữ lập trình Dart, ngôn ngữ Dart ra đời từ năm 2011 và được phát triển bởi Google, nhắm đến việc tạo ra ứng dụng đa nền tảng cho di động, máy tính, server và web Dart là theo hướng đối tượng, đơn giản, dễ tiếp cận và cũng khá

dễ hiểu Ngôn ngữ này có cú pháp giống ngôn ngữ C

Dart là ngôn ngữ mã nguồn mở và miễn phí, được phát triển trên Github Phiên bản mới nhất hiện nay là 2.9.0

Dart hỗ trợ hai cách biên dịch là “Just In Time” (JIT) và “Ahead Of Time” (AOT)

- Với Flutter, khi release ứng dụng ngôn ngữ Dart được biên dịch AOT thành các thư viện native, ARM, x86 Sau đó tất cả các thư viện này và resource được dựng thành file apk hoặc ipa Với cách này khi chạy ứng sẽ có hiệu năng tốt nhất, dung lượng nhỏ hơn và loại bỏ những thứ không cần thiết

- Khi trong chế độ debug Dart sẽ được biên dịch JIT ngay khi ứng dụng đang chạy, những gì lập trình viên thay đổi sẽ được cập nhật ngay lập tức nhờ đó tạo sự thuận tiện trong quá trình phát triển phần mềm

2.3 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

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

Ví dụ: Một ứng dụng flutter đơn giản sử dụng widget material

Hình 2.3 Minh họa cây widget của một chương trình Flutter đơn giản

import 'package:flutter/material.dart';

void main () => runApp ( MyApp ());

class MyApp extends StatelessWidget {

2.4.2 Phân loại widget

Widget gồm hai loại là “Stateless widget” và “Stateful widget

- Stateless widget: loại widget chuyên dùng để chỉ hiển thị dữ liệu Chúng không thay đổi khi ứng dụng đang chạy

Ví dụ: Tạo một stateless widget

- Stateful widget: loại widget này chứa các dữ liệu có thể thay đổi khi đang trong vòng đời của widget Tập hợp các dữ liệu này còn được gọi là “state”, để cập nhật dữ liệu và hiển thị dữ liệu này ở UI chúng ta cần gọi SetState() Sau khi state của stateful widget thay đổi widget sẽ được rebuild ở khung hình sau

Ví dụ: Tạo một statefull widget

class FullName extends StatelessWidget {

FullName ( this firstName, this lastName)

final String firstName;

final String lastName;

@override

Widget build ( BuildContext context) {

return Text ('fullName: $ firstName $ lastName '),

);

}

}

2.4.3 Khái niệm về Widget tree và Element tree

Widget tree 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 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

Render tree chứa các đối tượng được vẽ lên màn hình, render tree ít khi thay đổi

class FavoriteIcon extends StatefulWidget {

Hình 2.4 Widget tree, Element tree, Render tree

2.4.4 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

- 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.5 Vòng đời của stateful widget

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, …

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 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,

…

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

Widget dùng để 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

Widget nhận đầu vào của người dùng 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

RaiseButton/ FlatButton/ IconButton: các loại nút bấm để tương tác với ứng dụng,

dùng để xử lý hành động khi nhấn qua thuộc tính onPress

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.5 Animation

2.5.1 Khái niệm

Animation là một trong những ưu điểm của Flutter so với các công nghệ lập trình đa nền tảng khác Với Flutter lập trình viên có thể dễ dàng tạo ra các hiệu ứng chuyển động mượt mà và bắt mắt thông qua đó nâng cao trải nghiệm người dùng

Animation: là một lớp trừu tượng, thể hiện giá trị và trạng thái của một animation

(đã bắt đầu, hoàn thành, dừng, …), Khi muốn thêm animation cho các widget, widget thường được truyền một đối tượng Animation Từ đối tượng đó widget có thể biết giá trị hiện tại của animation

Listener: Bất cứ khi nào giá trị của một đối tượng Animation thay đổi, đối tượng

Animation đó sẽ thông báo cho tất cả các listener được thêm bằng hàm addListener Thường thì State object ứng với widget muốn thêm sẽ lắng nghe animation và gọi setState để vẽ lại animation đó

StatusListener: được thêm bằng hàm addStatusListener, khi trạng thái của đối tượng

Animation thay đổi (bắt đầu, kết thúc, đang chuyển động, đang chuyển động theo chiều ngược lại) các đối tượng Animation cũng sẽ thông báo

AnimationController: dùng để điều khiển animation, đối tượng này cho Animation

biết khi nào bắt đầu chuyển động, khi nào dừng, chuyển động theo hướng nào, … Mỗi AnimationController có giá trị chuyển động mặc định từ 0 đến 1 Ví dụ: làm cho logo từ trong (opacity = 0) suốt sang hiện rõ (opacity = 1)

Tween: trường hợp muốn giá trị chuyển động không phải là số hoặc vượt qua giá trị

mặc định lập trình viên có thể dùng lớp Tween<T>

2.5.2 Tạo animation

Tạo animation bằng Animation và AnimationController

Trong ví dụ sau, đầu tiên ta tạo một FlutterLogo

Để thêm animation ta cần có thư viện flutter/animation Sau đó trong State của widget LogoApp thêm vào Animation, AnimationConroller và khởi tạo các giá trị cần thiết trong hàm initState Thêm Listener và StatusListener, với StatusListener nếu status

là AnimationStatus.completed sẽ cho animation chạy ngược lại, nếu AnimationStatus.dismissed (animation kết thúc ở giá trị bắt đầu) sẽ cho chạy

import 'package:flutter/material.dart' ;

void main () => runApp ( LogoApp ());

class LogoApp extends StatefulWidget {

_LogoAppState createState () => _LogoAppState ();

animation Sau đó thay đổi chiều cao và chiều ngang của FlutterLogo theo giá trị của animation