BÁO CÁO THỰC TẬP TỐT NGHIỆP TÊN ĐỀ TÀI THIẾT KẾ VÀ XÂY DỰNG ỨNG DỤNG NGHE NHẠC VỚI FLUTTER

Mục Lục MỞ ĐẦU................................................................................................................................9 1. Giới thiệu về đơn vị thực tập ....................................................................................9 2. Lý do chọn đề tài........................................................................................................9 3. Mục tiêu của báo cáo ...............................................................................................10 4. Đóng góp vào sự phát triển của công ty ....................................................................10 5. Phương pháp nghiên cứu ........................................................................................10 CHƯƠNG 1: Tìm hiểu về Flutter......................................................................................12 1.1 Flutter là gì ...........................................................................................................12 1.2 Điều làm flutter trở nên độc đáo.........................................................................12 1.3 Các tính năng của Flutter....................................................................................13 1.4 Kiến trúc của Flutter ...........................................................................................14 1.4.1 Kiến trúc Flutter ...........................................................................................14 1.4.2 Flutter Engine.....................................................................................................16 1.4.3 Thư viện nền tảng (Foundation Library) .....................................................18 1.4.4 Vật dụng (widget)................................................................................................22 1.4.5 Thiết kế các widget cụ thể...................................................................................24 1.5 Giới thiệu về ngôn ngữ lập trình Dart ....................................................................26 1.5.1 Kiểu dữ liệu.........................................................................................................26 1.5.2 Các biến và các hàm ...........................................................................................27 1.5.3 Toán tử (Operators)............................................................................................28 1.5.4 Ra quyết định và các loại vòng lặp.....................................................................28 1.5.5 Bình luận (Comments) .......................................................................................28 1.5.6 Tiếp tục và Phá vỡ (Continue and Break) .........................................................29 1.5.7 Từ khóa Final và Const......................................................................................29 1.5.8 Lập trình hướng đối tượng.................................................................................29 1.6 Một số loại Widgets của Flutter thường gặp..........................................................31 1.6.1 Widget Flutter.....................................................................................................31 1.6.2 Widget hiển thị....................................................................................................32 1.6.3 Widget ẩn.............................................................................................................33 1.7. Tìm hiểu về bố cục (layout) giao diện trong Flutter .............................................34 1.7.1 Bố cục..................................................................................................................34 1.7.2 Bố cục một widget..........................................................................................34 7 1.7.3 Các loại widget bố cục ........................................................................................35 1.8: Tìm hiểu về Cử chỉ (Gestures) với giao diện trong Flutter..................................36 1.8.1 Con trỏ.................................................................................................................36 1.8.2 Cử chỉ ..................................................................................................................37 1.8.3 Dò cử chỉ .............................................................................................................37 1.9. Quản lý State.............................................................................................................38 1.9.1 State (Trạng thái) là gì........................................................................................38 1.10. Tìm hiểu về Navigator và Routing trong Flutter................................................39 1.10.1 Tạo routes..........................................................................................................39 1.10.2 Điều hướng đến route thứ hai bằng phương thức Navigator.push().............39 1.10.3 Quay lại route đầu tiên bằng phương thức Navigator.pop() ..........................40 1.11. Tìm hiểu về Database trong Flutter .....................................................................40 1.11.1 Cơ sở dữ liệu SQLite.........................................................................................40 1.11.2 Firebase - NoSQL lưu trữ online.....................................................................41 CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG ...............................................43 2.1. Khảo sát và phân tích yêu cầu................................................................................43 2.1.1. Khảo sát nhu cầu người dùng...........................................................................43 2.1.2. Phân tích yêu cầu chức năng............................................................................44 2.1.3. Phân tích yêu cầu phi chức năng......................................................................45 2.2 Xây dựng ứng dụng..............................................................................................46 2.2.1. Use case diagram: ..............................................................................................46 2.3 Chi tiết các chức năng..........................................................................................47 2.3.1 Thông tin chức năng tìm kiếm......................................................................47 2.3.2 Thông tin chức năng yêu thích......................................................................48 2.3.3 Thông tin chức năng Phát nhạc ....................................................................50 2.3.4 Thông tin chức năng Phát ngẫu nhiên .........................................................50 2.3.5 Thông tin chức năng Phát lặp .......................................................................51 2.3.6 Thông tin chức năng Phát nhạc ....................................................................52 2.4 Thiết kế giao diện .................................................................................................53 2.4.1 Xây dựng màn hình chính..................................................................................54 2.4.2 Xây dựng màn hình trang Songs .......................................................................57 2.4.3 Xây dựng màn hình nghệ sĩ .................................................................................59 2.4.4 Xây dựng màn hình Settings..............................................................................59 8 2.4.5 Xây dựng màn hình phát nhạc...........................................................................62 Chương 3 : Tổng kết...........................................................................................................64 3.1Kết quả đạt được..........................................................................................................64 3.2Hướng phát triển tiếp theo..........................................................................................64 TÀI LIỆU THAM KHẢO………………………………………………………………

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIA ĐỊNH KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP TỐT NGHIỆP

TÊN ĐỀ TÀI

THIẾT KẾ VÀ XÂY DỰNG ỨNG DỤNG NGHE NHẠC VỚI

FLUTTER

Giảng viên hướng dẫn: LÊ HUỲNH PHƯỚC

Sinh viên thực hiện: TRẦN NHẬT ĐỨC

MSSV: 2108110145 Lớp: K15DCPM01 Khóa: K15

LỜI CẢM ƠN

Kính gửi thầy Lê Huỳnh Phước,

Em xin gửi lời cảm ơn chân thành đến thầy vì đã đồng hành cùng em trong suốt quá trình thực tập vừa qua Sự hướng dẫn tận tâm và những góp ý quý báu của thầy đã giúp em không chỉ hoàn thành tốt báo cáo thực tập mà còn tích lũy được nhiều kiến thức và kinh nghiệm thực tế trong lĩnh vực lập trình ứng dụng di động Flutter

Em đặc biệt biết ơn thầy đã luôn tạo điều kiện để em được trải nghiệm thực tế trong môi trường làm việc chuyên nghiệp, giúp em hiểu rõ hơn về quy trình phát triển ứng dụng, từ khâu thiết kế giao diện đến triển khai và kiểm thử Nhờ

sự chỉ bảo của thầy, em đã có thể áp dụng những kiến thức đã học vào thực tiễn,

từ đó nâng cao kỹ năng lập trình và giải quyết vấn đề

Em cũng xin cảm ơn thầy đã luôn động viên, khích lệ và tin tưởng vào khả năng của em Sự quan tâm và hỗ trợ của thầy là nguồn động lực lớn giúp em vượt qua những khó khăn và hoàn thành tốt nhiệm vụ được giao

Kính chúc thầy luôn mạnh khỏe, hạnh phúc và gặt hái được nhiều thành công hơn nữa trong sự nghiệp giảng dạy và nghiên cứu

Em xin chân thành cảm ơn!

ĐÁNH GIÁ CỦA ĐƠN VỊ THỰC TẬP

1 Thái độ tác phong trong thời gian thực tập:

2 Kiến thức chuyên môn:

3 Nhận thức thực tế:

4 Đánh giá khác:

5 Đánh giá chung kết quả thực tập:

………, ngày … tháng … năm …………

TM Đơn vị thực tập

(Ký tên, đóng dấu)

ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN

1 Thái độ tác phong trong thời gian thực tập:

2 Kiến thức chuyên môn:

3 Nhận thức thực tế:

4 Đánh giá khác:

5 Đánh giá chung kết quả thực tập:

………, ngày …… tháng …… năm …………

Giảng viên hướng dẫn

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

TRƯỜNG ĐẠI HỌC GIA ĐỊNH

KHOA 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

BÁO CÁO THỰC TẬP TỐT NGHIỆP HÀNG TUẦN

Họ và tên SV: Trần Nhật Đức MSSV: 2108110145

Lớp: K15DCPM01

Giảng viên hướng dẫn: Lê Huỳnh Phước

Tên doanh nghiệp (đơn vị) đến thực tập: ARI TECHNOLOGY- Picity high

park, C4-08/12 St., Ward Thạnh Xuân, 12 Dist., Ho Chi Minh City, Vietnam

DN (Ký tên

và ghi rõ

họ tên)

Nhận xét của giảng viên hướng dẫn (Ký tên và ghi rõ họ tên)

1

Tuần 1

(Từ ngày25/05

đến ngày

31/05)

Tìm hiểu về ngôn ngữ lập trình Dart

Thực hành các bài tập cơ bản về Dart

2

Tuần 2

(Từ ngày01/06

đến ngày

07/06)

Tìm hiểu về UI Layout Widget trong Flutter

Tìm hiểu về các khái niệm cơ bản trong Flutter (widget, state, context, )

Tìm hiểu về các thư viện và công cụ hỗ trợ:

Khám phá các thư viện và công cụ phổ biến trong cộng đồng Flutter như Flutter Fire, Flutter LocalNotifications,image_picker,url_launcher,

Mục Lục

MỞ ĐẦU 9

1 Giới thiệu về đơn vị thực tập 9

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

3 Mục tiêu của báo cáo 10

4. Đóng góp vào sự phát triển của công ty 10

5 Phương pháp nghiên cứu 10

CHƯƠNG 1: Tìm hiểu về Flutter 12

1.1 Flutter là gì 12

1.2 Điều làm flutter trở nên độc đáo 12

1.3 Các tính năng của Flutter 13

1.4 Kiến trúc của Flutter 14

1.4.1 Kiến trúc Flutter 14

1.4.2 Flutter Engine 16

1.4.3 Thư viện nền tảng (Foundation Library) 18

1.4.4 Vật dụng (widget) 22

1.4.5 Thiết kế các widget cụ thể 24

1.5 Giới thiệu về ngôn ngữ lập trình Dart 26

1.5.1 Kiểu dữ liệu 26

1.5.2 Các biến và các hàm 27

1.5.3 Toán tử (Operators) 28

1.5.4 Ra quyết định và các loại vòng lặp 28

1.5.5 Bình luận (Comments) 28

1.5.6 Tiếp tục và Phá vỡ (Continue and Break) 29

1.5.7 Từ khóa Final và Const 29

1.5.8 Lập trình hướng đối tượng 29

1.6 Một số loại Widgets của Flutter thường gặp 31

1.6.1 Widget Flutter 31

1.6.2 Widget hiển thị 32

1.6.3 Widget ẩn 33

1.7 Tìm hiểu về bố cục (layout) giao diện trong Flutter 34

1.7.1 Bố cục 34

1.7.3 Các loại widget bố cục 35

1.8: Tìm hiểu về Cử chỉ (Gestures) với giao diện trong Flutter 36

1.8.1 Con trỏ 36

1.8.2 Cử chỉ 37

1.8.3 Dò cử chỉ 37

1.9 Quản lý State 38

1.9.1 State (Trạng thái) là gì 38

1.10 Tìm hiểu về Navigator và Routing trong Flutter 39

1.10.1 Tạo routes 39

1.10.2 Điều hướng đến route thứ hai bằng phương thức Navigator.push() 39

1.10.3 Quay lại route đầu tiên bằng phương thức Navigator.pop() 40

1.11 Tìm hiểu về Database trong Flutter 40

1.11.1 Cơ sở dữ liệu SQLite 40

1.11.2 Firebase - NoSQL lưu trữ online 41

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG 43

2.1 Khảo sát và phân tích yêu cầu 43

2.1.1 Khảo sát nhu cầu người dùng 43

2.1.2 Phân tích yêu cầu chức năng 44

2.1.3 Phân tích yêu cầu phi chức năng 45

2.2 Xây dựng ứng dụng 46

2.2.1 Use case diagram: 46

2.3 Chi tiết các chức năng 47

2.3.1 Thông tin chức năng tìm kiếm 47

2.3.2 Thông tin chức năng yêu thích 48

2.3.3 Thông tin chức năng Phát nhạc 50

2.3.4 Thông tin chức năng Phát ngẫu nhiên 50

2.3.5 Thông tin chức năng Phát lặp 51

2.3.6 Thông tin chức năng Phát nhạc 52

2.4 Thiết kế giao diện 53

2.4.1 Xây dựng màn hình chính 54

2.4.2 Xây dựng màn hình trang Songs 57

2.4.3 Xây dựng màn hình nghệ sĩ 59

2.4.4 Xây dựng màn hình Settings 59

2.4.5 Xây dựng màn hình phát nhạc 62

Chương 3 : Tổng kết 64

3.1Kết quả đạt được 64

3.2Hướng phát triển tiếp theo 64

TÀI LIỆU THAM KHẢO……….59

MỞ ĐẦU

1 Giới thiệu về đơn vị thực tập

- ARI TECHNOLOGY là đơn vị tiên phong trong lĩnh vực công nghệ thông tin, luôn không ngừng đổi mới và sáng tạo để mang đến những giải pháp công nghệ tối ưu cho khách hàng Với đội ngũ chuyên gia giàu kinh nghiệm và đam mê, chúng tôi tự hào cung cấp các dịch vụ phát triển phần mềm, giải pháp đám mây, bảo mật thông tin và tư vấn công nghệ Chúng tôi cam kết đồng hành cùng khách hàng trên hành trình chuyển đổi số, giúp doanh nghiệp nâng cao hiệu quả hoạt động và cạnh tranh trên thị

trường

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

- "Trong bối cảnh thị trường ứng dụng âm nhạc trực tuyến ngày càng cạnh

tranh, ARI TECHNOLOGY tự hào giới thiệu MusicApp - một sản

phẩm âm nhạc đột phá được xây dựng trên nền tảng Flutter Với

MusicApp, ARI TECHNOLOGY mong muốn mang đến cho người dùng những trải nghiệm âm nhạc đỉnh cao, cá nhân hóa và tiện lợi

- Việc lựa chọn Flutter để phát triển MusicApp là một quyết định chiến

lược của ARI TECHNOLOGY Bằng cách tận dụng những ưu điểm

vượt trội của Flutter như hiệu năng cao, giao diện đẹp mắt và khả năng phát triển đa nền tảng, chúng tôi đã tạo ra một ứng dụng âm nhạc chất lượng cao, hoạt động mượt mà trên cả hai hệ điều hành iOS và Android

- MusicApp không chỉ là một sản phẩm công nghệ, mà còn là minh chứng

cho sự sáng tạo và cam kết của ARI TECHNOLOGY trong việc cung

cấp các giải pháp công nghệ tiên tiến, đáp ứng nhu cầu ngày càng cao của

thêm thị trường ứng dụng âm nhạc và mang đến cho người dùng những trải nghiệm giải trí tuyệt vời."

3 Mục tiêu của báo cáo

- Xây dựng một ứng dụng Music App local chuyên nghiệp: Tạo ra một ứng dụng di động cho phép người dùng nghe nhạc offline, quản lý danh sách phát và duyệt qua các bài hát có sẵn trên thiết bị Thiết kế giao diện thân thiện, dễ sử dụng và phù hợp với phong cách và thương hiệu của công ty Đảm bảo ứng dụng hoạt động mượt mà, bảo mật cao và ổn định

- Tối ưu hóa trải nghiệm người dùng: Nghiên cứu và áp dụng các kỹ thuật UI/UX để nâng cao trải nghiệm người dùng, đảm bảo giao diện trực quan

và dễ sử dụng Tăng cường khả năng tiếp cận và tương tác của người dùng với ứng dụng

- Đánh giá và phân tích hiệu quả ứng dụng: Sử dụng các phương pháp phân tích nội bộ để theo dõi hành vi người dùng và hiệu quả của các tính năng Đánh giá sự hài lòng của người dùng và cải tiến ứng dụng dựa trên phản hồi nhận được

- Phát triển kỹ năng cá nhân và kiến thức chuyên môn: Nâng cao hiểu biết

về phát triển ứng dụng di động sử dụng Flutter và Dart Phát triển kỹ năng lập trình, thiết kế UI/UX, và quản lý dự án thông qua quá trình thực hiện

đề tài

4 Đóng góp vào sự phát triển của công ty

• Giúp công ty xây dựng một hình ảnh chuyên nghiệp và hiện đại trong lĩnh vực ứng dụng di động Hỗ trợ công ty trong việc tiếp cận và giữ chân

• Thu thập tài liệu: Tìm kiếm và thu thập các tài liệu, sách, bài viết và báo cáo liên quan đến Flutter, Dart, thiết kế UI/UX, và phát triển ứng dụng di động

• Phân tích tài liệu: Đọc và phân tích các tài liệu để nắm vững kiến thức

cơ bản về Flutter và Dart, cách thức thiết kế và phát triển ứng dụng di động, cùng các kỹ thuật tối ưu hóa hiệu suất và trải nghiệm người dùng

• Phát triển ứng dụng: Sử dụng Flutter và Dart để xây dựng và phát triển

ứng dụng Music App theo các thiết kế đã đề ra, bao gồm việc tạo và quản

lý các widget, state, và context

• Kiểm thử: Thực hiện các bước kiểm thử chức năng, hiệu suất, bảo mật

và giao diện người dùng để đảm bảo ứng dụng hoạt động ổn định và đáp ứng yêu cầu

• Tối ưu hóa hiệu suất: Áp dụng các kỹ thuật tối ưu hóa hiệu suất để đảm

bảo ứng dụng tải nhanh và hoạt động mượt mà Sử dụng các kỹ thuật như const constructor, lazy loading, và caching

• Tối ưu hóa trải nghiệm người dùng: Nghiên cứu và áp dụng các nguyên

tắc thiết kế UI/UX để cải thiện giao diện và trải nghiệm người dùng

• Triển khai ứng dụng: Đưa ứng dụng lên môi trường thực tế và thực hiện

các bước cấu hình cuối cùng để đảm bảo ứng dụng hoạt động tốt trên các thiết bị di động

• Sử dụng công cụ phân tích: Sử dụng các công cụ và phương pháp phân

tích nội bộ để theo dõi hành vi người dùng và hiệu quả của các tính năng trong ứng dụng

• Cải tiến: Dựa trên phản hồi của người dùng và phân tích nội bộ, thực

hiện các cải tiến và cập nhật để nâng cao chất lượng và hiệu quả của ứng

CHƯƠNG 1: Tìm hiểu về Flutter

1.1 Flutter là gì

• Flutter là một bộ công cụ phát triển phần mềm (SDK) đa nền tảng do Google phát triển, được sử dụng để xây dựng các ứng dụng di động Điều đặc biệt ở Flutter là nó cho phép các nhà phát triển viết mã nguồn một lần và triển khai ứng dụng trên cả hai hệ điều hành phổ biến nhất hiện nay là iOS và Android

• Flutter bao gồm hai thành phần chính:

+ SDK (Software Development Kit): Đây là một tập hợp các công cụ

giúp các nhà phát triển biên dịch, chạy và kiểm thử ứng dụng của mình SDK cung cấp tất cả những gì cần thiết để xây dựng ứng dụng, từ các công cụ dòng lệnh đến các gói hỗ trợ và các thư viện

+ Framework (UI Library): Đây là một thư viện giao diện người dùng

chứa các widget (thành phần giao diện) đã được xây dựng sẵn Các widget này bao gồm những thành phần cơ bản như nút bấm (button), hộp văn bản (text input), thanh trượt (slider), và nhiều hơn nữa Nhà phát triển có thể sử dụng, tùy chỉnh và kết hợp các widget này để tạo ra giao diện ứng dụng theo

ý muốn

1.2 Điều làm flutter trở nên độc đáo

• Viết mã một lần, chạy trên nhiều nền tảng: Với Flutter, bạn chỉ cần

công sức so với việc phải viết và duy trì mã nguồn riêng biệt cho từng

nền tảng

• Hiệu năng cao: Flutter sử dụng Dart, một ngôn ngữ lập trình được

Google phát triển, và biên dịch mã nguồn trực tiếp thành mã máy gốc (native machine code) Điều này giúp ứng dụng Flutter có hiệu năng cao,

chạy mượt mà và nhanh chóng

• Hot reload: Một trong những tính năng nổi bật nhất của Flutter là hot

reload Tính năng này cho phép các nhà phát triển thay đổi mã nguồn và ngay lập tức thấy được kết quả thay đổi trên giao diện ứng dụng mà không cần phải biên dịch lại toàn bộ ứng dụng Điều này giúp tiết kiệm thời gian

và tăng hiệu quả trong quá trình phát triển

• Giao diện người dùng đẹp mắt: Flutter cung cấp một bộ widget phong

phú và linh hoạt, cho phép các nhà phát triển tạo ra các giao diện ứng dụng đẹp mắt và hiện đại Các widget của Flutter được thiết kế theo phong cách Material Design của Google và Cupertino của Apple, giúp

ứng dụng của bạn trông hấp dẫn trên cả hai hệ điều hành

• Miễn phí và mã nguồn mở: Flutter là một dự án mã nguồn mở và hoàn

toàn miễn phí Điều này không chỉ giúp tiết kiệm chi phí phát triển mà còn tạo điều kiện cho cộng đồng phát triển Flutter ngày càng lớn mạnh Các nhà phát triển có thể đóng góp vào dự án, chia sẻ kinh nghiệm và học hỏi lẫn nhau

1.3 Các tính năng của Flutter

- Flutter mang lại nhiều tính năng nổi bật hỗ trợ quá trình phát triển ứng dụng:

• Hiệu năng cao: Ứng dụng Flutter được biên dịch trực tiếp thành mã

máy gốc (native machine code), giúp chúng chạy mượt mà và nhanh chóng trên cả hai hệ điều hành iOS và Android

• Hot reload: Tính năng hot reload cho phép các nhà phát triển thay đổi

mã nguồn và ngay lập tức thấy được kết quả thay đổi trên giao diện ứng dụng mà không cần phải biên dịch lại toàn bộ ứng dụng Điều này giúp tiết kiệm thời gian và tăng hiệu quả trong quá trình phát triển

• Widget phong phú và linh hoạt: Flutter cung cấp một bộ widget

phong phú và linh hoạt, cho phép các nhà phát triển tạo ra các giao diện ứng dụng đẹp mắt và hiện đại Các widget của Flutter được thiết

kế theo phong cách Material Design của Google và Cupertino của Apple, giúp ứng dụng của bạn trông hấp dẫn trên cả hai hệ điều hành

• Khả năng tùy chỉnh cao: Các widget của Flutter có khả năng tùy

chỉnh cao, cho phép các nhà phát triển thay đổi giao diện và hành vi của ứng dụng theo ý muốn mà không gặp nhiều khó khăn

• Miễn phí và mã nguồn mở: Flutter là một dự án mã nguồn mở và

hoàn toàn miễn phí, giúp tiết kiệm chi phí phát triển và tạo điều kiện cho cộng đồng phát triển Flutter ngày càng lớn mạnh

1.4 Kiến trúc của Flutter

1.4.1 Kiến trúc Flutter

- Kiến trúc của Flutter được chia thành ba lớp chính: Framework, Engine

và Embedder Mỗi lớp đảm nhiệm một vai trò cụ thể trong quá trình phát

- Framework: Lớp trên cùng của kiến trúc Flutter là Framework, được

viết bằng ngôn ngữ Dart Framework bao gồm nhiều thành phần như các widget, các lớp điều khiển, và các công cụ giúp xây dựng giao diện và logic ứng dụng

- Engine: Lớp giữa là Engine, được viết bằng C++ và chịu trách nhiệm xử

lý các tác vụ nền tảng như rendering (vẽ giao diện), hiển thị giao diện người dùng, thao tác với hệ thống file và mạng

- Embedder: Lớp dưới cùng là Embedder, đóng vai trò là cầu nối giữa

Engine và hệ điều hành Embedder chịu trách nhiệm tạo cửa sổ ứng dụng,

xử lý các sự kiện từ hệ điều hành và gọi các chức năng của Engine

1.4.2 Flutter Engine

- Flutter Engine là nền tảng của Flutter, được viết bằng C++ Engine chịu trách nhiệm xử lý các tác vụ nền tảng như rendering (vẽ giao diện), hiển thị giao diện người dùng, thao tác với hệ thống file và mạng Engine của Flutter bao gồm nhiều thành phần quan trọng:

- Skia:

• Skia là một thư viện đồ họa 2D mạnh mẽ, được sử dụng bởi nhiều dự án nổi tiếng khác ngoài Flutter, như Google Chrome và Android Skia chịu trách nhiệm vẽ các thành phần giao diện người dùng, bao gồm hình ảnh, văn bản, và các hiệu ứng đồ họa khác Nhờ Skia, Flutter có thể hiển thị giao diện với hiệu năng cao và mượt mà trên cả hai nền tảng iOS và Android

- Dart runtime:

nó được biên dịch thành mã máy và chạy trong runtime này Dart runtime cung cấp các cơ sở hạ tầng cần thiết để thực thi mã, quản lý bộ nhớ và xử lý các tác vụ nền tảng khác Nó cũng hỗ trợ tính năng "hot reload", cho phép nhà phát triển thay đổi mã và thấy kết quả ngay lập tức mà không cần khởi động lại ứng dụng

- Xử lý văn bản:

việc vẽ văn bản lên màn hình, đo lường kích thước văn bản, và xử lý các kiểu chữ khác nhau Điều này cho phép Flutter hỗ trợ các ngôn ngữ khác nhau và hiển thị văn bản một cách chính xác và đẹp mắt

- Quản lý tài nguyên và mạng:

thiết bị, cho phép ứng dụng tải dữ liệu từ internet, lưu trữ dữ liệu cục bộ, và truy cập vào các tài nguyên khác Điều này rất quan trọng cho các ứng dụng cần làm việc với dữ liệu động và kết nối với các dịch vụ web

1.4.3 Thư viện nền tảng (Foundation Library)

- Thư viện nền tảng (Foundation Library) của Flutter cung cấp các lớp cơ bản và các công cụ cần thiết để xây dựng ứng dụng Thư viện này chứa các thành phần cốt lõi giúp các nhà phát triển tạo và quản lý các yếu tố của ứng dụng, từ giao diện người dùng đến xử lý dữ liệu và logic ứng dụng Dưới đây là các thành phần chính của thư viện nền tảng:

- Quản lý trạng thái (State Management)

- Flutter cung cấp nhiều cách để quản lý trạng thái của ứng dụng Trạng thái trong một ứng dụng Flutter có thể được chia thành hai loại chính: trạng thái tạm thời và trạng thái lâu dài Trạng thái tạm thời là những gì liên quan trực tiếp đến giao diện và thay đổi thường xuyên, chẳng hạn như nội dung của một hộp văn bản hoặc trạng thái bật/tắt của một nút bấm Trạng thái lâu dài thường là dữ liệu cần được lưu trữ và truy xuất trên nhiều phiên làm việc của ứng dụng, chẳng hạn như thông tin người dùng hoặc cài đặt ứng dụng

- Một số phương pháp quản lý trạng thái phổ biến trong Flutter bao gồm:

- setState(): Phương pháp đơn giản nhất để cập nhật trạng thái của một widget Phương pháp này phù hợp cho các ứng dụng nhỏ hoặc các trạng thái đơn giản

- Provider: Một giải pháp quản lý trạng thái mạnh mẽ và linh hoạt, thường được sử dụng cho các ứng dụng phức tạp Provider tách biệt logic trạng thái khỏi giao diện người dùng, giúp mã dễ dàng bảo trì và mở rộng

- Bloc (Business Logic Component): Một mô hình quản lý trạng thái dựa trên các luồng dữ liệu và phản ứng, giúp duy trì logic nghiệp vụ rõ ràng

và dễ kiểm soát

khiển và tùy chỉnh giao diện người dùng Các lớp và tiện ích này giúp nhà phát triển tạo ra các bố cục phức tạp, quản lý các sự kiện người dùng và tạo

ra các hiệu ứng chuyển động mượt mà

- Layout Widgets: Bao gồm các widget như Container, Row, Column, Stack và Grid Các widget này cho phép sắp xếp và căn chỉnh các phần

tử giao diện theo các cách khác nhau, từ bố cục đơn giản đến phức tạp

- Gesture Detector: Một widget cho phép nhận diện và xử lý các cử chỉ người dùng như chạm, kéo, vuốt và nhấn giữ Điều này giúp tăng cường tính tương tác và trải nghiệm người dùng

- Animation and Transition Widgets: Flutter cung cấp các widget và công

cụ để tạo ra các hiệu ứng chuyển động và hoạt hình Các widget này bao gồm AnimatedContainer, AnimatedOpacity, Hero và Transform Các công cụ này giúp tạo ra các trải nghiệm người dùng mượt mà và trực quan

- Xử lý dữ liệu (Data Handling)

- Thư viện nền tảng của Flutter cung cấp các lớp và công cụ để làm việc với dữ liệu, bao gồm các lớp để quản lý dữ liệu cục bộ, tương tác với cơ

sở dữ liệu và kết nối mạng

- Shared Preferences: Một cách đơn giản để lưu trữ dữ liệu cục bộ dưới dạng các cặp khóa-giá trị Thích hợp cho việc lưu trữ các cài đặt hoặc dữ liệu người dùng mà không cần sử dụng cơ sở dữ liệu phức tạp

- SQFlite: Một plugin Flutter cho phép tương tác với cơ sở dữ liệu SQLite Thích hợp cho các ứng dụng cần lưu trữ và truy xuất lượng lớn dữ liệu cục bộ

- HTTP Package: Thư viện này cung cấp các phương thức để thực hiện các yêu cầu HTTP, giúp ứng dụng kết nối và trao đổi dữ liệu với các dịch vụ web và API

- Các tiện ích khác (Utilities)

- Flutter còn cung cấp nhiều tiện ích khác giúp đơn giản hóa việc phát triển ứng dụng và nâng cao hiệu quả làm việc

- Internationalization (i18n) and Localization (l10n): Hỗ trợ cho việc dịch

và điều chỉnh ứng dụng để phù hợp với nhiều ngôn ngữ và vùng miền khác nhau Điều này giúp ứng dụng tiếp cận được nhiều người dùng hơn trên toàn cầu

- Debugging Tools: Flutter cung cấp nhiều công cụ hỗ trợ gỡ lỗi, bao gồm Flutter DevTools, cho phép kiểm tra và theo dõi hiệu suất ứng dụng, phân tích bộ nhớ và xem cấu trúc widget

- Testing: Thư viện nền tảng cũng bao gồm các công cụ và framework để viết và chạy các bài kiểm tra đơn vị, kiểm tra tích hợp và kiểm tra giao diện người dùng Điều này giúp đảm bảo chất lượng và độ tin cậy của

- Thư viện nền tảng của Flutter là một bộ công cụ mạnh mẽ và linh hoạt, cung cấp mọi thứ mà một nhà phát triển cần để xây dựng các ứng dụng

di động chất lượng cao Việc hiểu và sử dụng hiệu quả các công cụ và lớp trong thư viện này là chìa khóa để tận dụng tối đa sức mạnh của Flutter trong quá trình phát triển ứng dụng

1.4.4 Vật dụng (widget)

- Widgets là các thành phần giao diện cơ bản của Flutter Trong Flutter, mọi thứ đều là một widget, từ các phần tử đơn giản như nút bấm, hộp văn bản, đến các phần tử phức tạp hơn như bố cục giao diện Widgets trong Flutter được thiết kế theo phong cách hướng đối tượng và có khả năng tái sử dụng cao Các widget có thể được lồng nhau để tạo ra các giao diện phức tạp và đẹp mắt

- Các loại widget trong Flutter

- Widget dựng sẵn (Built-in Widgets): Flutter cung cấp một loạt các widget dựng sẵn cho các nhà phát triển, bao gồm các widget cấu trúc như Container, Row, Column, Stack, và Grid, cùng với các widget hiển thị như Text, Image, Icon Các widget này cung cấp các khối xây dựng cơ bản để tạo ra các giao diện người dùng

- Widget tùy chỉnh (Custom Widgets): Ngoài các widget dựng sẵn, Flutter cũng cho phép các nhà phát triển tạo ra các widget tùy chỉnh bằng cách kết hợp và tùy chỉnh các widget có sẵn Việc tạo ra các widget tùy chỉnh

- Stateful Widgets và Stateless Widgets: Widgets trong Flutter được chia thành hai loại chính là StatefulWidget và StatelessWidget

- StatelessWidget: Là loại widget không thay đổi trạng thái trong suốt vòng đời của nó Ví dụ như một nút bấm với nhãn cố định hoặc một hình ảnh không thay đổi

- StatefulWidget: Là loại widget có thể thay đổi trạng thái trong suốt vòng đời của nó Ví dụ như một hộp kiểm tra (checkbox) có thể được chọn hoặc bỏ chọn, hoặc một thanh trượt (slider) có thể thay đổi giá trị

- Quản lý trạng thái trong widgets

- State: Mỗi StatefulWidget có một đối tượng State gắn liền với nó Đối tượng này chịu trách nhiệm quản lý trạng thái của widget và cập nhật giao diện khi trạng thái thay đổi Trạng thái được cập nhật bằng cách gọi phương thức setState(), và Flutter sẽ tự động xây dựng lại giao diện của widget khi trạng thái thay đổi

- InheritedWidget: Một loại widget đặc biệt cho phép chia sẻ dữ liệu trạng thái giữa các widget trong cây widget InheritedWidget rất hữu ích khi bạn cần chia sẻ trạng thái hoặc dữ liệu giữa nhiều widget mà không cần phải truyền dữ liệu qua nhiều lớp

- Provider: Một gói quản lý trạng thái phổ biến trong Flutter, giúp quản lý

và chia sẻ trạng thái ứng dụng một cách hiệu quả Provider cung cấp một cách đơn giản và mạnh mẽ để kết nối logic trạng thái với giao diện người dùng, và nó được coi là một trong những phương pháp tốt nhất để quản

lý trạng thái trong ứng dụng Flutter

1.4.5 Thiết kế các widget cụ thể

- Thiết kế các widget cụ thể trong Flutter bao gồm việc tùy chỉnh và kết hợp các widget có sẵn để tạo ra giao diện ứng dụng theo ý muốn Flutter cung cấp nhiều loại widget khác nhau để hỗ trợ điều này, bao gồm các widget cấu trúc và các widget hiển thị

- Các widget cấu trúc

- Container: Là một widget đa năng có thể chứa các widget con khác và cung cấp các thuộc tính để điều chỉnh bố cục, căn chỉnh, kích thước, và trang trí của các widget con Container có thể được sử dụng để tạo ra các hộp chứa các thành phần giao diện và điều chỉnh chúng theo các yêu cầu

cụ thể

- Row và Column: Row và Column là các widget dùng để sắp xếp các widget con theo hàng ngang và cột dọc tương ứng Các widget này rất hữu ích để tạo ra các bố cục linh hoạt và phức tạp bằng cách kết hợp các thành phần giao diện theo các hướng khác nhau

- Stack: Stack là một widget cho phép chồng các widget con lên nhau Điều này rất hữu ích khi bạn cần tạo ra các bố cục chồng lớp, chẳng hạn như một hình ảnh nền với các biểu tượng và văn bản trên đó

- GridView: GridView là một widget dùng để sắp xếp các widget con trong một lưới GridView rất hữu ích cho việc hiển thị danh sách các mục theo định dạng lưới, chẳng hạn như thư viện ảnh hoặc danh sách sản phẩm

- Các widget hiển thị

- Text: Text là một widget hiển thị văn bản Text cung cấp nhiều thuộc tính

để tùy chỉnh kiểu chữ, kích thước, màu sắc, căn chỉnh và trang trí của văn

bản Text là một trong những widget cơ bản và quan trọng nhất trong Flutter, được sử dụng để hiển thị nội dung văn bản trong ứng dụng

- Image: Image là một widget hiển thị hình ảnh Image có thể tải và hiển thị hình ảnh từ nhiều nguồn khác nhau, bao gồm các tệp tin cục bộ, mạng

và các tài nguyên khác Image cũng cung cấp các thuộc tính để điều chỉnh cách hiển thị và trang trí hình ảnh

- Icon: Icon là một widget hiển thị biểu tượng Icon sử dụng các biểu tượng

từ các bộ icon tích hợp trong Flutter, chẳng hạn như Material Icons và Cupertino Icons Icon rất hữu ích cho việc thêm các biểu tượng vào giao diện người dùng, chẳng hạn như biểu tượng nút bấm, biểu tượng trạng thái và biểu tượng hành động

- Tạo các widget tùy chỉnh

- Tạo các widget tùy chỉnh là một phần quan trọng của việc phát triển ứng dụng Flutter Bằng cách kết hợp và tùy chỉnh các widget có sẵn, các nhà phát triển có thể tạo ra các widget mới phù hợp với nhu cầu cụ thể của ứng dụng

- Xây dựng widget từ các widget cơ bản: Các nhà phát triển có thể tạo ra các widget tùy chỉnh bằng cách kết hợp các widget cơ bản như Container, Row, Column, Text, Image và Icon Bằng cách kết hợp các widget này theo các cách khác nhau, bạn có thể tạo ra các bố cục phức tạp và độc đáo

- Tạo widget với trạng thái: Khi tạo các widget tùy chỉnh có trạng thái, bạn

có thể sử dụng StatefulWidget và đối tượng State để quản lý và cập nhật trạng thái của widget Điều này cho phép bạn tạo ra các widget tương tác

và động, chẳng hạn như các biểu mẫu, danh sách kéo dài, và các thành

- Sử dụng InheritedWidget và Provider: Để chia sẻ trạng thái và dữ liệu giữa các widget tùy chỉnh, bạn có thể sử dụng InheritedWidget và Provider Các công cụ này giúp bạn quản lý trạng thái ứng dụng một cách hiệu quả và tạo ra các widget tùy chỉnh mạnh mẽ và linh hoạt

- Thiết kế và xây dựng các widget cụ thể là một kỹ năng quan trọng cho bất kỳ nhà phát triển Flutter nào Bằng cách hiểu và sử dụng các widget có sẵn, kết hợp chúng theo các cách sáng tạo, và tạo ra các widget tùy chỉnh, bạn có thể tạo ra các ứng dụng di động chất lượng cao, đáp ứng được nhu cầu và mong đợi của người dùng

1.5 Giới thiệu về ngôn ngữ lập trình Dart

- Dart là ngôn ngữ lập trình được phát triển bởi Google, sử dụng chủ yếu

để xây dựng các ứng dụng di động, web và máy chủ Được thiết kế với mục tiêu dễ học, dễ đọc và dễ viết, Dart cung cấp hiệu năng cao và khả năng tương thích tốt cho các dự án phát triển ứng dụng Một trong những điểm mạnh của Dart là khả năng biên dịch thành mã máy gốc, giúp các ứng dụng Flutter chạy mượt mà và nhanh chóng

1.5.1 Kiểu dữ liệu

- Dart hỗ trợ nhiều kiểu dữ liệu cơ bản và nâng cao, giúp bạn quản lý và

xử lý dữ liệu hiệu quả trong ứng dụng:

- int: Kiểu số nguyên, dùng để lưu trữ các giá trị số nguyên như -1, 0, 1

- double: Kiểu số thực, dùng để lưu trữ các giá trị số thực như 3.14, -0.5

- String: Kiểu chuỗi, dùng để lưu trữ các chuỗi ký tự như "Hello, Dart!"

- List: Kiểu danh sách, dùng để lưu trữ một danh sách các giá trị Ví dụ: [1, 2, 3]

- Map: Kiểu bản đồ, dùng để lưu trữ các cặp khóa-giá trị Ví dụ: { 'key': 'value' }

- Set: Kiểu tập hợp, dùng để lưu trữ một tập hợp các giá trị duy nhất Ví dụ: {1, 2, 3}

- Runes: Đại diện cho các ký tự Unicode trong Dart

- Symbol: Dùng để đại diện cho các biểu tượng Dart

- dynamic: Một kiểu dữ liệu động, cho phép một biến có thể lưu trữ bất kỳ kiểu dữ liệu nào và có thể thay đổi kiểu dữ liệu trong quá trình thực thi

1.5.2 Các biến và các hàm

- Trong Dart, biến và hàm là các thành phần cơ bản để lưu trữ và xử lý dữ liệu:

- Khai báo biến:

+ Dart cho phép khai báo biến bằng từ khóa var, final, hoặc const

+ var: Biến có thể thay đổi giá trị trong quá trình thực thi

+ final: Biến chỉ được gán một lần, giá trị không thể thay đổi sau khi đã gán

+ const: Biến hằng số, giá trị được xác định tại thời điểm biên dịch và không thể thay đổi

- Hàm (Functions):

+ Hàm trong Dart được định nghĩa bằng từ khóa void (nếu không trả về giá trị) hoặc kiểu trả về của hàm

+ Hàm có thể nhận tham số và trả về giá trị

1.5.3 Toán tử (Operators)

- Dart cung cấp nhiều loại toán tử để thực hiện các phép toán trên dữ liệu:

• Toán tử số học: +, -, *, /, %, ~/ (chia lấy phần nguyên)

- Câu lệnh điều kiện:

• if, else if, else: Sử dụng để thực hiện các hành động dựa trên điều kiện

• switch, case: Dùng để chọn một trong nhiều khối mã để thực thi

- Vòng lặp:

• for: Lặp lại một khối mã một số lần xác định

• for-in: Lặp qua các phần tử của một tập hợp

• while: Lặp lại một khối mã khi điều kiện còn đúng

• do-while: Lặp lại một khối mã ít nhất một lần, sau đó lặp lại khi điều kiện còn đúng

1.5.5 Bình luận (Comments)

- Bình luận là các phần của mã mà trình biên dịch sẽ bỏ qua Dart hỗ trợ

- Bình luận đơn dòng: Bắt đầu bằng // Ví dụ: // Đây là một bình luận đơn dòng

bình luận đa dòng */

- Bình luận tài liệu (Documentation comments): Bắt đầu bằng /// hoặc /** */, dùng để tạo tài liệu cho mã nguồn

1.5.6 Tiếp tục và Phá vỡ (Continue and Break)

- break: Dùng để thoát khỏi vòng lặp hoặc khối switch-case Khi gặp break, chương trình sẽ dừng vòng lặp hoặc thoát khỏi case hiện tại

- continue: Dùng để bỏ qua các phần còn lại của vòng lặp hiện tại và bắt đầu vòng lặp tiếp theo

1.5.7 Từ khóa Final và Const

- final: Được sử dụng để khai báo biến chỉ có thể được gán giá trị một lần Khác với const, giá trị của final được xác định tại thời điểm chạy

- Ví dụ: final int a = 10;

• const: Được sử dụng để khai báo biến hằng số, giá trị được xác định tại thời điểm biên dịch và không thể thay đổi

- Ví dụ: const int b = 20;

1.5.8 Lập trình hướng đối tượng

- Dart hỗ trợ lập trình hướng đối tượng (OOP) với các tính năng như lớp (class), đối tượng (object), kế thừa (inheritance), và đa hình (polymorphism)

- Lớp và Đối tượng:

- Lớp (class) là một bản thiết kế cho các đối tượng Lớp định nghĩa các thuộc tính (attributes) và phương thức (methods) của đối tượng

- Đối tượng (object) là một thực thể của lớp, chứa dữ liệu và hành vi theo định nghĩa của lớp

- Lớp trừu tượng và Giao diện:

• Lớp trừu tượng: Được khai báo bằng từ khóa abstract, không thể tạo đối tượng từ lớp trừu tượng Lớp trừu tượng có thể chứa các phương thức chưa được cài đặt (abstract methods)

• Giao diện: Trong Dart, tất cả các lớp đều có thể được sử dụng như giao diện Một lớp có thể thực hiện nhiều giao diện bằng cách sử dụng từ khóa implements

- Ngôn ngữ Dart với các đặc điểm và tính năng trên giúp cho việc phát triển ứng dụng Flutter trở nên dễ dàng và hiệu quả hơn Việc hiểu rõ về các kiểu dữ liệu, biến, hàm, toán tử, cấu trúc điều khiển, quản lý trạng

1.6 Một số loại Widgets của Flutter thường gặp

- Trong Flutter, widgets là các thành phần cơ bản để xây dựng giao diện người dùng Flutter cung cấp một loạt các widgets với nhiều chức năng khác nhau, từ việc tạo bố cục cho ứng dụng đến việc hiển thị nội dung và tương tác với người dùng Dưới đây là một số loại widgets thường gặp trong Flutter:

1.6.1 Widget Flutter

- Widget trong Flutter có thể được phân loại theo nhiều tiêu chí khác nhau Dưới đây là một số loại widget cơ bản:

- Widgets cấu trúc (Structural Widgets):

- Container: Là một widget đa năng có thể chứa các widget con khác và cung cấp nhiều thuộc tính để điều chỉnh kích thước, bố cục, và trang trí Container thường được sử dụng để tạo ra các hộp chứa các thành phần giao diện và điều chỉnh chúng theo các yêu cầu cụ thể

- Row và Column: Row sắp xếp các widget con theo hàng ngang, trong khi Column sắp xếp chúng theo cột dọc Cả hai đều rất hữu ích để tạo ra các

bố cục dạng lưới hoặc danh sách

- Stack: Stack cho phép chồng các widget con lên nhau, tạo ra các hiệu ứng lớp và bố cục phức tạp Ví dụ, bạn có thể sử dụng Stack để đặt một văn bản lên hình nền

- Widgets điều khiển (Control Widgets):

- Button: Các loại nút như ElevatedButton, TextButton, và OutlinedButton cung cấp các cách để người dùng tương tác với ứng dụng ElevatedButton

có nền nổi bật, TextButton là nút văn bản đơn giản, và OutlinedButton

- TextField: Cho phép người dùng nhập văn bản vào ứng dụng TextField

có nhiều tùy chọn để tùy chỉnh kiểu nhập liệu, ví dụ như loại văn bản, số điện thoại, hoặc mật khẩu

- Switch và Checkbox: Switch cho phép người dùng bật hoặc tắt một tùy chọn, trong khi Checkbox cung cấp một lựa chọn có thể chọn hoặc bỏ chọn

- Widgets điều hướng (Navigation Widgets):

- Navigator: Dùng để quản lý ngăn xếp các trang trong ứng dụng Navigator giúp điều hướng giữa các màn hình bằng cách đẩy và pop các trang

- Drawer: Cung cấp một menu điều hướng trượt từ cạnh màn hình Drawer thường được sử dụng để chứa các liên kết điều hướng trong ứng dụng

- Icon: Cho phép bạn thêm các biểu tượng vào giao diện người dùng Icon

sử dụng các bộ biểu tượng có sẵn trong Flutter và có thể tùy chỉnh kích