[NGỤP LẶN VỚI FLUTTER] PHẦN 1: LÀM QUEN

06/10/2021 23
flutter final
CODEWELL

Flutter và Reat native ngày càng được giới dev mobile app ưa chuộng khi lựa chọn framework viết các ứng dụng cho điện thoại di động. Với ưu điểm có thể đồng thời viết cho cả iOs và Android, Flutter còn điều gì vượt trội để được ưu ái đến vậy trong làng công nghệ thế giới? Hãy cùng tìm hiểu về Flutter – sản phẩm của ông lớn Google qua loạt bài sau.

 

  1. Làm quen với Flutter 

Flutter là gì?

Flutter là một bộ công cụ phát triển phần mềm (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).

 

Tại sao nên sử dụng 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ười 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.

 

DART vô cùng quan trọng

Là ngôn ngữ lập trình được dùng trong Flutter, Dart có nhiều ưu điểm giúp tạo ra những trải nghiệm đẹp, chất lượng cao trên tất cả các màn hình:

  • 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 ngay tức thì tạo ra hot reload mang đến 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

 

  1. Nguyên tắc cốt lõi khi làm quen với Flutter

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 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 đó.

 

Flutter 2

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.

Lấy ví dụ để 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.

Ví dụ điển hình có thể thấy là, một widget có các bộ đếm thay đổi mỗi khi người dùng chạm vào nút, giá trị của biến đếm là state của widget, mỗi khi giá 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.

Flutter 3

  • 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.

Tạm kết

Hi vọng một số khái niệm cơ bản về Flutter được tổng hợp từ khóa học của công ty, sẽ cung cấp cho bạn cái nhìn tổng quan nhất về bộ công cụ phát triển phần mềm đang được săn đón này.

 

Tham khảo:

[Flutter Document] https://flutter.dev/docs/cookbook

TRẦN HỮU ĐÔNG – CO-WELL Asia

 

Trên đây là những khái niệm cơ bản được tổng hợp từ chuyên gia của CO-WELL Asia về Flutter. Đừng quên theo dõi chuyên mục CODEWELL trên website CO-WELL Asia để đón đọc những bài viết bổ ích về công nghệ nhé!