Tìm hiểu về công nghê Flutter

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY
LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG
CÔNG NGHỆ FLUTTER
Nguyễn Đức Chính

IT3 - 02 – K63
chinh.nd183871@sis.hust.edu.vn
Flutter là gì?
Flutter là bộ công cụ giao diện

người dùng đa nền tảng được
thiết kế để cho phép việc sử dụng
lại mã trên các hệ điều hành như
iOS và Android, đồng thời cho
phép các ứng dụng giao diện trực
tiếp với các dịch vụ nền tảng bên
dưới.
Mục tiêu là cho phép các nhà
phát triển cung cấp các ứng dụng
hiệu suất cao, tạo cảm giác tự
nhiên trên các nền tảng khác
nhau, chấp nhận sự khác biệt nơi
chúng tồn tại trong khi chia sẻ
càng nhiều mã càng tốt.
IT3100 – Lập trình hướng đối tượng 2

Nội dung
1. Giới thiệu về Flutter và ngôn ngữ Dart

2. Cài đặt Flutter
3. Dart cơ bản
4. Kiến trúc Flutter
5. Giới thiệu các thành phần trong Flutter UI
6. Phát triển 1 Flutter app đầy đủ tính năng
7. Xây dựng 1 ứng dụng đơn giản với Flutter (Ứng dụng
chuyển đổi đơn vị đo)

1. Giới thiệu về Flutter và ngôn ngữ Dart
4
IT3100 – Lập trình hướng đối tượng
1.1 Giới thiệu Flutter
1.1.2 Lịch sử phát triển

Mặc dù tương đối mới, nhưng Flutter đã trải qua nhiều thử
nghiệm và cải tiến trong thời gian qua. Ban đầu được gọi là Sky,
lần đầu tiên xuất hiện tại Dart Developer Summit 2015 do Eric
Seidel trình bày. Nó được giới thiệu là sự phát triển của một số
thử nghiệm trước đây của Google nhằm tạo ra thứ gì đó tốt hơn
cho điện thoại di động, về mặt phát triển và trải nghiệm người
dùng, với mục tiêu chính là hiển thị với hiệu năng cao.
Sau đó, được giới thiệu dưới tên Flutter vào năm 2016, phát
hành bản alpha đầu tiên vào tháng 5 năm 2017,và có bản phát
hành ổn định đầu tiên vào cuối năm 2018.
Từ đó cho tới nay, có nhiều phiên bản ổn định được phát hành
liên tục, đồng thời cộng đồng Flutter cũng phát triển rất nhanh
và rộng, đóng góp không nhỏ vào việc phát triển Flutter SDK.

Đang có nhiều công ty phát triển các ứng dụng của mình
bằng Flutter. Có thể kể đến như là: Google, Alibaba,
Tencent,….

Hiện nay, có nhiều framework được tạo ra với mục đích

chung: xây dựng các ứng dụng di động gốc cho Android
và iOS với một codebase duy nhất. Tuy nhiên chỉ có một
số framework nổi tiếng là được cộng đồng phát triển và áp
dụng rộng rãi, đó là:
- React Native
- Flutter
- Xamarin
- …
Dĩ nhiên, Flutter nằm trong số đó. Câu hỏi đặt ra: Chúng ta
có thực sự cần đến Flutter hay không khi có nhiều sự lựa
chọn như vậy, và nó có gì khác hay tốt hơn các framework
đối thủ của nó?

1.1.2 Những vấn đề Flutter muốn giải quyết

Từ khi được xây dựng, Flutter đã được thiết kế để cung cấp những
trải nghiệm tốt hơn cho người dung thông qua thực thi hiệu năng cao,
tuy nhiên đây không phải là triển vọng duy nhất của nó. Nó còn được
tạo ra để giải quyết các vấn đề đang tồn tại của phát triển di động đa
nền tảng:
- Long/more expensive development cycles (Chu kì phát triển dài,
tốn kém): Để đối diện với nhu cầu thị trường ngày một gia tăng,
chúng ta phải lựa chọn giữa xây dựng chỉ cho một nền tảng, hoặc
phải tạo nhiều đội phát triển khác nhau (iOS, Android). Điều này
dẫn đến việc chi phí phát triển tăng, tốn nhiều thời gian hơn.
- Multiple languages to learn (Nhiều ngôn ngữ phải học): Nếu một
nhà phát triển muốn xây dựng ứng dụng đa nền tảng, họ phải học
cách làm điều đó trong hệ điều hành Android với 1 ngôn ngữ lập
trình, và làm điều lặp lại với 1 hệ điều hành iOS và 1 ngôn ngữ
khác. Do đó, ảnh hưởng không tốt đến năng suất của nhà phát
triển.

- Long build/compile time (Thời gian xây dựng/ biên

dịch lâu): Nhiều nhà phát triển có kinh nghiệm biết rằng
thời gian xây dựng ảnh hưởng thế nào đến năng suất.
Chẳng hạn trong Android, developer phải trải qua nhiều
thời gian xây dựng dài sau khi viết code (điều này đã
được cải thiện và tốt hơn trước nhiều, song vẫn là một
vấn đề lớn)
- Existing cross-platform solutions side effects (Tác
dụng phụ của các giải pháp đa nền tảng hiện tại): Bạn
đang áp dụng một framework (React Native, Xamarin,
Cordova,…) để cố gắng giải quyết các vấn đề trên, tuy
nhiên chính nó lại tạo ra những tác động không tốt đến
hiệu suất, thiết kế hoặc trải nghiệm người dùng.

1.1.3 Đặc điểm của Flutter

- Hiệu năng cao (High performance)
- Kiểm soát hoàn toàn UI (Full control of the UI)
- Ngôn ngữ Dart (Dart programming language)
- Được hỗ trợ bởi Google (Being backed by Google)
- Framework mã nguồn mở (Open source framework)

1.2 Giới thiệu ngôn ngữ Dart
Một framework hiện đại như Flutter

yêu cầu một ngôn ngữ hiện đại cấp
cao để có thể cung cấp trải nghiệm
cho nhà phát triển và có thể tạo ra
các ứng dụng tuyệt vời, và Dart là
ngôn ngữ như vậy.
Hiểu được Dart là điều căn bản khi
làm việc với Flutter, các nhà phát
triển cần biết nguồn gốc của nó, các
cộng đồng đang làm việc trên nó,
thế mạnh của nó và tại sao nó là
ngôn ngữ được chọn để phát triển
với Flutter.
© SoICT 2018 IT3100 – Lập trình hướng đối tượng 11

1.2.1 Tổng quan về Dart

Ngôn ngữ Dart, do Google phát triển, là một ngôn ngữ lập
trình có thể được sử dụng để phát triển các ứng dụng
web, máy tính để bàn, máy chủ và thiết bị di động. Dart là
ngôn ngữ lập trình được sử dụng để viết mã các ứng dụng
Flutter, cho phép nó cung cấp trải nghiệm tốt nhất cho nhà
phát triển để tạo ra các ứng dụng di động cấp cao.

Dart có mục tiêu tổng hợp các lợi ích của hầu hết các
ngôn ngữ cấp cao với các tính năng ngôn ngữ, bao gồm
các tính năng sau:
- Công cụ hiệu quả (productive tooling): Bao gồm các
công cụ để phân tích mã, phát triển tích hợp các plugin
môi trường (IDE) và hệ sinh thái package lớn.
- Thu gom rác (garbage collection): Điều này quản lý
hoặc xử lý việc phân bổ bộ nhớ (chủ yếu là bộ nhớ bị
chiếm bởi các đối tượng không còn sử dụng).
- Chú thích kiểu (type annotations): Điều này dành cho
những người muốn bảo mật và nhất quán để kiểm soát
tất cả dữ liệu trong một ứng dụng.

- Kiểu tĩnh (statically typing): Mặc dù chú thích kiểu là

tùy chọn, nhưng Dart là ngôn ngữ an toàn về kiểu (type-
safe) và sử dụng suy luận kiểu (type inference) để phân
tích kiểu trong thời gian chạy. Tính năng này quan trọng
đối với tìm lỗi trong thời gian biên dịch.
- Tính di động (portability): Điều này không chỉ dành
cho web (được chuyển sang JavaScript), mà nó có thể
được biên dịch nguyên bản sang mã ARM và x86.

1.2.2 Tiến hóa của Dart

Được Google công bố vào năm 2011, Dart đã phát triển kể
từ đó. Dart được phát hành ổn định vào năm 2013, với
những thay đổi lớn trong việc phát hành phiên bản 2.0 vào
cuối năm 2018.
- Nó tập trung vào phát triển web theo quan niệm của
mình, với mục đích chính là thay thế JavaScript: Tuy
nhiên, bây giờ Dart tập trung vào phát triển di động
cũng như trên Flutter.
- Nó đã thử giải quyết các vấn đề của JavaScript:
JavaScript không cung cấp sự mạnh mẽ mà nhiều ngôn
ngữ hợp nhất (consolidated languages) làm. Vì vậy,
Dart đã được đưa ra như một kế thừa cho JavaScript.

- Nó cung cấp hiệu suất tốt nhất và các công cụ tốt hơn cho các
dự án quy mô lớn: Dart có công cụ hiện đại và ổn định được cung
cấp bởi các plugin IDE. Nó được thiết kế để có được hiệu suất tốt
nhất có thể trong khi vẫn giữ được cảm giác của một ngôn ngữ
động (dynamic language).
- Nó được tạo ra để trở nên mạnh mẽ và linh hoạt: Bằng cách giữ
cho chú thích kiểu (type annotations) là tùy chọn và thêm các tính
năng OOP, Dart cân bằng giữa hai thế giới của sự linh hoạt và sự
mạnh mẽ.
Dart là một ngôn ngữ đa nền tảng (cross-platform), hiện đại, có mục
đích chung (general-purpose), liên tục cải tiến các tính năng của nó,
làm cho nó trưởng thành và linh hoạt hơn. Đó là lý do tại sao đội
framework của Flutter đã chọn ngôn ngữ Dart để làm việc.

1.2.3 Dart hoạt động như thế nào?

Để hiểu sự linh hoạt của ngôn ngữ này đến từ đâu, chúng
ta cần biết cách chúng ta có thể chạy mã Dart. Điều này
được thực hiện theo hai cách:
- Máy ảo Dart (Dart Virtual Machines – Dart VMs)
- Biên dịch JavaScript

Mã Dart có thể được chạy trong môi trường hỗ trợ Dart. Một môi
trường có khả năng chạy Dart cung cấp các tính năng cần thiết cho
một ứng dụng, chẳng hạn như sau:
- Hệ thống thời gian chạy (runtime systems)
- Thư viện lõi của Dart
- Bộ thu gom rác (Garbage collectors)
Việc thực thi mã Dart hoạt động ở hai chế độ — biên dịch Just-In-
Time (JIT) hoặc biên dịch Ahead-Of-Time (AOT):

- Biên dịch JIT là nơi mã nguồn được tải và biên dịch thành mã máy
của Dart VM một cách nhanh chóng. Nó được sử dụng để chạy mã
trong giao diện dòng lệnh (command-line interface) hoặc khi bạn
đang phát triển một ứng dụng di động để sử dụng các tính năng
như gỡ lỗi (debugging) và tải lại nóng (hot reloading).
- Biên dịch AOT là nơi máy ảo Dart và mã của bạn được biên dịch
trước và VM hoạt động giống như một hệ thống thời gian chạy Dart
(Dart runtime system), cung cấp một bộ thu gom rác và các
phương pháp gốc (native methods) khác nhau từ bộ công cụ phát
triển phần mềm Dart (SDK) đến ứng dụng.
Dart góp phần vào tính năng nổi tiếng nhất của Flutter, tải lại nhanh
(hot reloading), dựa trên trình biên dịch Dart JIT, cho phép tương tác
nhanh với các hoán đổi mã trực tiếp (live code swap).

2. Cài đặt Flutter

2.1 Yêu cầu hệ thống
2.1 Yêu cầu hệ thống

Để cài đặt và chạy Flutter, môi trường phát triển phải đáp ứng
các yêu cầu tối thiểu sau:
- Hệ điều hành: Window 7 SP1 or later (64-bit)
- Dung lượng trống: 1.32 GB (Chưa bao gồm dung lượng cho
IDE/tools)
- Tools: Flutter phụ thuộc vào các công cụ này có sẵn trong
môi trường:
+ Windows PowerShell 5.0 or newer (đã cài sẵn trong
Windows 10)
+ Git for Windows 2.x, với Use Git từ Windows
Command Prompt.
- Nếu Git for Window đã được cài đặt, đảm bảo rằng có thể
chạy các lệnh git từ command prompt hoặc PowelShell.

2.2 Các bước cài đăt Flutter
2.2 Các bước cài đặt Flutter

Sau đây là các bước để cài đặt Flutter trên hệ điều hành
Window, để cài đặt trên các hệ điều hành khác, xem chi
tiết tại: https://flutter.dev/docs/get-started/install
Bước 1: Cài đặt Flutter SDK
- Tải xuống gói cài đặt sau để tải xuống bản phát hành ổn
định mới nhất của Flutter SDK:
https://storage.googleapis.com/flutter_infra/releases/sta
ble/windows/flutter_windows_1.20.3-stable.zip
- Giải nén tệp zip và đặt vào vị trí cài đặt mong muốn cho
Flutter SDK (ví dụ, C:\src\flutter) (Lưu ý: Không cài đặt
Flutter trong thư mực C:\Program Files).

Bước 2: Cập nhật path

Để chạy các lệnh Flutter trong Windows console, cần thực
hiện các bước sau để thêm Flutter vào biến môi trường
PATH:
- Từ thanh tìm kiếm Start, nhập “env” và chọn “Edit
environment variables for your account”.
- Trong “User variables for admin”, thêm vào biến người
dùng “Path” đường dẫn đầy đủ tới “flutter\bin”.
- Đóng và mở lại mọi console windows hiện có để những
thay đổi trên có hiệu lực.


Bước 3: Thiết lập Editor

Được khuyến nghị: Android Studio, IntelliJ, VS Code, và Emacs.
- Cài đặt Android Studio:
Download Android Studio (version 3.0 or later). Sau khi
khởi động, “Android Studio Setup Wizard” sẽ cài đặt các phiên
bản mới nhất của Android SDK, Android SDK Command-line
Tools, và Android SDK Build-Tools, những công cụ mà được
yêu cầu bởi Flutter khi phát triển cho Android.
- Cài đặt Flutter và Dart plugins:
+ Khởi động Android Studio.
+ Mở tùy chọn plugin (Configure > Plugins), chọn Flutter
plugin và click Install.
+ Click Yes khi được nhắc cài đặt Dart plugin.
+ Click Restart.


Bước 4: Thiết lập thiết bị Android

Để chuẩn bị chạy và kiểm tra ứng dụng Flutter trên thiết bị
Android thật, cần có thiết bị Android chạy Android 4.1 (API 16)
trở lên.
- Bật tùy chọn “Developer” và “USB debugging” trên thiết bị,
xem chi tiết tại:
https://developer.android.com/studio/debug/dev-options
- Cài đặt Google USB Driver.
- Sử dụng cáp USB, cắm điện thoại vào máy tính, chú ý yêu
cầu cho phép máy tính truy cập thiết bị trên màn hình điện
thoại.
- Trong terminal, hãy chạy lệnh “flutter devices” để xác minh
rằng flutter nhận ra thiết bị Android đã kết nối của bạn.

Bước 4 <Tiếp>: Thiết lập Android emulator

Để chuẩn bị chạy và kiểm tra ứng dụng Flutter trên trình
giả lập Android, làm theo các bước sau:
- Mở Android Studio, click vào icon “AVD Manager” (hoặc
Tools > AVD Manager) , và click “Create Virtual Device”.
- Trong mục “Select Hardware”, chọn thiết bị ta muốn giả
lập (ví dụ, Pixel 3) -> Next
- Trong mục “System Image”, chọn phiên bản Android mà
ta muốn mô phỏng -> Next
- Trong mục “Android Virtual Device (AVD)”, đặt tên thiết
bị -> Finish
- Trong mục “Your Virtual Devices”, click vào icon “Run”,
khi đó trình giả lập sẽ được khởi động.



Bước 5: Thử nghiệm

Tạo ứng dụng Flutter đầu tiên
- Mở IDE và chọn “Start a new Flutter project
- Chọn loại project: “Flutter Application” -> Next
- Xác minh đường dẫn Flutter SDK chỉ định vị trí của SDK
- Nhập tên project (ví dụ, myfirstapp) -> Next
- Click Finish
- Chờ Android Studio cài đặt SDK và tạo project
Chạy thử ứng dụng trên máy ảo: Click vào icon “Run” trên
thanh công cụ, sau khi xây dựng app hoàn tất, bạn sẽ thấy
màn hình sau:


3. Dart cơ bản
Với những người đã có kinh

nghiệm với ngôn ngữ lập
trình C và những ngôn ngữ
lấy cảm hứng từ C, hoặc
những kinh nghiệm với
JavaScript, thì hầu hết mọi
cú pháp của Dart cũng
tương tự và rất dễ để học.

3.1 Hello Dart!
Một số ví dụ trong phần này được viết trên DartPad. Đây

là 1 online tool cho phép chúng ta viết mã Dart từ trình
duyệt mà không cần phải cài đặt bất cứ thứ gì trên máy
tính. Sử dụng tại: https://www.dartpad.dev/

3.1 Hello Dart! – Chương trình đầu tiên

3.1 Hello Dart! – Chương trình đầu tiên
- Hàm main() là điểm bắt đầu của mọi ứng dụng Dart.
Hàm này là bắt buộc và cũng sẽ nhìn thấy nó trong mọi
ứng dụng Flutter. Mọi thứ bắt đầu với main().
- String name = “Dart”; là 1 dòng khai báo biến, ở đây
bạn đang khai báo 1 biến được gọi là name, kiểu String,
có giá trị là “Dart”. Lưu ý là ở đây sử dụng dấu (‘) hoặc
(“) đều được chấp nhận.
- print(“Hello $name!”); là dòng gọi phương thức in,
truyền vào 1 chuỗi. Điều đặc biệt là thay vì thực hiện
phép nối xâu như bình thường với toán tử “+”, thì ở đây
có thể sử dụng “$” để chèn 1 biến vào chuỗi. “$” có khả
năng tuyệt vời là giúp chúng ta chèn mọi loại biến vào
trong 1 chuỗi.

3.2 Kiểu dữ liệu
- Kiểu biến số trong Dart

+ int: biểu diễn số nguyên 64 bit có dấu.
+ double: biểu diễn số thực với độ chính xác kép 64
bit.
+ num: cả 2 kiểu int và double đều thuộc loại num.
+ bigInt: biểu diễn số nguyên chính xác với độ lớn
tùy ý (chỉ phụ thuộc vào giới hạn RAM của máy tính),
được sử dụng khi muốn số nguyên không bị tràn, tuy
nhiên nó có hiệu suất thấp hơn num, nên cần cân nhắc
trước khi sử dụng.

- Kiểu giá trị logic: bool – với 2 giá trị true và false
- Kiểu xâu kí tự: String
Ví dụ:
Ở đây chúng ta lại thấy sự xuất hiện của “$” như đã giới
thiệu ở phần trước.

- Collection: List và Map

https://api.dart.dev/stable/2.9.3/dart-core/List-class.html
https://api.dart.dev/stable/2.9.1/dart-core/Map-class.html

3.3 Cấu trúc điều khiển và vòng lặp
Dart cung cấp cú pháp cho cấu trúc điều khiển rất giống
với các ngôn ngữ thông dụng khác (ví dụ, Java), đó là:
- if-else
- switch/case
- Vòng lặp với for, while và do-while
- break và continue
- Xử lý ngoại lệ với try/catch và throw
Vì sự tương tự đó nên sẽ không cung cấp chi tiết từng cú
pháp tại đây, đọc thêm tại:
https://dart.dev/guides/language/language-tour#control-
flow-statements

Ví dụ 1: Chương trình in các số chia hết cho 4 từ 1 đến 40

Ví dụ 2: Chương trình kiểm tra xem tháng có bao nhiêu

ngày

3.4 Functions
Trong Dart, Function là 1 kiểu, cũng như String hay num.

Điều này có nghĩa là chúng có thể được chỉ định cho các
trường hoặc các biến cục bộ, hoặc cũng có thể được
truyền dưới dạng tham số cho các hàm khác.
Trong ví dụ dưới đây, biến sayHelloFunction lưu trữ hàm
sayHello. Sau đó ta có thể gọi nó bằng cách thêm () vào
tên biến, và khi đó biến này được sử dụng như 1 function.

3.4 Functions
Tìm hiểu sâu và chi tiết hơn về function trong Dart tại đây:
https://www.tutorialspoint.com/dart_programming/dart_pro
gramming_functions.htm

3.5 Generics
Generic trong Dart cũng tương tự như trong Java.

Tìm hiểu chi tiết về generics tại đây:
https://dart.dev/guides/language/language-tour#generics

3.6 OOP với Dart
- Dart được gọi là một ngôn ngữ lập trình hướng đối
tượng thực sự, “Dart is called a true object-oriented
language” – Google
- Và “In Dart, everything is an object”, ngay cả các hàm
cũng là các đối tượng, do đó lớp và đối tượng là những
phần quan trọng khi bạn làm việc với Dart và Flutter.

3.6 OOP với Dart
3.6.1 Những nguyên lý cơ bản của Dart OOP

3.6 OOP với Dart
- Đóng gói (Encapsulation):

+ Dart không chứa các giới hạn truy cập một cách
rõ ràng như Java (với các từ khóa protected, private,
public). Với Dart, đóng gói xảy ra ở cấp độ thư viện (library
level) thay vì ở cấp độ lớp (class level)
+ Trong Dart, nếu một định danh (lớp, thành viên
lớp, hàm cấp cao nhất (top-level function), hoặc biến), bắt
đầu với dấu gạch dưới “_”, nó là private với thư viện của
nó.

3.6 OOP với Dart
- Kế thừa (Inheritance):
+ Giống như Java, Dart chỉ cho phép đơn kế thừa.
+ Mặc dù chỉ cho phép đơn kế thừa, tuy nhiên khác
với Java, Dart lại có hỗ trợ đặc biệt với mixins – được sử
dụng để mô phỏng đa kế thừa và sử dụng lại mã.
+ Dart không có lớp final class, mọi lớp trong Dart
đều có thể được kế thừa bởi lớp khác.

3.6 OOP với Dart
- Tính trừu tượng (Abtraction):

+ Dart chứa các lớp trừu tượng (abtract class) cho
phép định nghĩa một việc làm nào đó, mà không cần quan
tâm đến cách thực hiện điền này.
+ Dart có khái niệm interface ngầm mạnh mẽ, cho
phép mọi lớp trở thành một interface, cho phép lớp khác
implement nó mà không cần kế thừa.

3.6 OOP với Dart
- Đa hình (Polymorphism):
+ Dart cho phép ghi đè (overriding) một phương
thức cha để thay đổi hành vi ban đầu của chúng.
+ Khác Java, Dart không cho phép nạp chồng
phương thức (overloading). Không thể định nghĩa cùng 1
phương thức 2 lần với các đối số khác nhau.

3.6 OOP với Dart
3.6.2 Đối tượng và lớp

Ở đây, chúng ta sẽ có cái nhìn tổng quan về cách tạo lớp và đối
tượng trong Dart.
- Bắt đầu với 1 lớp Person với 2 trường, name và surname:
Quan sát ở đây, name và surname không bắt đầu bởi “_”, do
đó chúng có thể được truy cập từ bên ngoài.

3.6 OOP với Dart
- Bạn có thể tạo ra các thể hiện của lớp Person từ hàm
main(), và set giá trị cho name và surname
Ở đây, dòng lệnh Person clack = Person(), được dùng để tạo một
thể hiện của lớp Person(), và kết quả là một đối tượng được chứa
trong biến clark. Cách viết trên là cách viết tắt của Person clack =
new Person(), từ khóa “new” có thể được lược bỏ tùy ý.

3.6 OOP với Dart
- Phương thức getter và setter

+ Như chúng ta đã biết, getter và setter là các
phương thức được sử dụng để bảo vệ dữ liệu trong lớp,
getter là phương thức trả về 1 giá trị thuộc tính của 1 thể
hiện của lớp, còn setter dùng để cài đặt hoặc cập nhật giá
trị đó. Bằng cách này, chúng ta có thể kiểm tra các giá trị
trước khi đọc (getter) hoặc ghi (setter) chúng vào lớp.
+ Chúng được chỉ định bằng từ khóa get, set trước
tên của trường. Getter trả về giá trị của kiểu được chỉ định,
còn setter trả về void.

3.6 OOP với Dart
Trong ví dụ dưới đây (phát triển từ ví dụ trước khi thêm

trường age với chỉ định truy cập “_”), chúng ta đã bảo vệ
dữ liệu với setter để đảm bảo rằng giá trị của age phải
nằm từ 0 đến 120, và getter sẽ trả về _age mà không có
bất kì cập nhật nào.

3.6 OOP với Dart

3.6 OOP với Dart
- Phương thức khởi tạo (Constructors): Lớp cần có

phương thức khởi tạo. 1 constructor là 1 phương thức
đặc biệt được tự động gọi khi 1 đối tượng của 1 lớp
được tạo ra. Nó được sử dụng để khởi tạo các giá trị
cho thuộc tính của lớp.

Phần này cung cấp kiến

thức tổng quan về kiến trúc
của Flutter.
Xem chi tiết hơn tại:
https://flutter.dev/docs/resou
rces/architectural-overview

Flutter được thiết kế như 1 hệ thống nhiều lớp, và có thể

mở rộng. Nó tồn tại dưới dạng một loạt các thư viện độc
lập mà mỗi thư viện phụ thuộc vào lớp bên dưới. Không
có lớp nào có quyền truy cập đặc biệt vào lớp bên dưới,
và mọi phần ở framework level đều được thiết kế để trở
thành tùy chọn và có thể thay thế.


4.1.1 Embedder
- Đối với hệ điều hành, các ứng dụng Flutter được đóng
gói theo cách giống như bất kì ứng dụng gốc nào khác.
1 platform-specific embedder cung cấp 1 entrypoint,
phối hợp với hệ điều hành để truy cập vào các dịch vụ
như rendering surfaces, accessibility, input, và quản lý
message event loop.
- Embedder được viết bằng ngôn ngữ phù hợp với nền
tảng: hiện tại là Java và C++ cho Android, Objective-
C/Objecttive-C++ cho iOS và macOS, và C++ cho
Windows và Linux.
- Khi sử dụng embedder, mã Flutter có thể tích hợp vào
ứng dụng hiện có dưới dạng module, hoặc cũng có thể
là toàn bộ nội dung ứng dụng.

4.1.2 Flutter Engine

- Cốt lõi của Flutter là Flutter Engine, phần lớn được viết
bằng C++, có các nguyên tắc cần thiết để hỗ trợ tất cả
ứng dụng Flutter.
- Engine có trách nhiệm chuyển đổi các composited
scenes bất cứ khi nào 1 frame mới cần được thiết kế.
Nó cung cấp khả năng triển khai các API cốt lõi của
Flutter bao gồm đồ họa (thông qua Skia), text layout, file
và network I/O, trợ năng, kiến trúc plugin và Dart
runtime – compile tool.
- Engine tiếp xúc với Flutter framework thông qua dart:ui
– thư viện bao bọc mã C++ cơ bản trong các lớp Dart.
Thư viện này bao gồm các lớp có nhiệm vụ điều khiển
hệ thống nhập liệu, đồ họa và text rendering.

4.1.3 Flutter Framework

Flutter Framework chính là nơi các nhà phát triển tương tác với
Flutter, cung cấp một framework hiện đại và reactive được viết
bằng ngôn ngữ Dart. Nó là một bộ thư viện phong phú các
platform, layout bao gồm một loạt các layer. Từ dưới lên, đó là:
- Foundation: Được xem là core library, định nghĩa và cung
cấp các utility classes, functions và được nhiều layer khác sử
dụng trong Flutter.
- Animation/Painting/Gesture: Là các thư viện cung cấp các
khối xây dựng cơ bản (basic building blocks) cho việc thực
hiện hóa các chuyển động trong Flutter (Animation), hỗ trợ
xây dựng giao diện (Painting), nhận dạng tương tác cử chỉ
của người dùng (Gesture).

- Rendering: Trong Flutter, các UI components được tổ

chức dưới dạng cây phân tầng với mỗi node là 1
RenderObject.
- Widgets: Được xây dựng bởi Dart với cảm hứng từ
React. Widgets được xây dựng theo dạng cây với
những object là lớp kế thừa của RenderObject. Ý tưởng
trọng tâm của widgets là bạn sẽ xây dựng UI trên các
widgets này. Widgets nhận và lưu trữ trạng thái (state)
của UI, và sẽ rebuild nếu state thay đổi.
- Material/Cupertino: Được xây dựng từ Widgets library
để triển khai ngôn ngữ thiết kế Material hoặc iOS
(Cupertino)

5. Giới thiệu các thành phần trong Flutter UI
Nội dung
5.1 Widgets – Xây dựng Layout trong Flutter
5.2 Xử lý User Input và Gestures
5.3 Theming và Styling
5.4 Điều hướng trong Flutter

Trong phần này, bạn sẽ tìm

hiểu về các khái niệm chính
của widgets, sự khác biệt
giữa Stateless và Stateful
widgets, các widget phổ
biến nhất trong Flutter và
cách thêm chúng vào ứng
dụng, cũng như cách tạo
giao diện hoàn chỉnh từ các
widget được tích hợp sẵn
(Built-in widgets).

5.1.1 Stateless và Stateful widgets

Widgets đóng 1 vai trò quan trọng
trong phát triển ứng dụng Flutter.
Chúng là các phần hình thành lên
UI, là phần code ra những gì hiển
thị cho người dùng,
UIs hầu như không bao giờ tĩnh,
chúng thay đổi thường xuyên. Khi
chúng ta xử lý UI, phải biết rằng UI
chắc chắn sẽ thay đổi trong vòng
đời của bất kì ứng dụng nào.
Đó là lý do mà Flutter cung cấp 2
loại widget: stateless và stateful.

Stateless widgets
- Một UI thông thường sẽ bao gồm nhiều
widget, một trong số chúng sẽ không bao
giờ thay đổi thuộc tính sau khi được khởi
tạo. Chúng được gọi là không có trạng
thái (state), nghĩa là chúng không tự thay
đổi thông qua các hành động hoặc hành vi
nội bộ.
- Thay vào đó, chúng được thay đổi bởi các
sự kiện bên ngoài trên widget cha trong
cây widget. Hiều rõ hơn là, widget con
được mô tả từ widget cha mà không tự
thay đổi được nó.
- Các Stateless widgets chỉ có các thuộc
tính final được xác định trong quá trình
xây dựng, và đó là thứ duy nhất cần được
tạo trên màn hình thiết bị

Stateful widgets
- Không giống như Stateless
widget nhận mô tả từ widget
cha và duy trì điều đó trong
suốt thời gian tồn tại của nó,
Stateful widget thay đổi mô tả
của chúng một cách linh hoạt
trong thời gian tồn tại. Chúng
có một lớp State đại diện cho
trạng thái hiện tại của widget.
- Bằng cách giữ trạng thái của
widget trong 1 đối tượng State
riêng biệt, framework có thể
rebuild lại bất cứ khi nào cần
mà không làm mất trạng thái
liên quan đến nó.

Chúng ta sẽ xem xét Stateless và

Stateful widgets trong ví dụ dưới
đây.
Hãy cùng nhớ lại ứng dụng Flutter
mặc định khi tạo 1 project Flutter
app với Android Studio (Phần 2 –
Cài đặt Flutter)
Nó có một tính năng đơn giản là khi
bạn ấn vào button “+” ở góc dưới
bên phải, con số ở chính giữa màn
hình sẽ tăng lên 1 đơn vị.


- Như bạn thấy ở code trên, lớp MyApp extends lớp

statelessWidget và ghi đè phương thức xây dựng build
(BuildContext). Phương thức này mô tả 1 phần của UI,
ở đây nó xây dựng 1 cây con widget bên dưới nó, với
con trực tiếp là MaterialApp.
- MaterialApp được định nghĩa là 1 widget bao bọc 1 tập
các widget con, thường được yêu cầu cho ứng dụng
được viết theo ngôn ngữ thiết kế material.
- Ở code trên, MaterialApp chứa các thuộc tính như title,
theme, và thuộc tính home chỉ định widget đầu tiên
được hiển thị dưới dạng trang chủ ứng dụng, đó là
MyHomePage - 1 stateful widget được bàn ở phần
dưới.



- MyHomePage là 1 stateful widget, nó được định nghĩa

kèm với 1 đối tượng State là _MyHomePageState.
Bằng việc kế thừa statefulWidget, MyHomePage phải
trả về một đối tượng State hợp lệ trong phương thức
createState(), đó là 1 thể hiện của _MyHomePageState.
- Một widget State hợp lệ là một class mà kế thừa từ
framework State class – được định nghĩa là “The logic
and internal state for a statefulWidget”.
- Và state của widget MyHomePage ở trên được xác định
chỉ trong 1 thuộc tính, _counter. Thuộc tính _counter lưu
trữ số lần bạn nhấn nút vào button ở góc dưới bên phải.

- Một stateful widget có khả năng thay đổi diện mạo trong
suốt vòng đời của nó – nghĩa là nó cần được rebuild để
phản ánh những thay đổi đó. Những thay đổi đó xảy ra
khi thực thi phương thức _incrementCounter(), phương
thức được gọi mỗi khi button được nhấn.
- Lưu ý trong code trên về việc sử dụng thuộc tính
onPressed của widget FloatingActionWidget, thuộc tính
này nhận 1 hàm (ở đây là _incrementCounter()), và hàm
sẽ được thực thi khi nút được pressed (được nhấn)

- Vậy làm thế nào mà framework State biết được khi nào
widget con thay đổi và cần rebuild nó? setState là câu
trả lời. Bằng cách gọi phương thức setState, framework
được thông báo rằng nó cần phải rebuild widget con.
Chú ý: Để ý trong phần code của statefulWidget, sẽ thấy

sử dụng tham số key. Đây là một thuộc tính quan trọng
của các widget trong flutter, được sử dụng nhưng không
trình bày cụ thể ở đây. Xem chi tiết tại:
https://flutter.dev/docs/development/ui/widgets-intro#keys


5.1.2 Built-in widgets

Flutter tập trung nhiều vào UI, do đó nó chứa một danh
mục lớn các widget để xây dựng các giao diện tùy chỉnh
theo nhu cầu của bạn.
Các widget có sẵn trong Flutter đi từ những widget đơn
giản, chẳng hạn như Text widget (có trong ví dụ ở phần
5.1.1) đến những widget phức tạp giúp thiết kế UI với hoạt
ảnh (animation) và xử lý cử chỉ.

Sau đây là một số widget cơ bản. Hãy đọc về cú pháp và các

thuộc tính của chúng trong những đường link ở cung cấp bên
dưới:
- Text widget: Hiển thị một chuỗi kí tự
https://api.flutter.dev/flutter/widgets/Text-class.html
- Image widget: Hiển thị ảnh
https://api.flutter.dev/flutter/widgets/Image-class.html
- Material Design và iOS Cupertino widgets: Các widget trong
Flutter theo một cách nào đó đều có nguồn gốc từ một
platform-specific guideline: Google Material Design hoặc iOS
Cupertino. Điều này giúp các nhà phát triển tuân theo một
nguyên tắc thiết kế thống nhất. Các widget được cung cấp từ
hai nền tảng trên là (Button, Scaffold, Dialogs, TextField,
Selection widgets, Date and time pickers,…)
- Xem chi tiết danh mục các widget tại:
https://flutter.dev/docs/development/ui/widgets

Những widget được đề cập phía trên được dùng để xây

dựng các giao diện tùy chỉnh, tức là nó có hiển thị trên
màn hình. Tuy nhiên chúng đều không có thuộc tính xác
định vị trí (Position). Vậy các widget đó được tổ chức trên
màn hình như thế nào?
Câu trả lời là, Flutter còn cung cấp các widget khác, chúng
không xuất hiện trên màn hình đối với người dùng, nhưng
được tạo ra với nhiệm vụ thiết kế bố cục, định vị, định cỡ,
định kiểu,….
Bên dưới có liệt kê ra một số loại cơ bản và cú pháp của
nó nhưng không kèm theo giải thích, để xem chi tiết, truy
cập link: https://flutter.dev/docs/development/ui/layout

Row và Column



Container

Packing

GridView: Sử dụng GridView để sắp xếp các widget dưới

dạng danh sách 2 chiều.


ListView: Là một
widget dạng cột,
nhưng được trang
bị khả năng cuộn
khi nội dung quá
dài so với khả
năng hiển thị của
màn hình.


Stack: Các widget được sắp xếp chồng lên nhau. Như
trong hình dưới, Text widget có nội dung là “Mia B” chồng
lên trên 1 Image widget khác.


5.1.3 Tạo 1 UI với

Widgets (Tự làm)
Hãy dùng kiến
thức đã học để tạo
giao diện sau:

Với sự hữu dụng của widgets, chúng ta đã có thể tạo ra

một giao diện giàu tính trực quan cho phép người dùng
tương tác thông qua cử chỉ và nhập dữ liệu.
Phần này sẽ tìm hiểu về các widget được sử dụng để xử
lý cử chỉ của người dùng, nhận và xác thực thông tin nhập
của người dùng.

5.2.1 Xử lý cử chỉ người dùng (Handling user gestures)

Một ứng dụng di động sẽ vô dụng nếu không có tương tác.
Flutter framework cho phép xử lý cử chỉ người dùng theo
mọi cách có thể, từ các thao tác đơn giản đến các cử chỉ
kéo và xoay. Các sự kiện trên màn hình trong hệ thống cử
chỉ của Flutter được tách ra thành 2 lớp, đó là:
- Pointer (Con trỏ): Là lớp xử lý tương tác cấp thấp, nơi
bạn có thể xử lý một sự kiện con trỏ và quyết định cách
kiểm soát nó, chẳng hạn bằng một thao tác kéo, hoặc
single tap (nhấn 1 lần). Flutter cung cấp lớp Listener có
thể phát hiện sư kiện tương tác con trỏ. Xem chi tiết tại:
https://api.flutter.dev/flutter/widgets/Listener-class.html

- Gesture (Cử chỉ): Là lớp xử lý tương tác cấp cao. Do

không phải lúc nào cũng có thể xử lý các sự kiện con
trỏ bằng Listener widget, nên thay vào đó các sự kiện
có thể được xử lý trên Gesture. Có thể thấy chúng trong
một số hoạt động như nhấn (tap), nhấn đúp (double tap)
nhấn và giữ (press and hold), kéo (drag), thu phóng
(scale),….

Tap

Double tap

Press and hold

Drag
Horizontal drag

Vertical drag: tương tự như horizontal drag

Scale

5.2.2 Input widget

Flutter có cung cấp các widget để hỗ trợ việc người dùng
nhập dữ liệu, xác thực nó cũng như là cung cấp phản hồi
kịp thời tới người dùng.
Tìm hiểu chi tiết về kiến thức này tại:
https://flutter.dev/docs/development/ui/widgets/input

Mọi ứng dụng đều cần có bản sắc

riêng, trước hết là về mặt thiết kế
giao diện người dùng. Tạo UI với
các chủ để và style tích hợp sẽ
làm cho ứng dụng trông chuyên
nghiệp và dễ sử dụng. Ngoài ra
Flutter cũng cho phép bạn tự tạo
ra các themes và styles của riêng
bạn. Để làm được điều đó, bạn
cần học cách tùy chỉnh giao diện
của ứng dụng bằng cách thêm
phông chữ tùy chỉnh, sử dụng
themes và khám phá các tiêu
chuẩn nền tảng nổi tiếng, cụ thể
là Google Material Design và iOS
Cupertino.

Dưới đây cung cấp đường dẫn tới tài liệu để bạn có thể
nghiên cứu thêm về phần này.
https://flutter.dev/docs/development/ui/widgets/styling
https://api.flutter.dev/flutter/material/Theme-class.html
https://api.flutter.dev/flutter/material/MaterialApp-class.html
https://api.flutter.dev/flutter/cupertino/CupertinoApp-
class.html

Ứng dụng di động thường được tổ chức trên nhiều màn

hình, mỗi màn hình có nhiệm vụ khác nhau. Ví dụ một app
được thiết kế, có 1 màn hình để hiển thị tổng quan về một
sản phẩm nào đó, khi người dùng nhấn vào ảnh của sản
phẩm, màn hình điện thoại sẽ chuyển sang 1 màn hình
khác có nhiệm vụ là hiển thị chi tiết về sản phẩm đó.
Trong Flutter, route tương ứng đến 1 màn hình được quan
lý bởi Navigator widget của ứng dụng. Navigator widget
quản lý ngăn xếp điều hướng, push 1 route mới vào hoặc
pop 1 route khác ra.
Phần này cung cấp kiến thức cơ bản về điều hướng trong
Flutter thông qua thực hành. Toàn bộ code trong phần này
được lấy từ https://flutter.dev/docs/cookbook/navigation

5.4.1 Animate a widget across screens

Bên dưới là 2 màn hình của 1 ứng dụng (HeroApp) đơn
giản. Khi ta tap vào ảnh chiếc máy tính trong màn hình 1
(MainScreen), màn hình điện thoại sẽ chuyển từ màn hình
1 sang màn hình 2 (DetailScreen).




5.4.2 Navigate to a new screen and back

Khi ta tap vào button trong màn hình 1 (FirstRoute), màn
hình điện thoại sẽ chuyển từ màn hình 1 sang màn hình 2
(SecondRoute).
Khi ta tap vào button trong màn hình 2, màn hình điện
thoại lại chuyển trở lại về màn hình 1.
Lưu ý cách sử dụng Navigator.push() và Navigator.pop()




5.4.3 Navigate with named routes

5.4.4 Pass arguments to a named route
5.4.5 Return data from a screen
5.4.6 Send data to a new screen
(Các phần này xem chi tiết trong link đã cung cấp)

6. Phát triển 1 Flutter app đầy đủ tính năng
Đây là phần Flutter nâng cao không nằm trong mục tiêu
của bộ slide này (mục tiêu ở mức tìm hiểu về công nghệ
Flutter).
Nên ở đây không trình bày, mà cung cấp tài liệu để bạn
đọc tự tìm hiểu và nghiên cứu. Tìm hiểu phần này tại các
chương 8 (Firebase Plugins), chương 9 (Developing Your
Own Flutter Plugin), chương 10 (Accessing Devices
Features from the Flutter App), chương 11 (Platform Views
and Map Integration) trong cuốn Flutter for Beginners phần
tài liệu tham khảo.

7. Xây dựng 1 ứng dụng đơn giản với Flutter
Phần này sẽ hướng dẫn từng bước cách xây dựng lên
ứng dụng chuyển đổi đơn vị đo.
Ứng dụng chuyển đổi đơn vị đo này sẽ cho phép người
dùng chọn một số đo hệ mét hoặc hệ Anh, và chuyển đổi
nó sang một thước đo khác. Ví dụ, người dùng có thể
chuyển đổi một khoảng cách với đơn vị mile (dặm), sang
khoảng cách với đơn vị km. Nó giúp cho người dùng hiểu
được tốc độ xe của mình, hoặc trọng lượng của thực
phẩm mà bạn mua trong siêu thị, ở một quốc gia dùng hệ
đo khác.
Kiến thức cần sử dụng: Kiến thức về State trong Flutter, và
TextField (xử lý với users input)
IDE sử dụng: Android Studio


Bước 1: Tạo class

MyApp với stateful
widgets.
Khởi động Android
Studio, tạo 1
Flutter app với tên
gọi Unit Converter.
Trong file
main.dart, xóa
code mẫu, và thay
bằng:

Lúc này, màn hình ứng dụng hiển thị như sau:

Bước 2: Đọc user input từ TextField

Trong State class, tạo 1 thành viên _numberFrom, đây là
giá trị sẽ thay đổi dựa vào user input.
Tiếp theo, trong body của build() method, xóa Text widget
và thay thế bằng TextField.


Hiện tại, TextField vẫn chưa làm gì, do đó, điều đầu tiên
chúng ta cần làm là đoc giá trị mà người dùng nhập vào
nó. Để đáp lại mỗi thay đổi trong nội dung của TextField,
sẽ sử dụng phương thức onChanged, và update State.

Ở đây, mỗi khi giá trị của TextField thay đổi (onChanged),
chúng ta sẽ kiểm tra xem là giá trị nhập vào đó có là 1 số
hay không. Nếu là 1 số, chúng ta sẽ thay đổi giá trị của
_numberFrom, bằng cách này, ta đã thực sự cập nhật
được state.

Để kiểm tra xem bản cập nhật này có xảy ra hay không,
hãy thêm 1 Text widget mà sẽ show ra nội dung của
TextEdit widget, và bọc lại 2 widget đó vào trong 1 Column

Trước khi thử lại app, hãy thêm 1 method vào MyAppState
class:
Phương thức này được gọi 1 lần cho mỗi đối tượng State
khi State được xây dựng. Đây cũng là nơi bạn khởi tạo
các giá trị có thể cần khi xây dựng các class. Ở đây, chúng
ta đã đặt giá trị ban đầu cho _numberFrom. Cũng lưu ý
rằng, phải luôn gọi super.initState() ở cuối phương thức
initState().

Bây giờ, khi bạn chạy thử app sẽ thấy rằng, khi nhập 1 số
vào TextField, sẽ tạo ra 1 bản sao ở Text widget.
Tiếp theo, chúng ta sẽ hoàn tất UI của app, đầu tiên là xây
dựng 1 widget khác, đó là DropdownButton.

DropdownButton là 1 widget mà cho phép người dùng

chọn 1 giá trị từ 1 danh sách các item. DropdownButton sẽ
hiển thị item hiện tại đang được lựa chọn, ở phía tay phải
sẽ có 1 hình tam giác nhỏ để mở ra danh sách item.

Ở đây, chúng ta cũng đã tạo ra 1 danh sách _measures

chứa các đơn vị đo mà ta muốn làm việc.
Hãy thử chạy lại app.


Tiếp theo, là cách phản hồi lại với user input khi thay đổi
giá trị của DropdownButton.
- Tạo 1 String là _startMeasure ở trên cùng của
MyAppState, nó sẽ chứa giá trị item được chọn từ
DropdownButton.
- Sửa lại onChanged() bằng:
- Thêm dòng này vào DropdownButton:

Sau khi xây dựng xong DropdownButton, là lúc làm bước

cuối cùng để hoàn tất UI của ứng dụng. Sau đây sẽ là kết
quả cuối cùng của nó:


Để hoàn thiện nó, chúng ta cần 8 widget trên màn hình:

- 1 Text có nội dung là Value.
- 1 TextField cho giá trị ban đầu.
- 1 Text có nội dung là From.
- 1 DropdownButton cho việc lựa chọn đơn vị ban đầu.
- 1 Text khác có nội dung là To
- 1 DropdownButton khác cho việc lựa chọn đơn vị cần
chuyển đổi
- 1 RaisedButton để gọi phương thức phục vụ việc
chuyển đổi giá trị
- 1 Text cho việc hiển thị giá trị cuối cùng

Đầu tiên, chúng ta sẽ tạo ra 2 TextStyle widget. Ưu điểm

của việc này là chúng ta có thể sử dụng nó nhiều lần cho
các widget khác mà không cần phải xác định chi tiết style
cho các widget này. (Tái sử dụng mã)
1. inputStyle được sử dụng làm style cho TextFields,
DropdownButtons, và Buttons. Ta tạo nó ở đầu build():
2. labelStyle được sử dụng cho các Text widget.

3. Tiếp theo chúng ta sẽ tạo 1 Column widget để tổ chức 8

widget trong UI thành 1 cột (Column này được đặt trong 1
Container để có thể căn chỉnh vị trí của nó trong màn hình)
4. Trong Column, đầu tiên ta tạo widget Text thứ nhất
Chú ý trong Column, ta còn sử dụng 1 widget khác là

Spacer(), có vai trò tạo ra các khoảng trống giữa các
widget.

5. Tiếp theo là 1 TextField để nhập giá trị cần đổi
6. Và bên dưới là 1 Text khác với nội dung From

7. Tiếp theo sau “From” Text, ta đặt 1 DropdownButton lựa

chọn đơn vị ban đầu, có value là _startMeasure
8. Và Text thứ 2 với nội dung là “To”

9. Dưới “To” Text, chúng ta đặt DropdownButton thứ hai,

để lựa chọn đơn vị cần chuyển đổi sang, có value là
_convertedMeasure (cần khai báo String này cùng với
_startMeasure ở đầu MyAppState class)

10. Bên dưới DropdownButton thứ hai, ta cần tạo 1

RaisedButton với widget con là Text có nội dụng là
“Convert”
11. Widget cuối cùng của cột, là 1 Text dùng cho việc hiển
thị kết quả chuyển đổi

12. Và còn 1 công đoạn cuối cùng trước khi hoàn thiện UI
của chúng ta. Vì màn hình hiển thị của ứng dụng được
yêu cầu hiển thị 8 widget mà ta đã xây dựng, tuy nhiên rất
có thể màn hình không thể hiển thị cùng 1 lúc cả 8 widget.
Do đó, ta cần cho nó khả năng cuộn. Bằng cách đưa
Column vào trong 1 SingleChildScrollView.
UI của chúng ta đã chính thức hoàn tất. Tuy nhiên lúc này
khi bạn chọn đơn vị trong các DropdownButton hay nhấn
RaisedButton, ứng dụng vẫn chưa làm gì cả. Bây giờ
chính là lúc xây dựng phần logic của app.

Bước 3: Xây dựng logic cho ứng dụng

Đây là ma trận mô tả việc chuyển đổi giá trị của các đơn vị

Ví dụ, khi bạn muốn chuyển 100 km sang mile, bạn sẽ

nhân 100 với con số biểu thị quan hệ (km-mile) tìm thấy
trong bảng (0.62137). Tuy nhiên, có những cặp đơn vị
không thể chuyển đổi cho nhau, ví dụ như giữa km và
gam, do đó con số biểu thị quan hệ giữa chúng sẽ là 0.

Tiếp theo, để thuận tiện cho việc duyệt mảng, chúng ta sẽ

gán mỗi đơn vị với một con số.

Tiếp theo, ta biến ma trận chuyển đổi đơn vị kia thành mã

code sau để tiện sử dụng
Ở đây, chúng ta thấy rõ sự tiện lợi khi biểu thị mội đơn
đơn vị thành 1 con số.

Bây giờ, chúng ta cần phải xây dựng phương thức convert
để chuyển đổi giá trị, sử dụng formulas và _measureMap

Bước cuối cùng, là bước chúng ta sẽ show kết quả của sự

chuyển đổi cho người dùng, thông qua widget Text cuối
cùng.
- Khai báo 1 String là _resultMessage ở trên cùng của
MyAppState class.
- Trong phương thức convert(), sau khi đã tính được
result, cần gọi setState() để thông báo với framework
cần update UI. Bổ sung code sau vào convert():

- Cuối cùng, cần gọi đến phương thức convert() mỗi khi
người dùng tap vào “Convert” button. Sửa lại code của
RaisedButton như sau:
- Để hiện thị kết quả, sửa lại Text widget cuối cùng, thứ
mà sẽ chứa message tới người dùng

Và đây chính là lúc app của chúng ta đã hoàn thiện. Nếu

bạn thử chạy lại, màn hình sẽ có kết quả như sau:

Toàn bộ code của phần 7 này, bạn có thể tham khảo tại:
https://github.com/PacktPublishing/Flutter-
Projects/tree/master/ch_02

Kết luận
Cùng với React Native đã quá nổi tiếng, Flutter dù mới

nhưng cũng là một công nghệ mà những nhà phát triển
mobile không thể không biết đến.
Tại thời điểm bộ slide này được viết (9/2020), Flutter đã
vượt lên trên React Native về số lượt star trên Github (thời
điểm tháng 9/2019, Flutter chỉ bằng một nửa), cũng như
vượt số lượt search trên Google (số liệu của Google
Trend), qua đó cũng đủ cho thấy độ nổi tiếng ngày càng
cao của nó.
Hi vọng các bạn có thể nhận được những kiến thức hữu
ích từ tài liệu này. Xin chân thành cảm ơn!

Tài liệu tham khảo
1. Alessandro Biessek (2019). Flutter for Beginners,

Packt, Birmingham
https://tinyurl.com/chinhdnguyenflutter4beginners
2. Simone Alessandria (2020). Flutter Projects, Packt,
Birmingham.
https://tinyurl.com/chinhdnguyenflutterprojects
3. Flutter documentation: https://flutter.dev/docs
Trong tài liệu có sử dụng hình ảnh minh họa từ nguồn
Internet.


Tìm hiểu về công nghê Flutter

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tìm hiểu về công nghê Flutter

Uploaded by

Copyright:

Available Formats

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY

LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG

CÔNG NGHỆ FLUTTER

Nguyễn Đức Chính

Flutter là bộ công cụ giao diện

IT3100 – Lập trình hướng đối tượng 2

1. Giới thiệu về Flutter và ngôn ngữ Dart

IT3100 – Lập trình hướng đối tượng 3

1.1.2 Lịch sử phát triển

IT3100 – Lập trình hướng đối tượng 5

IT3100 – Lập trình hướng đối tượng 6

Hiện nay, có nhiều framework được tạo ra với mục đích

IT3100 – Lập trình hướng đối tượng 7

1.1.2 Những vấn đề Flutter muốn giải quyết

IT3100 – Lập trình hướng đối tượng 8

- Long build/compile time (Thời gian xây dựng/ biên

IT3100 – Lập trình hướng đối tượng 9

1.1.3 Đặc điểm của Flutter

IT3100 – Lập trình hướng đối tượng 10

Một framework hiện đại như Flutter

© SoICT 2018 IT3100 – Lập trình hướng đối tượng 11

1.2.1 Tổng quan về Dart

IT3100 – Lập trình hướng đối tượng 12

IT3100 – Lập trình hướng đối tượng 13

- Kiểu tĩnh (statically typing): Mặc dù chú thích kiểu là

IT3100 – Lập trình hướng đối tượng 14

1.2.2 Tiến hóa của Dart

IT3100 – Lập trình hướng đối tượng 15

IT3100 – Lập trình hướng đối tượng 16

1.2.3 Dart hoạt động như thế nào?

IT3100 – Lập trình hướng đối tượng 17

IT3100 – Lập trình hướng đối tượng 18

IT3100 – Lập trình hướng đối tượng 19

IT3100 – Lập trình hướng đối tượng 20

2.1 Yêu cầu hệ thống

IT3100 – Lập trình hướng đối tượng 21

2.2 Các bước cài đặt Flutter

IT3100 – Lập trình hướng đối tượng 22

Bước 2: Cập nhật path

IT3100 – Lập trình hướng đối tượng 23

IT3100 – Lập trình hướng đối tượng 24

Bước 3: Thiết lập Editor

IT3100 – Lập trình hướng đối tượng 25

IT3100 – Lập trình hướng đối tượng 26

Bước 4: Thiết lập thiết bị Android

IT3100 – Lập trình hướng đối tượng 27

Bước 4 <Tiếp>: Thiết lập Android emulator

IT3100 – Lập trình hướng đối tượng 28

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

IT3100 – Lập trình hướng đối tượng 30

Bước 5: Thử nghiệm

IT3100 – Lập trình hướng đối tượng 31

IT3100 – Lập trình hướng đối tượng 32

Với những người đã có kinh

IT3100 – Lập trình hướng đối tượng 33

Một số ví dụ trong phần này được viết trên DartPad. Đây

IT3100 – Lập trình hướng đối tượng 34

IT3100 – Lập trình hướng đối tượng 35

IT3100 – Lập trình hướng đối tượng 36

- Kiểu biến số trong Dart

IT3100 – Lập trình hướng đối tượng 37

IT3100 – Lập trình hướng đối tượng 38

- Collection: List và Map