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:
Widget gốc (Root Widget)
Trong Flutter, widget gốc (Root Widget) là widget đầu tiên được vẽ và hiển thị trên màn hình. Nó là widget cấp cao nhất trong cấu trúc widget của ứng dụng Flutter và là điểm bắt đầu cho việc xây dựng giao diện người dùng.
Widget gốc được khai báo trong hàm main() của ứng dụng Flutter. Thông thường, widget gốc là một trong những widget cung cấp sẵn như MaterialApp hoặc CupertinoApp tùy thuộc vào loại giao diện người dùng bạn muốn xây dựng.
Ví dụ, đoạn mã sau tạo một widget gốc là MaterialApp trong ứng dụng Flutter:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'My Flutter App',
home: MyHomePage(),
));
}Trong ví dụ trên, MaterialApp là widget gốc và có các thuộc tính như title để đặt tiêu đề của ứng dụng và home để chỉ định widget chính hiển thị trong ứng dụng.
Bạn có thể xây dựng widget gốc của riêng mình bằng cách tạo một lớp widget tuân thủ từ StatelessWidget hoặc StatefulWidget. Tùy thuộc vào yêu cầu và cấu trúc ứng dụng của bạn, bạn có thể tạo các widget gốc phức tạp hoặc kết hợp nhiều widget lại với nhau để xây dựng giao diện người dùng.
Quan trọng nhất, widget gốc là điểm khởi đầu của ứng dụng Flutter và từ đó, Flutter sẽ tạo ra cây widget và vẽ giao diện người dùng dựa trên cấu trúc widget của bạn.
Xem thêm Giới thiệu Animation trong Flutter
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.
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
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.
Xem thêm Lập trình Flutter
