Giới thiệu về Layouts

Giới thiệu về Layouts

Rate this post

Từ khi mà khái niệm cốt lõi của Flutter là “Everything is widget” – mọi thứ là widget thì Flutter đã kết hợp chức năng giao diện người dùng vào chính widget của nó. Flutter cung cấp rất nhiều widget đặc biệt đã được thiết kế sẵn như Container, Center, Align,v.v… với mục đích duy nhất là tạo nên giao diện người dùng. Widget được xây dựng bằng cách kết hợp các widget khác với nhau và sử dụng layout widget.

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

Các loại Layout Widget

Widget hỗ trợ duy nhất một con (Single Child Widgets)

  • Trong loại này thì widget sẽ có duy nhất một widget là con và tất cả widget sẽ có một chức năng layout riêng biệt.
  • Ví dụ như widget Center chỉ căn giữa con của nó với widget gốc và widget container cung cấp một sự linh hoạt để đặt con của nó vào bất cứ chổ nào bên trong bằng cách sử dụng các thuộc tính như padding, decoration, v.v…
  • Single child widget là một lựa chọn tuyệt vời nhằm tạo nên một widget chất lượng và có một chức năng duy nhất ví dụ như button, label, v.v…
  • dưới đây là ví dụ sử dụng widget Container:
Giới thiệu về Layouts
  • Ở đây ta sử dụng 2 widget, một là widget Container và một widget Text. Kết quả của widget này như hình bên dưới đây
Giới thiệu về Layouts

Các thành phần quan trọng trong widget này:

  • Padding – được sử dụng để sắp xếp các widget con bằng các thông số padding được cung cấp. Ở trên thì padding có thể được cung cấp bằng lớp EdgeInsets.
  • Align – căn chỉnh widget con bên trong chính nó sử dụng giá trị của thuộc tính alignment. Giá trị cho thuộc tính alignment có thể được cung cấp bằng lớp FractionalOffset. Lớp FractionalOffset cung cấp hiệu số về khoảng cách từ phía trái trên.
  • Ứng dụng hello world của chúng ta sử dụng các layout widget theo dạng chuẩn material design để thiết kế trang chính. Giờ chúng ta cùng điều chỉnh lại ứng dụng của chúng ta để xây dựng một trang chính sử dụng layout widget cơ bản như bên dưới:
  • Container – Đây là widget có sẵn các chức năng căn lề, chỉnh khung, duy nhất một con và có đa dạng các định dạng.
  • Center – widget một con cực đơn giản, có thể căn giữa widget con của nó.
Giới thiệu về Layouts
  • Widget Container là widget trên level cao hoặc là gốc. Container được hiệu chỉnh bằng thuộc tính decoration padding để bố trí nội dung của nó.
  • BoxDecoration có rất nhiều thuộc tính như color, border, v.v… để trang trí widget Container và ở đây thuộc tính color được sử dụng để đặt màu cho container.
  • padding của widget Container được đặt bằng cách sử dụng lớp dgeInsets, nó cung cấp các lựa chọn để xác định giá trị cho padding.
  • Center là widget con của widget Container. Sau đó thì widget Text là con của widget Center. Widget Text được sử dụng để hiện thị thông điệp và Center được dùng để căn giữa văn bản đó và nối chúng với widget gốc là Container.

Kết quả của đoạn code trên:

Giới thiệu về Layouts

Widget hỗ trợ nhiều con

  • Trong loại này thì widget sẽ có nhiều hơn một widget con và layout của từng widget là độc nhất.
  • Ví dụ như widget Row cho phép xếp các con của nó theo đường thẳng xuống, còn widget Column thì xếp các con của nó theo đường ngang. Bằng cách kết hợp Row Column, widget với bất kỳ độ phức tạo nào cũng có thể được xây dựng.
  • Chúng ta hãy cùng xem qua các widget được sử dụng phổ biến nhất trong phần này:
  • Row – cho phép xếp các con của nó theo đường thẳng xuống
  • Column – cho phép xếp các con của nó theo đường ngang
  • ListView – Cho phép xếp các con của nó theo dạng danh sách
  • GridView – cho phép xếp các con nó theo dạng từng ô
  • Expanded – được sử dụng để tạo các widget con của Row column nhằm chiếm diện tích nhiều nhất có thể
  • Table – widget theo dạng table
  • Flow – widget theo dạng Flow
  • Stack – widget theo dạng stack

Ứng dụng Layout nâng cao

  • Trong phần này, chúng ta sẽ học về cách tạo một UI phức tạo với danh sách sản phẩm và dùng thiết kế tùy chỉnh sử dụng cả hại single và multiple child layout widget.
  • Để thực hiện mục tiêu này, ta cần thực hiện như sau:
  • Tạo một ứng dụng flutter mới
  • Thay thế code trong main.dart bằng code như sau:
Giới thiệu về Layouts

Sau đó ta sẽ tạo một widget MyHomePage kế thừa từ StatelessWidget thay vì mặc định là StatefulWidget và xóa các dòng code liên quan đi.

Tạo một widget mới là ProductBox dựa trên thiết kế như sau:

Giới thiệu về Layouts

Sau đây sẽ là code của ProductBox.

Giới thiệu về Layouts
  • Widget ProductBox có sử dụng 4 đối số sau:
  • name – tên sản phẩm
  • description – mô tả sản phẩm
  • price – giá của sản phẩm
  • image – hình ảnh của sản phẩm
  • ProductBox sử dụng 7 widget như sau:
  • Container
  • Expanded
  • Row
  • Column
  • Card
  • Text
  • Image
  • ProductBox được thiết kế dựa trên các widget được đề tên ở trên. Cách sắp xếp và phân cấp của các widget sẽ như hình bên dưới đây:
Giới thiệu về Layouts
  • Ta tạo thư mục assets của ứng dụng và hiệu chỉnh thư mục ấy trong pubspec.yaml như sau:
Giới thiệu về Layouts
  • và cây thư mục như sau (lưu ý: tạo thêm 1 folder appimages trong thư mục assets):
Giới thiệu về Layouts

Các hình ảnh trong thư mục assets

Cuối cùng là sử dụng widget ProductBox trong MyHomePage như sau:

Giới thiệu về Layouts
  • Ở đây chúng ta sử dụng ProductBox như là con của widget ListView
  • Kết quả khi chạy ứng dụng:
Giới thiệu về Layouts

Leave a Reply