Cấu trúc ứng dụng Flutter

Cấu trúc ứng dụng Flutter

Rate this post

Flutter là một framework mới tương đối dễ sử dụng cho mọi người. Hôm nay chúng ta hãy cùng tìm hiểu về cấu trúc một Flutter App. Liệu Flutter Framework có giống những framework trước đây hay không. Hãy cùng chúng tôi tìm hiểu:

Các bài viết liên quan:

Tóm tắt nội dung

Widgets

Khái niệm chính trong framework Flutter là “Everything is a widget”. Widget đơn giản là 1 thành phần trong giao diện người dùng được sử dụng để tạo giao diện người dùng trong ứng dụng.

Trong Flutter, chính ứng dụng đã là 1 widget. Ứng dụng là 1 widget cấp cao nhất và UI của nó được dụng bằng cách sử dụng các widget con của nó, điều này sẽ tương tự lần lượt với các widget con của nó. Tính năng kết hợp này giúp chúng ta tạo UI với mọi độ phức tạp khác nhau.

Với ví dụ dưới đây, ta cùng xem hệ thống phân cấp widget trong ứng dụng hello world chúng ta vừa tạo ở trên.

Cấu trúc ứng dụng Flutter

Sau đây là các điểm đáng lưu tâm:

  • MyApp là 1 widget người dùng và nó được tạo ra bằng cách sử dụng widget native trong flutter – MaterialApp
  • MaterialApp có thuộc tính home để chi tiết hóa UI của trang chủ, nó cũng là widget người dùng.
  • MyHomePage được dựng để sử dụng 1 widget native khác là Scaffold.
  • Scaffold có 2 thuộc tính là body và appBar.
  • Body được sử dụng để chi tiết hóa các UI chính và appBar được sử dụng để chi tiết hóa header UI của nó.
  • Header UI được dựng bằng cách sử dụng widget native, AppBar và Body UI được dựng bằng cách sử dụng widget Center.
  • Widget Center có 1 thuộc tính là Child, nó sẽ ánh xạ tới nội dụng được dựng trong widget Text

Gestures

  • Widget trong Flutter hỗ trợ tương tác thông qua 1 widget đặc biệt, đó là GestureDetector. GestureDetector là 1 widget vô hình có khả năng bắt được tương tác người dùng như chạm, kéo,… của widget con của nó. 
  • Rất nhiều widget native trong Flutter hộ trợ tương tác thông qua việc sử dụng GestureDetector. Chúng ta còn có thể kết hợp chức năng tương tác vào trong widget đang tồn tại bằng cách sử dụng widget GestureDetector. Chúng ta sẽ đi sâu hơn về gesture ở phần sau.

State

  • Widget trong Flutter hỗ trợ bảo trì State bằng 1 widget đặc biệt đó là StatefulWidget. Widget cần phải lấy gốc từ StatefulWidget widget để hỗ trợ kiểm soát State và tất cả các widget khác nên được lấy gốc từ StatefulWidget.
  • Điểm này trong Flutter rất giống với reactjs và StatefulWidget sẽ tự động render lại bất cứ khi nào trạng thái bên trong hệ thống thay đổi.
  • Khi render lại thì nó sẽ giúp tối ưu hóa bằng cách tìm kiếm điểm khác biệt giữa các widget UI cũ và mới để render những thứ thực sự cần thiết.

Layers

Khái niệm quan trọng nhất của framework Flutter là framework được lồng ghép vào trong nhiều loại mức độ phức tạp và được sắp xếp rất rõ ràng các lớp giảm dần độ phức tạp.

Một layer được tạo ra bằng cách sử dụng trực tiếp layer kế tiếp của nó. Các layer trên cùng là 1 widget chi tiết với Android và iOS. Các layer tiếp theo có sử dụng các widget native của Flutter. Layer càng xuống sâu thì càng chạm tới code cụ thể của nền tảng đó.

Hình dưới đây sẽ giúp ta có cái nhìn bao quát hơn về hệ thống phân tầng trong Flutter

Cấu trúc ứng dụng Flutter

Sau đây là các điểm đáng lưu tâm:

  • Trong flutter, mọi thứ đều là widget và 1 widget phức tạo là sự kết hợp của các widget đã tồn tại.
  • Chức năng tương tác có thể được kết hợp bất cứ khi nào cần thiết bằng cách sử dụng widget GestureDetector.
  • State của widget có thể được bảo trì bất cứ khi nào cần thiết bằng cách sử dụng widget StatefulWidget.
  • Flutter cung cấp cho ta cách thiết kế phân tầng, cho phép chúng ta code từng layer tùy thuộc vào độ phức tạp của công việc ta được giao.

Leave a Reply