Flutter with Dart: Làm quen với ngôn ngữ lập trình Dart

Mở đầu

iOS và Android đang là hai nền tảng mobile hàng đầu trên thế giới với rất nhiều những điểm khác biệt nhau. Tất nhiên là chúng có môi trường phát triển ứng dụng hoàn toàn khác nhau. Từ đó sinh ra nhiều khó khăn cho anh em mobile developer khi phải phát triển cùng một ứng dụng nhưng phải lập trình trên hai nền tảng khác nhau, gây mất nhiều thời gian, công sức và tiền bạc. Đã có nhiều nền tảng cross platform ra đời để giải quyết vấn đề trên như Xamarin, PhoneGap, React-Native, … Không nằm ngoài cuộc chơi cross platform Google cũng cho ra đời nền tảng Flutter của mình với nhiều ưu điểm như:

  • Sử dụng ngôn ngữ lập trình Dart đơn giản và dễ học
  • Phát triển ứng dụng nhanh
  • Giao diện người dùng đẹp và linh hoạt
  • Hỗ trợ rất nhiều widget khác nhau
  • Thể hiện cùng một UI trên nhiều nền tảng
  • Framework hiện đại, hiệu năng cao
  • Phiên bản mới Flutter 2 đã hỗ trợ cả nền tảng Web và Desktop

Thế là tôi cũng bắt đầu tìm hiểu về Flutter. Dù đã có chút kinh nghiệm phát triển ứng dụng Android mobile nhưng Flutter vẫn có những thứ rất mới lạ với tôi. Đầu tiên phải kể đến ngôn ngữ Dart. Bài viết này tôi sẽ ghi lại những kiến thức rất cơ bản mà mình học được về ngôn ngữ Dart. Vì là những ghi chú cá nhân và cũng phụ thuộc vào thiết bị cá nhân tôi sử dụng nên chắc chắn không thể đầy đủ cho tất cả mọi người, hi vọng nó vẫn giúp ích được phần nào cho các bạn.

Để test những phần tôi ghi chú về Dart, bạn có thể tự cài đặt môi trường để thực hành nhé. Tôi có hướng dẫn qua ở dưới. Hoặc bạn cũng có thể thử công cụ online tại https://dartpad.dev/?null_safety=true

Cài đặt môi trường lập trình Dart

Như đã nói ở trên, cá nhân tôi đang sử dụng máy Mac và mục tiêu xa là tìm hiểu Flutter nên tôi sẽ hướng dẫn cài đặt kèm Flutter SDK trên Mac luôn. Trong Flutter SDK đã hỗ trợ sẵn Dart.

  • Tải Flutter SDK tại https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
  • Sau đó giải nén vào thư mục mong muốn. Ví dụ: /Users/liem_nt/work/
  • Mở Terminal, thêm công cụ flutter vào path môi trường. Hoặc thêm vào file ~/.bash_profile
    export FLUTTER_PATH="/Users/liem_nt/work/flutter/bin"
    export PATH=$PATH:$FLUTTER_PATH
  • Nếu thêm vào file ~/.bash_profile, cần chạy lệnh dưới để áp dụng luôn
    source ~/.bash_profile
  • Để tiến hành hoàn thiện cài đặt Flutter SDK, chạy lệnh dưới và làm theo hướng dẫn. Còn nếu chỉ dừng lại ở phần thử nghiệm Dart, bạn có thể bỏ qua bước này.
    flutter doctor
  • Kiểm tra Dart đã được cài đặt
    dart --version

Đã xong phần cài đặt môi trường.

Dart Hello World

Không cần nói nhiều về tiêu đề mục này nhé.

Tạo file hello.dart và nhập vào

main() {
  print("Hello World!");
}

Để chạy 1 chương trình dart như trên, nhập lệnh dưới và xem kết quả

dart hello.dart

Cú pháp cơ bản

  • Mọi lớp đều kế thừa từ lớp cơ sở có tên Object
  • Mọi thứ lưu trong biến đều là đối tượng (kể cả số, kể cả null)
  • Sử dụng từ khóa dynamic khi khai báo biến có chấp nhận mọi kiểu
  • Dart hỗ trợ định nghĩa kiểu generic
  • Dart cho phép định nghĩa hàm trong hàm (lồng nhau)
  • Dart không có từ khóa public, private, protected khi khai báo phương thức, thuộc tính lớp. Nếu thuộc tính, tên lớp bắt đầu bằng _ thì hiểu đó là private
  • Tên biến, tên hàm, tên lớp … là chuỗi chữ có thể kế hợp với số và có thể bắt đầu bằng _

1. Hàm main

1 chương trình Dart sẽ bắt đầu chạy từ hàm main, hàm main có thể nhận vào tham số hoặc không.

main() {
    
}
main(List<String> args) {

}

2. Import thư viện

import 'dart:math'; // import thư viện có sẵn
import 'hello.dart'; // import thư viện từ file khác

3. Khai báo biến

Sử dụng từ khoá var hoặc dynamic hoặc chỉ định kiểu

var a = "Learn Dart"; // Khai báo biến a, khởi tạo là 1 chuỗi
a = "Learn Dart 2";   // Gán chuỗi khác
a = 100;              // Lỗi vì gán số vào a

var b;               // Khai báo và không khởi tạo
b = 100;             // Gán số vào b
b = "aaa";           // Gán chuỗi vào b

String  s     = 'Chuỗi ký tự'; // Khai báo biến chuỗi
double  d     = 1.1234;        // khai báo biến số thực
int     i     = 1;             // biến số nguyên
bool    found = true;          // biến logic

dynamic dyn = 123;     // Khai báo biến chấp nhận mọi kiểu, khởi tạo là số int
dyn = "Dynamic";       // Gán chuỗi
dyn = 1.12345;         // Gán số double

4. Hằng số

Sử dụng từ khóa const hoặc final để tạo ra hằng số.

Hằng số const phải có giá trị cụ thể ngay khi viết code, còn final có thể sử dụng tạo hằng số trong khi chạy chương trình, và sau đó sẽ không thay đổi.

const monday     = 'Monday'; // OK
const minutes    = 24 * 60;  // OK

var so_ngau_nhien = Random(1000).nextInt(500);
final a = so_ngau_nhien * 2; // OK

const b = so_ngau_nhien * 2; // Lỗi

5. Toán tử số học

Đa số tương tự các ngôn ngữ khác như +, -, *, ++, --, chia lấy phần dư % … nhưng có 2 toán tử sau cần chú ý:

  • /   Phép chia, luôn cho ra kết quả là số thực. Ví dụ: 5 / 6 kết quả 0.8333333333333334
  • ~/  Phép chia lấy phần nguyên. 6 ~/ 4 kết quả 1

6. Toán tử trên lớp, đối tượng

Chú ý:

  • as Chuyển kiểu: (a as MyClass)
  • is Kiểm tra kiểu: (a is MyClass)
  • is! Kiểm tra kiểu: (a is! MyClass)

7. Hàm trong Dart

7.1 Khai báo
double tinhtong(double a, double b, double c) {
   return a + b + c;
}
// Hoặc
double tinhtong(var a, var b, var c) => a + b + c;
// Hoặc
double tinhtong(var a, double b, double c) => a + b + c;

// Gọi hàm
var x = tinhtong(1, 2, 3)
7.2 Khai báo hàm với tham số mặc định
double tinhtong(var a, {double b:1, double c:2}) {
  return a + b + c;
}

var v1 = tinhtong(1);
print(v1);  //4.0
var v2 = tinhtong(1, c:10);
print(v2);  //12.0
7.3 Khai báo hàm với tham số tuỳ chọn
double tinhtong(var a, [double b, double c]) {
   var tong = a;
   if (b != null) tong += a;

   tong += (c!=null) ?  c : 0;
}

print(tinhtong(1));       //1.0
print(tinhtong(1,2));     //3.0
print(tinhtong(1,2,3));   //6.0
7.4 Hàm ẩn danh lambda hoặc closure
(var a, var b) => return a + b;

// Hoặc
(var a, var b) {
    return a + b;
};

Để sử dụng ta có thể khai báo hàm và chạy luôn hoặc gán vào biến rồi dùng biến gọi hàm

//Khai báo xong chạy luôn
var x = (var a, var b) {
    return a + b;
}(5,6);

print(x);                   //11
//Gán hàm ẩn danh vào biến ham, rồi dùng nó chạy
var ham = (var a, var b) {
    return a + b;
};

print(ham(10,11));          //21

Hàm ẩn danh rất tiện dụng để làm tham số (callback) trong các hàm khác, thậm chí khai báo luôn một ẩn danh ở tham số hàm

f1(var a, var b, var printmessage) {
     var c = a + b;
     printmessage(c);
}

f1(1, 2, (x) { print('Tổng là: $x');});         //Tổng là: 3
f1(1, 2, (z) => print('SUM = $z'));             //SUM = 3

8. Class trong Dart

Class trong Dart rất giống với Java. Tôi bổ sung 1 số điểm khác như sau.

8.1 Mixin

Mixin là một lớp, nó không được sử dụng trực tiếp để tạo ra đối tượng. Một Mixin chứa các phương thức, thuộc tính dùng để gộp vào một lớp khác, sử dụng từ khoá with và không mang ý nghĩa kế thừa.

class B {
   String name = 'B';

   void displayInfomation() {
      print(name);
   }
}

mixin M {
   var var1 = null;

   showSomething() {
      print('Print message ...');
   }
}

class C extends B with M {
   @override
   String name = 'C';

   @override
   void displayInfomation() {
      print("My name is $name");
   }
}
8.2 Toán tử cascade ..

Khi bạn có một chuỗi tác vụ trên đối tượng (gọi phương thức, thiết lập thuộc tính) thay vì phải viết đầy đủ đối tượng thì bạn chỉ cần viết nó một lần, các tương tác tiếp theo thay thế bằng ..

var table = new Table(1);
table
..calulateTotal()     //Thay cho table.calulateTotal();
..length=100          //Thay cho table.length=100;
..name='Abc'
..quantity=100
..showTotal();

Lời kết

Trên đây là một số ghi chú cơ bản tôi tổng hợp được trong quá trình tìm hiểu về ngôn ngữ Dart. Nếu có phần nào đó không được chính xác rất mong bạn đọc để lại comment trao đổi thêm.
Chúc các bạn vui vẻ.

Tham khảo:

https://flutter.dev/
https://www.udemy.com/course/flutter-bootcamp-with-dart/
https://xuanthulab.net/lap-trinh-dart-flutter/
https://codelabs.developers.google.com/codelabs/from-java-to-dart#0
https://magenest.com/vi/flutter-la-gi/
https://dartpad.dev/?null_safety=true

Add a Comment

Scroll Up