Bài 5: Giới thiệu ngôn ngữ Dart - Học lập trình Flutter cơ bản

Dart là một ngôn ngữ lập trình mã nguồn mở (open source) đa năng (general purpose). Nó được phát triển
bởi GoogleI. Dart là một ngôn ngữ lập trình hướng đối tượng sử dụng cú pháp của C ( C-style syntax). Nó hỗ
trợ các khái niệm như interface, class,... không giốn như các ngôn ngữ lập tình khác, Dart không hỗ trợ mảng
(array). Dart collections có thể sử dụng các cấu trúc dữ liệu (data structure) thay thế.

Đoạn code dưới đây minh hoạ một chương trình Dart cơ bản:

void main() {
print("Dart language is easy to learn");
}

Biến và Kểu dữ liệu

Biến (Variable) là tên đại diện cho nơi lữu trự dữ liệu còn Kiểu dữ liệu (Data types) đơn giản là loại và kích
thước của dữ liệu liện kết với biến và hàm.

Dart sử dụng từ khoá var để khai báo biến. 

var name = 'Dart';

Từ khoá final và const được sử dụng để khai báo hằng số (constants). Như ví dụ dưới đây

void main() {
final a = 12;
const pi = 3.14;
print(a);
print(pi);
}
Dart hỗ trợ các kiểu dữ liệu dưới đây, chúng ta không cần thiết phải khai báo kiểu dữ liệu cho biến

 Numbers − Được sử dụng cho số – Integer và Double.

 Strings − Được sử dụng cho chuỗi kí tự. Giá trị của String được đặt trong dâu nháy đơn hoặc
nháy kép.
 Booleans − _Được sử dụng cho giá trị  Boolean đúng và sai
 Lists and Maps − Được sử dụng cho nhóm đối tượng. Ví dụ một Danh sách đơn giản có thể được
mô tả như sau:
void main() {
var list = [1,2,3,4,5];
print(list);
}
 Map có thể được mô tả như sau:
void main() {
var mapping = {'id': 1,'name':'Dart'};
 print(mapping);
}
 Dynamic − Trường hợp kiểu dữ liệu chưa được định nghĩa thì giá trị mặc đinh là  dynamic. 
void main() {
dynamic name = "Dart";
print(name);
}

Điều khiển và vòng lặp

Một khối điều khiển (decision making block) đánh giá một điều kiện trước khi hướng dẫn thực thi. Dart hỗ
trợ các khối lênh If, If..else và switch.

Vòng lặp được sử dụng để lặp lại một khối lệnh cho đến khi một điều kiện cụ thể được đáp ứng. _Dart hỗ trợ
các vòng lặp for..in, while và do.. while

Ví dụ đoạn code hiển thị các số từ 1 đến 10

void main() {
for( var i = 1 ; i <= 10; i++ ) {
if(i%2==0) {
print(i);
}
}
}

Hàm (Functions)
Hàm là một nhóm các câu lệnh nhằm thực hiện một tác vụ nhất định. Chúng ta cùng xem một ví dụ về hàm
trong Dart dưới đây:

void main() {
add(3,4);
}
void add(int a,int b) {
int c;
c = a+b;
print(c);
}
Hàm trên làm nhiệm vụ cộng hai tham số truyền vào, và in ra kết quả trên màn hình

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

Dart là một ngôn ngữ lập trình hướng đối tượng (object-oriented language). Nó hỗ trợ một số tính năng của
lập trình hướng đối tượng như class, interface,...

Mỗi một class (lớp) định nghĩa cho một loại đối tượng. Một class bao gồm những nội dung sau đây:
  Các thuộc tính (Fields)
 Các hàm Getter và setter
 Hàm khởi tạo (Constructor)
 Phương thức (Function)
Dưới đây là một minh hoạ các thành phần của một class

class Employee {
String name;

//getter method
String get emp_name {
return name;
}
//setter method
void set emp_name(String name) {
this.name = name;
}
//function definition
void result() {
print(name);
}
}
void main() {
//object creation
Employee emp = new Employee();
emp.name = "employee1";
emp.result(); //function call
}
Bài 6: Widget trong Flutter - Học lập trình Flutter cơ bản
Như đã nói trong các bài học trước widget là mọi thứ trong Flutter (widgets are everything in Flutter
framework). Đây là thành phần cơ bản và chủ yếu nhất. Nó tương tự như là các view ở trong Android.

Ở trong bài trước thì chúng ta đã tạo được các widget đơn giản, trong bài học này chúng ta sẽ tìm hiểu kĩ hơn
về cách tạo widget, cách thức hoạt động và các loại widget được hỗ trợ bởi Fullter.

Trong ứng dụng Hello World, chúng ta đã tạo một widget tên là MyHomePage   

class MyHomePage extends StatelessWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(this.title), ),
body: Center(child: Text( 'Hello World',)),
);
}
}
Chúng ta sẽ tìm hiểu kỹ hơn về cách tạo widget này:

Đầu tiên chúng ta thấy rằng MyHomePage được kết thừa từ một widget khác là  StatelessWidget. Thông
thường trong Flutter để tạo một widget mới (widget của người dùng nhé, ko phải widget mặc định) ta cần kế
thừa một trong hai class là StatelessWidget và  StateFullWidget. Để hiểu hơn thì chúng ta sẽ nói rõ trong bài
Sate, nhưng chúng ta có thể hiêu đơn giản StatelessWidget là một widget không có trang thái nào, nó chỉ
nhận dữ liệu và hiển thị một cách thụ động, không nhận bất cứ event nào.

StatelessWidget chỉ yêu cầu implement duy nhất một phương thức build . Phương thức này lấy thông tin để
dựng các widget thông qua tham số BuildContext và trả về widget mà nó tạo ra.

Như đoạn code ở trên, ta có thể thấy hàm build sử dụng thuộc tính title từ hàm khởi tạo để hiển thị têu đề
cho ứng dụng. Còn tham số Key được dùng để định dang cho widget.

Chúng ta thấy hàm build lại gọi tới một widget khác là Scaffold. Widget này đóng vai trò như một phần nền
để bố trí các thành phần khác theo phong cách Material Design, tương tự như DrawerLayout và
CoordinatorLayout trong Android vậy.

Cuối cùng ta thấy có một widget là Center có nhiệm vụ bố trí Text ở giữa màn hình.

Để hiểu hơn mối quan hệ giữa các widget chúng ta tham khảo sơ đồ dưới đây:
Tổng quan về các loại Widget trong Flutter

Trong Flutter tất các widget được phân loại dựa trên chức năng thành 4 nhóm sau:

 Các widget giao diện đặc thù theo từng nền tảng -Platform widgets
 Các widget hỗ trợ bố trí giao diện - Layout widgets
 Các widget quản lý trạng thái - State maintenance widgets
 Các widget cơ bản độc lập với nền tảng - Platform independent / basic widgets
Chúng ta sẽ tìm hiểu kĩ từng loại widget dưới đây:

Platform specific widgets

Đây là các widget dành riêng cho từng nên tảng Android hay IOS

Các widget dành riêng cho Android được thiết kết theo Material design guideline cho Android OS nên được
gọi là  Material widgets.

Các widget dành riêng cho iOS được thiết kế theo Human Interface Guidelines _bởi Apple và được gọi
là Cupertino widgets

Một số material widgets phổ biến nhất cho Android:

 Scaffold  FloatingActionButton  Checkbox

 AppBar  FlatButton  Radio
 BottomNavigationBar  IconButton  Switch
 TabBar  DropdownButton  Slider
 TabBarView  PopupMenuButton  Date & Time Pickers
 ListTile  ButtonBar  SimpleDialog
 RaisedButton  TextField  AlertDialog
Một số Cupertino widgets phổ biến nhất cho IOS

 CupertinoButton  CupertinoTimerPicker  CupertinoTabScaffold

 CupertinoPicker  CupertinoNavigationBar  CupertinoTabView
 CupertinoDatePicker  CupertinoTabBar  CupertinoTextField
  CupertinoDialog
 CupertinoDialogAction
 CupertinoFullscreenDialo
gTransition
 CupertinoPageScaffold
Layout widgets
 CupertinoPageTransition  CupertinoPopupSurface
 CupertinoActionSheet  CupertinoSlider
 CupertinoActivityIndicat
or
 CupertinoAlertDialog

Trong Flutter, một widget có thể được tạo thành từ một hoặc nhiều widget khác. Việc kết hợp nhiều widget
thành một widget được thực hiện thông qua các layout widget. Ví dụ, các widget con có thể được căn giữa
thông Center widget.

Một số  layout widgets phổ biến:

Container − Một hình chữ nhật được thiết kế sử dụng BoxDecoration widgets với background (nền), border
(đường viền) và shadow (bóng đổ).

Center − Căn giữa các widget con.

Row − Sắp xếp các widget con theo hàng ngang (horizontal direction).

Column − Sắp xếp các widget con theo hàng dọc (vertical direction).

Stack − Sắp xếp các widget con lên trên cùng

Chúng ta sẽ tim hiểu kỹ hơn trong bài Giới thiệu layout widget ở các bài sau.

State maintenance widgets

Trong Flutter, tất cả các widget đều kế thừa từ StatelessWidget hoặc StatefulWidget.

Widget kế thừa từ StatelessWidget sẽ không có bất kì trạng thái nào nhưng nó có thể bao gồm widget được
kết thừa từ StatefulWidget. Bản chất sự linh hoạt của ứng dụng là thông qua hành vi tương tác của các
widget và sự thay đổi trạng thái của chúng. Ví dụ khi chạm vào một nút tăng giảm của bộ đếm, nó sẽ làm tăng
hoặc giảm trạng thái của bộ đếm trong widget và cơ chế reactive nature (tự _phản ứng) sẽ tự động thay đổi
lại giao diện của widget theo trạng thái mới.

Chúng ta sẽ tìm hiểu kỹ hơn về khái niệm StatefulWidget trong bài học về State management

Platform independent / basic widgets

Flutter cung cấp một số lương lớn các  widget cơ bản để tạo các giao diện người dùng từ đơn giản đến phứ
tạp độc lập với nền tảng hệ điều hành. Chúng ta sẽ tìm hiểu một số widget cơ bản dưới đây:

Text

Text widget được sử dụng để hiển thị một đoạn văn bản. Chúng ta có thể định dạng văn bản thông qua thuộc
tính style vàTextStyle class. Ví dụ:

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

Text widget có một hàm constructor riêng, Text.rich, sử dụng một TextSpan để mô tả các định
dang. TextSpan widget có tính chất đệ quy và nó có thể bao gồm các TextSpan khác. Ví dụ:

Text.rich(
TextSpan(
children: [
TextSpan(text: "Hello ", style:
TextStyle(fontStyle: FontStyle.italic)),
TextSpan(text: "World", style:
TextStyle(fontWeight: FontWeight.bold)),
],
),
)
Một số thuộc tính cơ bản của Text widget

 maxLines, int − Số lượng dòng tối đa

 overflow, TextOverFlow − Xỷ lý việc tràn văn bản sử dụng TextOverFlow class
 style, TextStyle − Mô tả định dang văn bản thông TextStyle class
 textAlign, TextAlign − Căn lề văn bản: right, left, justify,.. sử dụng TextAlign class
 textDirection, TextDirection − Quy đinh chiều của văn bản  left-to-right _hoặc right-to-left
Image

Image widget được sử dụng để hiển thị hình ảnh trong ứng dụng. Image widget cung cấp các phương thức
khởi tạo khác nhau để load hình ảnh từ các nguồn khác nhau:

 Image − Hình ảnh thông thường sử dụng ImageProvider

 Image.asset − Load hình ảnh từ flutter project’s assets
 Image.file − Load hình ảnh từ system folder
 Image.memory − Load hình ảnh từ memory
 Image.Network − Load hình ảnh từ mạng network
Lựa chọn đơn giản nhất để hiển thị hình ảnh trong Flutter là đưa hình ảnh vào thư mục assets của ứng dụng
rồi load vào widget khi cần:

Tạo một thư mục assets ở trong project và copy file ảnh lưu vào.

Mô tả assets ở trong file pubspec.yaml như sau 

flutter:
assets:
- assets/smiley.png
Nhớ đúng cú pháp trên nhé

Sau đó, load và hiển thị ảnh trong Ứng dụng bằng widget.

Image.asset('assets/smiley.png')
Thay thế code MyHomePage widget trong ứng dụng hello world như sau:
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text(this.title), ),
body: Center( child: Image.asset("assets/smiley.png")),
);
}
}
Chạy thử ứng dụng hình ảnh sẽ được load lên như sau:

Một số thuộc tính cơ bản của Image widget:

 image, ImageProvider − Kích thước ảnh

 width, double − Độ rộng của ảnh
 height, double − Độ cao của ảnh
 alignment, AlignmentGeometry − Căn lề
Icon

Icon widget hiển thị hình ảnh các icon cơ bản trong IconData class. 

Icon(Icons.email)
Chúng ta sửa lại code MyHomePage widget như sau:
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(this.title),),
body: Center( child: Icon(Icons.email)),
);
}
}
Chạy thử trên máy ảo