openplanning

Hướng dẫn và ví dụ Flutter Container

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Flutter Container

Trong Flutter, Container là một hộp được sử dụng để chứa một widget con và đồng thời bạn có thể thiết lập kiểu dáng cho nó thông qua các property như padding, margin, alignment,... Container có tác dụng làm nổi bật một nội dung hoặc ngăn cách nội dung này với các nội dung khác.
Container Constructor:
Container Constructor

Container(
    {Key key,
    AlignmentGeometry alignment,
    EdgeInsetsGeometry padding,
    Color color,
    Decoration decoration,
    Decoration foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    EdgeInsetsGeometry margin,
    Matrix4 transform,
    Widget child,
    Clip clipBehavior: Clip.none}
)
Có rất nhiều tham số tham gia vào việc tạo ra một Container, chẳng hạn width, height, child, alignment,.. đồng thời nó cũng chịu ảnh hưởng từ các giàng buộc của widget cha, vì vậy hành vi bố cục của Container khá phức tạp. Chúng ta sẽ lần lượt xem các ví dụ trong các tình huống khác nhau:
Case 1:
Trường hợp các tham số width, height được chỉ định, và widget cha bị giới hạn (bounded) thì Container sẽ định kích thước của nó theo các tham số được cung cấp.
Ví dụ: Một Container được chỉ định (width, height)=(200,200) là con của một đối tượng Center, nó sẽ có kích thước 200x200.

Center (
  child:  Container (
      color: Colors.greenAccent[100],
      padding: EdgeInsets.fromLTRB(10, 5, 50, 5),
      width: 200,
      height: 200
  )
)
Case 2:
Nếu các tham số child, width, height, constraints không được chỉ định (hoặc null), và widget cha không bị giới hạn (unbounded) thì Container sẽ cố gắng định kích thước của nó nhỏ nhất có thể.
Hãy xem một ví dụ: Một Container với các tham số width, height, child, constraints không được chỉ định, và là con của một Row, nó sẽ cố gắng định kích thước theo phương ngang của nó nhỏ nhất có thể.
Chú ý: Row là một widget bị giới hạn (bounded) theo phương thẳng đứng nhưng không bị giới hạn (unbounded) theo phương ngang.

Row (
    children: [
      Container (
        color: Colors.greenAccent[100],
        padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
      )
    ]
)
Case 3:
Nếu các tham số child, width, height, constraints không được chỉ định (hoặc null), và widget cha bị giới hạn (bounded) thì Container sẽ cố gắng định kích thước của nó lớn nhất có thể.
Ví dụ: Một Container với các tham số child, width, height, constraints không được chỉ định và là con của một Center, kích thước của Container sẽ lớn nhất có thể.

Center (
    child:   Container (
      color: Colors.greenAccent[100],
      padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
      margin: EdgeInsets.fromLTRB(30, 55, 50, 70)
    )
)
Case 4:
Nếu child được chỉ định, nhưng các tham số width, height, constraintsalignment không được chỉ định, thì Container sẽ nhỏ nhất có thể và tuân thủ các giàng buộc từ widget cha.
Ví dụ:

Center (
    child: Container (
        color: Colors.greenAccent[100],
        padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
        child: ElevatedButton (
          child: Text("Button"),
          onPressed: () {},
        )
    )
)
Ví dụ:

ConstrainedBox (
    constraints: BoxConstraints (
        maxWidth: 300,
        maxHeight: 200
    ),
    child: Container (
        color: Colors.greenAccent[100],
        padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
        child: ElevatedButton (
          child: Text("Button"),
          onPressed: () {},
        )
    )
)
Case 5:
Nếu childalignment được chỉ định, nhưng các tham số width, height, constraints không được chỉ định, thì Container sẽ lớn nhất có thể.
Xem thêm ví dụ tại phần alignment (Phía dưới đây).

2- alignment

Property alignment được sử dụng để căn chỉnh (align) vị trí của child bên trong Container.

AlignmentGeometry alignment
Nếu Container được chỉ định child, và không được chỉ định width, height, constraintsalignment nó sẽ định kích thước của nó nhỏ nhất có thể. Tuy nhiên nếu Container được chỉ định childalignment nhưng không được chỉ định width, height, constraints nó sẽ định kích thước của nó lớn nhất có thể.

Container (
    alignment: Alignment.bottomRight,
    color: Colors.greenAccent[100],
    padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
    margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
    child: ElevatedButton (
      child: Text("Button"),
      onPressed: () {},
    )
)
  • TODO Link?

3- padding

Property padding được sử dụng để tạo ra một không gian trống bên trong Container và bao quanh child (nếu có).

EdgeInsetsGeometry padding

4- color

Property color được sử dụng để sét đặt mầu nền cho Container, và phía sau (behind) child.

Color color

5- decoration

Property decoration được sử dụng để vẽ một cái gì đó trên nền của Container và đằng sau (behind) của child. Nếu bạn muốn vẽ một mầu trên nền của Container (và đằng sau của child) tốt nhất nên sử dụng property color.

Decoration decoration

Container (
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: const Color(0xff7c94b6),
      image: const DecorationImage(
        image: NetworkImage('https://s3.o7planning.com/images/tom-and-jerry.png'),
        fit: BoxFit.cover,
      ),
      border: Border.all( color: Colors.black, width: 8),
      borderRadius: BorderRadius.circular(12),
    ),
    margin: EdgeInsets.all(30),
    child: ElevatedButton(
        child: Text("I am a Long Button"),
        onPressed: () {}
    )
)
  • TODO Link?

6- foregroundDecoration

Property foregroundDecoration được sử dụng để vẽ một cái gì đó trên nền của Container, phía trước (front) của child. Nó có thể bao phủ và làm bạn không nhìn thấy child, tuy nhiên bạn vẫn có thể tương tác với child.

Decoration foregroundDecoration
Ví dụ:

Container (
    alignment: Alignment.center,
    foregroundDecoration: BoxDecoration(
      image: const DecorationImage(
        image: NetworkImage('https://s3.o7planning.com/images/smile-64.png'),
        fit: BoxFit.none,
      ),
      border: Border.all( color: Colors.black, width: 8),
      borderRadius: BorderRadius.circular(12),
    ),
    margin: EdgeInsets.all(30),
    child: ElevatedButton(
        child: Text("I am a Long Button"),
        onPressed: () {}
    )
)

7- width


double width

8- height


double height

9- constraints

Property constraints được sử dụng để thêm các giàng buộc bổ xung cho Container.

BoxConstraints constraints
Ví dụ:

Container (
    color: Colors.greenAccent[100],
    padding: EdgeInsets.all(30),
    width: 200,
    height: 200,
    constraints: BoxConstraints(
        maxHeight: 80
    ),
    child:ElevatedButton(
      child: Text("Button"),
      onPressed: (){},
    )
)
  • TODO Link?

10- margin

Property margin được sử dụng để tạo ra một không gian trống bao quanh Container.

EdgeInsetsGeometry margin

11- transform


Matrix4 transform

12- child


Widget child

13- clipBehavior


Clip clipBehavior: Clip.none
  • TODO Link?

Xem thêm các chuyên mục: