--- title: "Flutter Container Cheat Sheet" description: "Container widget được sử dụng để chứa child widget với khả năng áp dụng một số thuộc tính styling." canonical: "https://200lab.io/blog/flutter-container-cheat-sheet" published: "2022-02-05T07:41:41Z" updated: "2026-08-21T07:17:47Z" authors: ["Chau Le"] tags: ["Flutter"] reading_minutes: 11 access: "public" --- Container widget được sử dụng để chứa child widget với khả năng áp dụng một số thuộc tính styling. Nếu Container widget không có child, nó sẽ tự động lấp đầy vùng đã cho trên màn hình, nếu không, nó sẽ wrap chiều cao và chiều rộng của child element đã cho. **Lưu ý:** Container Widget không nên hiển thị trực tiếp mà không có bất kỳ parent widget. Bạn có thể sử dụng Center widget, Padding Widget, Column Widget, Row Widget hoặc Scaffold Widget với tư cách là parent. Hãy bắt đầu với một empty container và áp dụng một green color property. Container sẽ lấp đầy tất cả màn hình. ``` Center( child: Container( color: Colors.green, ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/a0d7d2b5-d405-4542-aa07-8571d3322ad5-a76d517aad65bb61db62.webp) Hãy thêm child cho container ``` Center( child: Container( color: Colors.green, child: Text("Flutter CheatSheet."), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/dc926ad9-6744-4593-8998-a1ebbe06da05-3a34c48bc18fe52a6e00.webp) Chúng ta có thể thấy rằng container có kích thước của child. (_Chúng ta sẽ nói sau về Text Widget_). # Color Property Bạn có thể sử dụng color property để thêm background cho container. Bạn sẽ sử dụng [Color Class]() hoặc [Colors Class]() với color property như bên dưới: **Colors Class** sử dụng Colors Class với color name ``` Center( child: Container( color: Colors.green, ), ); ``` Bạn cũng có thể thêm shade ``` Center( child: Container( color: Colors.green[400], ), ); ``` Hoặc ``` Center( child: Container( color: Colors.green.shade400, ), ); ``` ****Color Class**** Sử dụng Color Class với đầy đủ 8 chữ số thập lục phân không phải là 6. Nếu bạn chỉ chỉ định sáu, thì hai chữ số hàng đầu được giả định là 0, có nghĩa là hoàn toàn trong suốt. ``` Color(0xFFFFFF); // fully transparent white (invisible) Color(0xFFFFFFFF); // fully opaque white (visible) ``` Bạn có thể sử dụng`.fromARGB`(A = Alpha hoặc opacity, R = Red, G = Green, B = Blue) với số màu hoặc số thập lục phân ``` Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5); Color.fromARGB(255, 66, 165, 245); ``` Và bạn có thể sử dụng`.fromRGBO`(R = Red, G = Green, B = Blue, O = Opacity) với số màu (color number) ``` Color c = const Color.fromRGBO(66, 165, 245, 1.0); ``` # Child Property Cung cấp child widget được chứa trong container, container sẽ wrap chiều rộng & chiều cao của child widget này. Widget này chỉ có thể có một child. Để bố trí nhiều children, hãy để child của widget này là một widget như [Row](), [Column](), hoặc [Stack](), có `children` property và sau đó cung cấp các children cho widget đó. ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), child: new Text("Flutter Cheatsheet"), ), ); ``` # Alignment Property Chúng ta sử dụng [Alignment Class]() với alignment property được áp dụng cho việc căn chỉnh các child widget. Alignment nhận vào 2 tham số x và y. `Alignment(0.0, 0.0)`đại diện cho tâm của hình chữ nhật. ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), child: new Text("Flutter Cheatsheet", style: TextStyle( fontSize: 10.0 ), ), alignment: Alignment(0.0, 0.0), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/47921502-17ba-4ddf-8692-d448e8714f46-809156a6a48430846e5d.webp) `Alignment(-1.0, -1.0)`đại diện cho phía trên bên trái của hình chữ nhật. ![](https://assets.200lab.io/images/2024/12/05/bb2e8f2a-6f76-4164-a86c-eaacc5ef9b7b-0ab0abe78f7e4b4fb1c6.webp) `Alignment(1.0, 1.0)` đại diện cho phía dưới bên phải của hình chữ nhật. ![](https://assets.200lab.io/images/2024/12/05/098ed37d-fda0-4bae-bac9-574a520d9977-3a809af88760d86ef70e.webp) `Alignment(0.0, 3.0)`thể hiện một điểm có tâm theo chiều ngang đối với hình chữ nhật và theo chiều dọc bên dưới đáy hình chữ nhật bằng chiều cao của hình chữ nhật. Hình dưới đây cho thấy đồ thị của X và Y ![](https://assets.200lab.io/images/2024/12/05/461d6fdb-7ae2-4e34-9800-d7fd0b79fcda-e643baca8049f1659204.webp) Bạn cũng có thể sử dụng một tên cố định với class Alignment `Alignment.bottomCenter`Điểm chính giữa dọc theo cạnh dưới giống như`Alignment(0.0, 1.0)` `Alignment.bottomLeft`Góc dưới cùng bên trái giống với`Alignment(-1.0, 1.0)` `Alignment.bottomRight`Góc dưới cùng bên phải giống với`Alignment(1.0, 1.0)` `Alignment.center`Điểm trung tâm, theo cả chiều ngang và chiều dọc giống như`Alignment(0.0, 0.0)` `Alignment.centerLeft`Điểm chính giữa dọc theo cạnh trái giống như`Alignment(-1.0, 0.0)` `Alignment.centerRight`Điểm chính giữa dọc theo cạnh bên phải giống như`Alignment(1.0, 0.0)` `Alignment.topCenter`Điểm chính giữa dọc theo cạnh trên giống như `Alignment(0.0, -1.0)` `Alignment.topLeft`Góc trên cùng bên trái giống với`Alignment(-1.0, -1.0)` `Alignment.topRight`Góc trên cùng bên phải giống với`Alignment(1.0, -1.0)` Bạn có thể sử dụng FractionalOffset Class với alignment property. [FractionalOffset]() và [Alignment]() là hai đại diện khác nhau của cùng một thông tin: vị trí bên trong hình chữ nhật so với kích thước của hình chữ nhật. Sự khác biệt giữa hai class là trong hệ thống tọa độ mà chúng sử dụng để biểu diễn vị trí. [FractionalOffset]() sử dụng hệ tọa độ có điểm gốc ở góc trên bên trái của hình chữ nhật trong khi [Alignment]() sử dụng hệ tọa độ có điểm gốc ở tâm hình chữ nhật. ![](https://assets.200lab.io/images/2024/12/05/cf5a11a0-1783-477e-9812-d8f4dc115fcd-61b69e09c56a894eac92.webp) ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), child: new Text("Flutter Cheatsheet", style: TextStyle( fontSize: 20.0 ), ), alignment: FractionalOffset(0.5, 0.5), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/7b9f2882-320b-4b07-a1fb-8134072740a6-c89c765e0e9a2b2279ae.webp) Bạn cũng có thể sử dụng một tên cố định với class FractionalOffset `FractionalOffset.bottomCenter`Điểm chính giữa dọc theo cạnh dưới giống với`FractionalOffset(0.5, 1.0)` `FractionalOffset.bottomLeft`Góc dưới bên trái giống với`FractionalOffset(0.0, 1.0)` `FractionalOffset.bottomRight`Góc dưới cùng bên phải giống với`FractionalOffset(1.0, 1.0)` `FractionalOffset.center`Điểm trung tâm, theo cả chiều ngang và chiều dọc giống như`FractionalOffset(0.5, 0.5)` `FractionalOffset.centerLeft`Điểm chính giữa dọc theo cạnh trái giống với`FractionalOffset(0.0, 0.5)` `FractionalOffset.centerRight`Điểm trung tâm dọc theo cạnh bên phải giống như`FractionalOffset(1.0, 0.5)` `FractionalOffset.topCenter`Điểm chính giữa dọc theo cạnh trên giống với`FractionalOffset(0.5, 0.0)` `FractionalOffset.topLeft` Góc trên bên trái giống với`FractionalOffset(0.0, 0.0)` `FractionalOffset.topRight`Góc trên cùng bên phải giống với`FractionalOffset(1.0, 0.0)` Bạn có thể sử dụng AlignmentDirectional Class với alignment property. Offset được biểu thị dưới dạng một phần của [Size](), nhưng có horizontal component phụ thuộc vào writing direction. Điều này có thể được sử dụng để chỉ ra offset từ bên trái trong văn bản TextDirection.ltr và offset từ bên phải trong văn bản TextDirection.rtl mà không cần phải biết text direction hiện tại. ![](https://assets.200lab.io/images/2024/12/05/f4f6f48b-862a-4940-b963-78b4f56f4426-34cdae982f2c9122366c.webp) Bạn cũng có thể sử dụng một tên cố định với class AlignmentDirectional `AlignmentDirectional.bottomCenter`Điểm chính giữa dọc theo cạnh dưới giống như`AlignmentDirectional(0.0, 1.0)` `AlignmentDirectional.bottomEnd`Góc dưới cùng ở phía "cuối" giống với`AlignmentDirectional(1.0, 1.0)` `AlignmentDirectional.bottomStart`Góc dưới cùng ở phía "bắt đầu" giống với`AlignmentDirectional(-1.0, 1.0)` `AlignmentDirectional.center`Điểm trung tâm, theo cả chiều ngang và chiều dọc giống như`AlignmentDirectional(0.0, 0.0)` `AlignmentDirectional.centerEnd`Điểm trung tâm dọc theo cạnh "cuối" giống như`AlignmentDirectional(1.0, 0.0)` `AlignmentDirectional.centerStart`Điểm chính giữa dọc theo cạnh "bắt đầu" giống như`AlignmentDirectional(-1.0, 0.0)` `AlignmentDirectional.topCenter`Điểm chính giữa dọc theo cạnh trên giống như`AlignmentDirectional(0.0, -1.0)` `AlignmentDirectional.topEnd`Góc trên cùng ở phía "cuối" giống với`AlignmentDirectional(1.0, -1.0)` `AlignmentDirectional.topEnd`Góc trên cùng ở phía "bắt đầu" giống với`AlignmentDirectional(-1.0, -1.0)` # Constraints Property Constraint chỉ là một thuộc tính chỉ định kích thước hoặc không gian mà một widget có thể lấy. Hầu hết các widget và giao diện người dùng có thể được xây dựng bằng cách sử dụng BoxConstraint đơn giản. _BoxConstraint chỉ quan tâm đến_ ****__minWidth, maxWidth, minHeight__**_ _**_**và**_**_ _**__maxHeight.__**** ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, constraints: BoxConstraints( maxHeight: 300.0, maxWidth: 200.0, minWidth: 150.0, minHeight: 150.0 ), ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/82412189-a05e-46d7-b612-64b8c8723448-4317fe991f30010f7521.webp) Như chúng ta đã biết trước đây, nếu container widget không có child, nó sẽ tự động lấp đầy vùng đã cho trên màn hình và bởi vì chúng ta có chiều rộng tối đa và chiều cao tối đa nên container sẽ lấp đầy kích thước vùng của chiều rộng tối đa và chiều cao tối đa. Hãy thêm Text widget vào container. ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, child: Text("Flutter"), constraints: BoxConstraints( maxHeight: 300.0, maxWidth: 200.0, minWidth: 150.0, minHeight: 150.0 ), ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/4d790351-2575-49e8-b4af-745989eeb3b0-d29915ce59173400528e.webp) Bởi vì có child trong container, nó sẽ wrap chiều cao và chiều rộng của child element đã cho và vì chúng ta có chiều rộng tối thiểu và chiều cao tối thiểu, vì vậy nó sẽ lấy kích thước đã cho trong BoxConstraints. Hãy thử với một văn bản dài. ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, child: Text("Flutter Cheatsheet Flutter Cheatsheet"), constraints: BoxConstraints( maxHeight: 300.0, maxWidth: 200.0, minWidth: 150.0, minHeight: 150.0 ), ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/c67c9798-8bb0-4794-b05b-ad5207d5ef27-9220ef0734294dabd972.webp) Chúng ta có thể thấy trong ảnh chụp màn hình, container không thể sử dụng nhiều hơn chiều rộng tối đa và chiều cao tối đa. Nếu chúng ta cần mở rộng container của mình đến kích thước tối đa ngay cả khi container có child, chúng ta có thể sử dụng BoxConstraints.expand() ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, child: Text("Flutter"), constraints: BoxConstraints.expand(), ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/680948fa-2a92-4050-955b-ed8294bcd0cb-9820c9d53da2a3e87397.webp) Chúng ta có thể thấy rằng container đã không wrap chiều cao và chiều rộng của child element đã cho, nó đã sử dụng đến mức tối đa. Bạn cũng có thể thiết lập chiều rộng và chiều cao dưới dạng tham số. ![](https://assets.200lab.io/images/2024/12/05/02dd977d-1c11-4e95-927f-5bc7f42fc29c-b15b9d5f135dcda5605d.webp) # Margin Property Margin chỉ là một thuộc tính chỉ định để thêm không gian trống bao quanh container bằng cách sử dụng giá trị không đổi EdgeInsets. ****__EdgeInsets.all()__**** nếu bạn cần canh lề ở tất cả các bên ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, margin: new EdgeInsets.all(20.0), ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/2a19fea2-c386-42b1-9b8c-08aaa5797de7-94dc881a690f1ee9cda7.webp) ****__EdgeInsets.symmetric()__**** Nếu bạn cần thêm lề với các hiệu số dọc và/hoặc ngang đối xứng ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, margin: new EdgeInsets.symmetric( vertical: 20.0, horizontal: 50.0 ), ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/eaff8a5a-70bd-4f2d-9548-6f04d38b4e9f-f32be2f7360edfe69573.webp) ****__EdgeInsets.fromLTRB()__**** Nếu bạn cần thêm lề từ các hiệu số từ trái, trên, phải và dưới. ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, margin: new EdgeInsets.fromLTRB(20.0, 30.0, 40.0, 50.0), ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/e7ede51f-36b4-4d84-9409-fb18fc2be516-32fdb47f643173a27157.webp) ****__EdgeInsets.only()__**** Nếu bạn cần thêm lề chỉ với các giá trị đã cho khác 0. ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, margin: new EdgeInsets.only( left: 20.0, bottom: 40.0, top: 50.0 ), ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/5c549ccc-4e36-44ad-8eba-786c5f5ce857-d792aadb4f1998e4b1fe.webp) # Padding Property Padding chỉ là một thuộc tính được chỉ định để thêm không gian trống bên trong container bằng cách sử dụng một giá trị không đổi EdgeInsets giống như lề. ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( margin: new EdgeInsets.only( left: 20.0, bottom: 40.0, top: 50.0 ), padding: new EdgeInsets.all(40.0), color: Colors.green, child: Text("Flutter Cheatsheet"), constraints: BoxConstraints.expand(), ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/900424ab-557e-4d33-9753-46d49870cd2c-8822cf66a79965d0287e.webp) # ForegroundDecoration Property A decoration property can be applied in front of the given container. The value can be - BoxDecoration Class - FlutterLogoDecoration Class - ShapeDecoration Class - UnderlineTabIndicator Class We will talk about the above class later in a different article # Decoration Property Decoration property có thể được áp dụng phía sau container đã cho. Giá trị có thể là: - class BoxDecoration - class FlutterLogoDecoration - class ShapeDecoration - class UnderlineTabIndicator # Transform Property Thực hiện chuyển đổi trên container khi nó được bố trí. Chúng ta sử dụng class Matrix làm giá trị. ``` Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( padding: new EdgeInsets.all(40.0), color: Colors.green, child: Text("Flutter Cheatsheet"), transform: new Matrix4.rotationZ(0.5) ), ), ); ``` ![](https://assets.200lab.io/images/2024/12/05/b88497fc-6ba5-4164-921b-69d850c2f734-6302b0c4862f55ca31a6.webp) Hy vọng bạn sẽ thích bài viết này! Bài viết được lược dịch từ [Julien Louage]().