Giới thiệu
Container là một trong số những widget hay được sử dụng nhất khi code UI trong flutter nên mình sẽ giới thiệu về các thuộc tính của nó mà chúng ta hay sử dụng.
Container widget chứa một child widget và một số thuộc tính tiện ích khác, các bạn có thể xem chi tiết doc tại link dưới
https://api.flutter.dev/flutter/widgets/Container-class.html
Giờ chúng ta cùng đi vào xem container có gì nhé
Container
Trước tiên là khởi tạo một container.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">runApp</span><span class="token punctuation">(</span><span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
width & height
Định nghĩa kích thước của container
1 2 3 4 5 6 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
child
Nếu không có child thì container sẽ có kích thước lớn nhất có thể. Nếu có child thì container sẽ theo kích thước child của nó.
Container không có child
1 2 3 4 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> |
Container có child
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">return</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Hello container'</span><span class="token punctuation">,</span> textDirection<span class="token punctuation">:</span> TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
một ví dụ khác nhé
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">return</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">SizedBox</span><span class="token punctuation">(</span> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
color
Sử dụng Color class hoặc Colors class để thêm background color cho container.
1 2 3 4 5 6 7 8 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">SizedBox</span><span class="token punctuation">(</span> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
hoặc
1 2 3 4 5 6 7 8 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Color<span class="token punctuation">.</span><span class="token function">fromARGB</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">)</span><span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">SizedBox</span><span class="token punctuation">(</span> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
aligment
Sử dụng thuộc tính aligment để đặt vị trí cho child widget của container
Các class có thể dùng làm giá trị của aligment là:
- Aligment sử dụng hệ tọa độ với điểm gốc (0, 0) là center của container
- AlignmentDirectional sử dụng hệ tọa độ với điểm gốc (0, 0) là center của container, tuy nhiên phụ thuộc vàochiều viết, ví dụ ltr thì start ở bên trái và end bên phải, rtl thì start ở bên phải và end ở bên trái
- FractionalOffset sử dụng hệ tọa độ với điểm gốc (0, 0) là top left của container
Aligment
Bạn có thể tạo mới Aligment với giá trị x, y mong muốn hoặc sử dụng các hằng số có sẵn.
1 2 3 4 5 6 7 8 9 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Hello container'</span><span class="token punctuation">,</span> textDirection<span class="token punctuation">:</span> TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> alignment<span class="token punctuation">:</span> <span class="token function">Alignment</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
1 2 3 4 5 6 7 8 9 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Hello container'</span><span class="token punctuation">,</span> textDirection<span class="token punctuation">:</span> TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> alignment<span class="token punctuation">:</span> Alignment<span class="token punctuation">.</span>centerLeft<span class="token punctuation">,</span> <span class="token punctuation">)</span> |
Chi tiết về giá trị x, y của Aligment
các bạn có thể xem tương ứng như trong hình bên dưới
AlignmentDirectional
Tương tự aligment chúng ta cũng có 2 cách là tạo mới AlignmentDirectional với giá trị x, y mong muốn hoặc sử dụng các hằng số có sẵn.
1 2 3 4 5 6 7 8 9 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Hello container'</span><span class="token punctuation">,</span> textDirection<span class="token punctuation">:</span> TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> alignment<span class="token punctuation">:</span> <span class="token function">AlignmentDirectional</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
1 2 3 4 5 6 7 8 9 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Hello container'</span><span class="token punctuation">,</span> textDirection<span class="token punctuation">:</span> TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> alignment<span class="token punctuation">:</span> AlignmentDirectional<span class="token punctuation">.</span>centerStart<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
Chi tiết về giá trị x, y của AlignmentDirectional
với TextDirection.ltr
và TextDirection.ltr
các bạn có thể xem tương ứng như trong hình bên dưới
FractionalOffset
Tương tự aligment chúng ta cũng có 2 cách là tạo mới FractionalOffset với giá trị x, y mong muốn hoặc sử dụng các hằng số có sẵn.
1 2 3 4 5 6 7 8 9 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Hello container'</span><span class="token punctuation">,</span> textDirection<span class="token punctuation">:</span> TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> alignment<span class="token punctuation">:</span> <span class="token function">FractionalOffset</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
1 2 3 4 5 6 7 8 9 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Hello container'</span><span class="token punctuation">,</span> textDirection<span class="token punctuation">:</span> TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> alignment<span class="token punctuation">:</span> FractionalOffset<span class="token punctuation">.</span>bottomCenter<span class="token punctuation">,</span> <span class="token punctuation">)</span> |
Chi tiết về giá trị x, y của FractionalOffset
các bạn có thể xem tương ứng như trong hình bên dưới
constraints
Thuộc tính constraints
định nghĩa ràng buộc về kích thước của container
. Thường chúng ta sẽ sử dụng BoxConstraints
.
Như phần trên chúng ta đã nói thì khi không có child thì container sẽ có kích thước lớn nhất có thể, tuy nhiên khi thêm thuộc tính maxHeight và maxWidth thì nó sẽ bị giới hạn lại.
1 2 3 4 5 6 7 8 9 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> alignment<span class="token punctuation">:</span> AlignmentDirectional<span class="token punctuation">.</span>centerStart<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">)</span><span class="token punctuation">,</span> constraints<span class="token punctuation">:</span> <span class="token function">BoxConstraints</span><span class="token punctuation">(</span> maxHeight<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> maxWidth<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
Giờ tạo child widget thì child sẽ không thể vượt quá size của container và bị cắt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Hello container'</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">140</span><span class="token punctuation">)</span><span class="token punctuation">,</span> textDirection<span class="token punctuation">:</span> TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> alignment<span class="token punctuation">:</span> AlignmentDirectional<span class="token punctuation">.</span>centerStart<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>TextDirection<span class="token punctuation">.</span>ltr<span class="token punctuation">)</span><span class="token punctuation">,</span> constraints<span class="token punctuation">:</span> <span class="token function">BoxConstraints</span><span class="token punctuation">(</span> maxHeight<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> maxWidth<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
margin & padding
Định nghĩa khoảng cách giữa biên của container với parent bằng margin và với child bằng padding
Có nhiều cách để định nghĩa margin và padding với EdgeInsets nên mình sẽ nêu ví dụ một số case hay dùng
1 2 3 4 5 6 7 8 | margin<span class="token punctuation">:</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">symmetric</span><span class="token punctuation">(</span> <span class="token comment">// margin theo direction</span> vertical<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> horizontal<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> margin<span class="token punctuation">:</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span>left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> right<span class="token punctuation">,</span> bottom<span class="token punctuation">)</span> <span class="token comment">// margin cả 4 biên với giá trị chỉ định</span> padding<span class="token punctuation">:</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// padding tất cả các biên</span> padding<span class="token punctuation">:</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>left<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">)</span> <span class="token comment">// padding biên chỉ định</span> |
decoration & foregroundDecoration
Gán một số thuộc tính về UI cho container, thứ tự ưu tiên của decoration và child được mô tả như hình vẽ dưới.
Thông thường chúng ta sẽ dùng BoxDecoration
ở đây nên mình sẽ giới thiệu các bạn một số thuộc tính của BoxDecoration
mà chúng ta sẽ hay sử dụng đến.
BoxDecoration
color
Sử dụng để set color cho box, dùng Color class hoặc Colors class giống như container
1 2 3 4 | decoration<span class="token punctuation">:</span> <span class="token function">BoxDecoration</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>blue<span class="token punctuation">,</span> <span class="token punctuation">)</span> |
image
Dùng image để làm background cho box, image sẽ nằm trên color
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> decoration<span class="token punctuation">:</span> <span class="token function">BoxDecoration</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>blue<span class="token punctuation">,</span> image<span class="token punctuation">:</span> <span class="token function">DecorationImage</span><span class="token punctuation">(</span> fit<span class="token punctuation">:</span> BoxFit<span class="token punctuation">.</span>fitWidth<span class="token punctuation">,</span> image<span class="token punctuation">:</span> <span class="token function">NetworkImage</span><span class="token punctuation">(</span> <span class="token string">'https://flutter.io/images/catalog-widget-placeholder.png'</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
border
Set border cho box
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> decoration<span class="token punctuation">:</span> <span class="token function">BoxDecoration</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>blue<span class="token punctuation">,</span> image<span class="token punctuation">:</span> <span class="token function">DecorationImage</span><span class="token punctuation">(</span> fit<span class="token punctuation">:</span> BoxFit<span class="token punctuation">.</span>fitWidth<span class="token punctuation">,</span> image<span class="token punctuation">:</span> <span class="token function">NetworkImage</span><span class="token punctuation">(</span> <span class="token string">'https://flutter.io/images/catalog-widget-placeholder.png'</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> border<span class="token punctuation">:</span> Border<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span> width<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
borderRadius
Set radius cho border của box
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> decoration<span class="token punctuation">:</span> <span class="token function">BoxDecoration</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>blue<span class="token punctuation">,</span> image<span class="token punctuation">:</span> <span class="token function">DecorationImage</span><span class="token punctuation">(</span> fit<span class="token punctuation">:</span> BoxFit<span class="token punctuation">.</span>fitWidth<span class="token punctuation">,</span> image<span class="token punctuation">:</span> <span class="token function">NetworkImage</span><span class="token punctuation">(</span> <span class="token string">'https://flutter.io/images/catalog-widget-placeholder.png'</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> border<span class="token punctuation">:</span> Border<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span> width<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> borderRadius<span class="token punctuation">:</span> BorderRadius<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span> Radius<span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
shape
Set shape cho box, nhận giá trị BoxShape.rectangle
hoặc BoxShape.circle
boxShadow
Set shadow cho box
gradient
Set gradient background cho box
backgroundBlendMode
Chế độ trộng background ảnh hưởng tới decoration, foregroundDecoration, child của Container đó
transform
Sử dụng thuộc tính này để thực hiện chuyển đổi container, truyền vào là Matrux class
1 2 3 4 5 6 7 8 9 | child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> decoration<span class="token punctuation">:</span> <span class="token function">BoxDecoration</span><span class="token punctuation">(</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>blue<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> transform<span class="token punctuation">:</span> Matrix4<span class="token punctuation">.</span><span class="token function">rotationX</span><span class="token punctuation">(</span>pi<span class="token operator">/</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
Nguồn
https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e
https://medium.com/jlouage/container-de5b0d3ad184
https://viziondary.com/flutter/ui/widgets/layout/multi-child/lam-quen-voi-container/