Flutter, những viên gạch đầu tiên

Giới dev mobile app ngày càng trở nên thật đa dạng: native app, hybrid app, web app, … . Trong thời gian gần đây, các framework viết native app đồng thời cho cả IOs và Android đang rất được ưa chuộng như React native và mới hơn là Flutter. Hai công nghệ của hai ông lớn trên thế giới thực sự rất tuyệt vời để developer viết lên các ứng dụng cho điện thoại di động của mình. Loạt bài này chúng ta sẽ tiếp cận một cách sơ lược về Flutter, sản phẩm của Google đưa ra cho cộng đồng mobile dev.

Vậy, Flutter là gì?

Flutter là một app SDK để xây dựng các ứng dụng high-performance, high-fidelity cho iOs, Android với một mã duy nhất (Dart).

Why use Flutter?

• Có năng suất cao:
  • Xây dựng ứng dụng cho cả iOs và Android từ một mã duy nhất.
  • Mã code ngắn gọn hơn.
  • Xây dựng mẫu và sử dụng lại dễ dàng:
• Trải nghiệm ngươì dùng tốt, tính tuỳ biến cao:
  • Sử dụng giá trị mà Matterial design và Cupertino được xây dựng bằng Framework riêng của Flutter.
  • Khả năng tuỳ chỉnh, thiết kế cao, không phụ thuộc OEM widget.

Why DART

• Dart là AOT (Ahead Of Time): Thời gian build source code thành 1 file thực thi (apk, ipa) cực nhanh, native code và đáp ứng được nhu cầu của Flutter.
• JIT (Just In Time) thời gian biên dịch các lệnh code được thay đổi là ngay tức thì -> hot reload
  ==> Hiệu năng cao.
• Render được hình ảnh với tỉ lệ 60fps
• Cho phép Flutter không tách biệt file logic và file giao diện, là ngôn ngữ lập trình hướng đối tượng

Nguyên tắc cốt lõi!

Everything’s a Widget:

• • Widget là các khối giao diện cơ bản của ứng dụng Flutter (giống như các Component), mỗi widget là một phần khai báo bất biến của giao diện người dùng. Không giống như các framework khác, Flutter có một sự thống nhất các View, Controller, Layout,… tạo thành các Widget
  • Widget có thể định nghĩa: Các thẻ cấu trúc (button, menu,…), các thẻ style (font, color,….), các thành phần layout(padding, margin,…)
  • Các widget sẽ tạo thành một cây phân cấp, chúng lồng vào nhau, các widget con sẽ kế thừa các thuộc tính của widget cha.
  • Tại các widget chúng ta có thể gọi các sự kiện, thay đổi các widget cũ bằng các widget mới, Framework sẽ so sánh các đối tượng widget cũ và mới rồi sau đó cập nhật giao diện một cách phù hợp.
  • Các widget thường gồm nhiều các thành phần nhỏ. Các widget có các mục đích riêng, kết hợp với nhau để tạo thành các hiệu ứng.Flutter
  • Framework được xây dựng trên một chuỗi các lớp, mỗi lớp dựa trên một lớp trước đó.

Trong hình trên, các lớp trên được sử dụng thường xuyên hơn các lớp ở dưới.

Mục tiêu của thiết kế này là để bạn có thể thực hiện được nhiều hơn với ít code hơn, các lớp bên trên được xây dựng dựa trên các thành phần của lớp bên dưới, bạn có thể sử dụng các widget mà flutter đã xây dựng sẵn hoặc cũng có thể xây dựng các widget của riêng bạn với những gì đã có từ flutter.

Building Widgets:

• Các widget được xây dựng bằng thực thi hàm build() trả về một cây phân cấp các thành phần cụ thể hơn của widget
  – VD: Để xây dựng một widget với bố cục ngang gồm các text và nút bấm khác nhau, framework sẽ tiến hành đệ quy liên tục gọi từng hàm build của các widget tới khi đến đáy sẽ ghép các thành phần lại thành một cây phân cấp

Handling user interaction

• Nếu các đặc trưng của một widget thay đổi bởi một tương tác người dùng hoặc một yếu tố khác, widget đó được gọi là stateful widget. VD, một widget có các bộ đếm thay đổi mỗi khi người dùng chạm vào nút, gía trị của biến đếm là state của widget, mỗi khi gía trị của state thay đổi, widget sẽ rebuild để update giao diện phù hợp. Các widget này là lớp con của StatefulWidget và lưu trữ trạng thái có thể thay đổi tại một lớp con của lớp State.

• Bất cứ lúc nào muốn thay đổi một state, phải sử dụng hàm setState() để framework biết được sự thay đổi đã xảy ra và thực hiện rebuild giao diện một lần nữa.

Một vài các khái niệm cơ bản lược qua về Flutter mình dịch từ trang Technical overview của Flutter, ở bài tiếp theo, chúng ta sẽ cùng xây dựng ứng dụng flutter đầu tiên.