[FLUTTER] Một số widget hữu ích trong Flutter (Phần 1)

Giới thiệu

Khi làm việc với Flutter có lẽ ai cũng biết câu nói:

Trong Flutter, (gần như) mọi thứ đều là widget.

Nhưng cũng chính vì có quá nhiều widget, lập trình viên đôi khi cảm thấy khó khăn trong việc lựa chọn, thậm chí là không biết đến sự tồn tại của một widget đã được viết sẵn phục vụ cho những yêu cầu thường gặp, thành ra phải tự code lại tốn nhiều thời gian mà chưa chắc đã thực sự tốt.

Vì vậy, trong bài viết này, mình sẽ giới thiệu một số widget có thể sẽ giúp ích trong quá trình anh em làm việc với Flutter.

À, nhưng trước hết, mình vẫn muốn recommend anh em kênh youtube chính thức của Flutter, có playlist Widgets of the Week (có lẽ nhiều người đều biết đến list này), mình thường xuyên vào đây xem khi có thời gian rảnh 😀

1. FittedBox

Chắc hẳn khi đọc tên thì anh em cũng đã tưởng tượng được ra tác dụng của widget này. Cũng giống như khi sử dụng các widget liên quan tới image, chúng ta có thuộc tính fit để thể hiện cách vẽ widget con (điều này chắc ai cũng biết rồi).

Nhưng có một cách sử dụng khá hay mà mình mới được biết gần đây là làm cho các text trở nên responsive, khi độ lớn của widget cha thay đổi, text bên trong cũng thay đổi theo, ví dụ mình hoạ tại đây.

FittedBox(
    fit: BoxFit.fitWidth,
    child: Text("Fitted Box"),
)

2. Wrap

Widget này gần tương tự với Flex (lớp cha của Row và Column), nhưng khác ở điểm có thể tự sắp xếp các widget con sang cột / hàng mới tuỳ vào kích thước còn lại. Ví dụ

Một số thuộc tính trong Wrap như sau:

• direction: xác định trục chính (vertical / horizontal)
• spacing: khoảng cách giữa các widget trong trục chính (Main Axis).
• runSpacing: khoảng cách giữa các widget trong trục phụ (Cross Axis).
• alignment: vị trí theo trục chính của các widget con khi được wrap sang một hàng / cột mới (start, center, spaceBetween, …)
• runAlignment: vị trí theo trục phụ của các widget con khi được wrap sang một hàng / cột mới.

Ngoài ra còn một số thuộc tính nữa anh em có thể đọc thêm tại link doc của Flutter.

3. Flexible, Expanded và Spacer

Tại sao mình lại đưa ra một lúc 3 widget? Bởi vì 3 widget này khá tương đồng nhau về cách sử dụng, để mình giải thích cho nhé.

3.1. Flexible

Hãy tưởng tượng, anh em muốn làm một giao diện có các widget con bên trong có thể thay đổi kích thước theo widget cha (không nên nhầm lẫn với việc size màn hình thay đổi nhé), như vậy thì không thể sử dụng các widget có size cố định, chúng ta hãy nghĩ ngay đến việc sử dụng 3 widget trên xem sao ^^

Ví dụ, chúng ta có 1 Row, bên trong gồm có 4 Container chứa Text, vậy làm thế nào để:

• Container 1 chiếm 10%
• Container 2 chiếm 20%
• Container 3 chiếm 30%
• Container 4 chiếm 40%

Rất đơn giản, anh em chỉ cần wrap từng widget con vào trong widget Flexible và cho chúng hệ số flex như sau:

SizedBox(
          height: 100,
          child: Row(
            children: [
              Flexible(
                  flex: 1, child: Container(color: Colors.red.shade100)),
              Flexible(
                  flex: 2,
                  child: Container(
                    color: Colors.red.shade200,
                  )),
              Flexible(
                  flex: 3,
                  child: Container(
                    color: Colors.red.shade300,
                  )),
              Flexible(
                  flex: 4,
                  child: Container(
                    color: Colors.red.shade400,
                  )),
            ],
          ),
        ),

Kích thước của children sẽ được tính như sau:

• Tính tổng hệ số flex của các widget có trong parent (Bao gồm Flexible, Spacer và Expanded): ví dụ ở trên sẽ là 1 + 2 + 3 + 4 = 10
• Đặt kích thước của widget theo tỉ lệ hệ số flex / tổng, Ví dụ Container 1 sẽ chiếm 1/10 tức 10% width của row

Vậy là chúng ta đã có một giao diện động mà không cần sử dụng các kích thước cố định 😀 :D.

Nhưng nếu giữa các widget Flexible mà có widget kích thước cố định thì sao? Sẽ không có vấn đề gì cả, flutter sẽ trừ đi phần cố định chia theo hệ số flex như trên

3.2. Expanded

Expanded cũng giống như Flexible, chỉ khác là nó sẽ luôn muốn chiếm hết không gian còn lại nếu có thể, còn Flexible thì mặc định sẽ chỉ chiếm vừa đủ không gian bằng widget con của nó, và có một điều cần lưu ý:

Flexible(

      fit: FlexFit.tight,
      ...
),

sẽ tương đương với:

Expanded(
      ...
)

Chỉ là đặt tên như vậy sẽ tường minh hơn, dễ trong việc sử dụng hơn 😀 😀

3.3. Spacer

Đúng như cái tên của nó, widget này đơn giản là chỉ tạo ra khoảng trắng, được sử dụng giống 2 widget trên, cũng có hệ số flex

Lưu ý:

• Các widget này phải được sử dụng trực tiếp dưới widget cha là các widget flex như Flex, Row, Column.
• Mặc định hệ số flex sẽ luôn là 1

(Còn tiếp…)

Tham khảo

widgets library – Dart API (flutter.dev)

My 10 Most Favorite Flutter Widgets – YouTube