Khi xây dựng giao diện người dùng trong Flutter, bạn sẽ thường xuyên sử dụng các widget như SizedBox và Container. Mặc dù cả hai đều được sử dụng để định vị và tạo kích thước cho các phần tử giao diện, nhưng chúng có những mục đích và khả năng khác nhau.
SizedBox được sử dụng chủ yếu để tạo ra một hộp có kích thước cố định. Widget này rất hữu ích trong việc tạo khoảng trống giữa các widget hoặc để định vị một widget cụ thể với kích thước đã xác định. Dưới đây là một ví dụ:
SizedBox(
width: 100,
height: 50,
child: Text('Hello'),
)
Trong ví dụ này, SizedBox tạo ra một hộp có chiều rộng 100 và chiều cao 50, chứa văn bản “Hello”.
Ngược lại, Container là một widget mạnh mẽ hơn, có khả năng chứa các widget con và hỗ trợ nhiều thuộc tính tùy chỉnh như kích thước, màu sắc, viền và padding. Đây là một ví dụ về cách sử dụng Container:
Container(
width: 100,
height: 50,
color: Colors.blue,
child: Text('Hello'),
)
Trong ví dụ này, Container cũng có kích thước 100×50, nhưng nó có màu nền là màu xanh và chứa văn bản “Hello”.
Kích thước của SizedBox được xác định hoàn toàn bởi các thuộc tính width và height. Bạn có thể dễ dàng điều chỉnh các giá trị này để tạo ra các kích thước khác nhau cho widget của mình. Dưới đây là một ví dụ khác về cách sử dụng SizedBox:
SizedBox(
width: 150,
height: 75,
)
Khi đó, SizedBox sẽ tạo ra một hộp có chiều rộng 150 và chiều cao 75 mà không chứa nội dung bên trong.
Container cũng có thể có kích thước xác định nhưng nó còn có thể tự động điều chỉnh kích thước dựa trên nội dung bên trong. Dưới đây là một ví dụ:
Container(
padding: EdgeInsets.all(10),
child: Text('Hello World'),
)
Trong trường hợp này, Container sẽ tự động điều chỉnh kích thước dựa trên kích thước của văn bản “Hello World” cùng với padding đã chỉ định.
Tính năng của SizedBox rất đơn giản, chủ yếu chỉ là định kích thước. Nếu bạn chỉ cần một hộp với kích thước cố định để tạo khoảng cách hoặc định vị, thì SizedBox là lựa chọn lý tưởng. Ví dụ:
Row(
children: [
SizedBox(width: 20),
Text('Text 1'),
SizedBox(width: 20),
Text('Text 2'),
],
)
Trong ví dụ này, SizedBox được sử dụng để tạo khoảng cách giữa hai văn bản.
Container cung cấp nhiều tính năng mạnh mẽ hơn, cho phép bạn tùy chỉnh nhiều thuộc tính khác nhau như lề, viền, màu sắc, padding, và nhiều hơn nữa. Đây là một ví dụ về việc sử dụng Container với các thuộc tính khác nhau:
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(15),
),
child: Text('Hello Container'),
)
Trong ví dụ này, Container không chỉ có màu nền xanh mà còn có viền tròn, lề và padding.
SizedBox thường nhẹ hơn và có thể mang lại hiệu suất tốt hơn khi bạn chỉ cần một hộp có kích thước cố định mà không cần các tính năng bổ sung. Ví dụ:
Column(
children: [
SizedBox(height: 10),
SizedBox(width: 50, height: 50),
SizedBox(height: 10),
],
)
Mặc dù Container mạnh mẽ hơn nhưng có thể nặng hơn vì nó cung cấp nhiều tính năng hơn. Tuy nhiên, trong hầu hết các trường hợp sử dụng, điều này thường không ảnh hưởng lớn đến hiệu suất. Ví dụ:
Column(
children: [
Container(
height: 10,
color: Colors.red,
),
Container(
width: 50,
height: 50,
color: Colors.blue,
),
Container(
height: 10,
color: Colors.red,
),
],
)
SizedBox khi bạn chỉ cần một hộp với kích thước cố định, chủ yếu để tạo khoảng cách hoặc định vị widget.Container khi bạn cần thêm các thuộc tính như lề, viền, màu sắc, hoặc khi bạn muốn chứa một widget và cần nhiều tùy chỉnh hơn.
