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

SizedBox
SizedBox.fromSize
SizedBox.expand
SizedBox.shrink

1. SizedBox

SizedBox là một hộp trong suốt, khác với Container bạn không thể thiết lập kiểu dáng cho nó (chẳng hạn mầu nền, margin, padding,...). Nếu bạn chỉ định một kích thước cụ thể cho SizedBox, kích thước đó cũng sẽ được áp dụng cho widget con của nó. Ngược lại nếu chiều rộng của SizedBox không được chỉ định hoặc null thì widget con của sẽ có chiều rộng theo thiết lập riêng hoặc bằng 0 (nếu không được thiết lập). Với chiều cao cũng có hành vi tương tự.

Tất cả các tham số tham gia vào việc tạo ra một SizedBox như width, height, size, child đều là các tuỳ chọn (Không bắt buộc).

Các constructor của SizedBox:

SizedBox constructor

const SizedBox(
    {Key key,
    double width,
    double height,
    Widget child}
)

SizedBox.fromSize constructor

SizedBox.fromSize(
    {Key key,
    Widget child,
    Size size}
)

SizedBox.expand constructor

const SizedBox.expand(
    {Key key,
    Widget child}
)

SizedBox.shrink constructor

const SizedBox.shrink(
    {Key key,
    Widget child}
)

Nếu bạn chỉ định một kích thước cụ thể cho SizedBox thông qua các tham số width, height hoặc size thì kích thước này cũng được áp dụng cho widget con của nó.

Ví dụ: Đặt một ElevatedButton vào một SizedBox có kích thước 250x100, kích thước này cũng sẽ được áp dụng cho ElevatedButton:

(ex1)

SizedBox(
    width: 250,
    height: 100,
    child: ElevatedButton(
      child: Text("Button "),
      onPressed: (){},
    )
)

Bạn cũng có thể tạo đối tượng SizedBox thông qua constructor SizedBox.fromSize:

SizedBox.fromSize (
    size: Size(250, 100),
    child: ElevatedButton(
      child: Text("Button"),
      onPressed: (){},
    )
)

Ví dụ: Một ElevatedButton mặc dù được thiết lập kích thước nhỏ nhất là 200x200, nhưng khi được đặt trong một SizedBox có kích thước được chỉ định (chẳng hạn 250x50) nó sẽ tuân theo kích thước của SizedBox.

(ex3)

SizedBox (
    width:250,
    height: 50,
    child: ElevatedButton(
      child: Text("Button "),
      onPressed: (){},
      style: ElevatedButton.styleFrom(
          shadowColor : Colors.redAccent,
          elevation: 10,
          minimumSize: Size(200,  200 )
      )
    )
)

Ví dụ: Nếu chiều cao của SizedBox không được chỉ định (hoặc null) thì chiều cao của widget con sẽ được xác định theo thiết lập riêng của nó hoặc bằng 0 (nếu không có thiết lập riêng).

(ex4)

SizedBox (
    width:250,
    child: ElevatedButton(
      child: Text("Button "),
      onPressed: (){},
      style: ElevatedButton.styleFrom(
          shadowColor : Colors.redAccent,
          elevation: 10,
          minimumSize: Size(200,  200 )
      )
    )
)

Ví dụ: Sét đặt giá trị double.infinity (vô hạn) cho chiều rộng của SizedBox thì chiều rộng của nó sẽ lớn nhất có thể trong sự cho phép của widget cha.

(ex5)

SizedBox (
    width: double.infinity,
    height: 50,
    child: ElevatedButton(
        child: Text("Button "),
        onPressed: (){}
    )
)

2. SizedBox.fromSize

Constructor SizedBox.fromSize được sử dụng để tạo một SIzedBox với kích thước được chỉ định thông qua tham số tuỳ chọn - size.

SizedBox.fromSize Constructor

SizedBox.fromSize(
    {Key key,
    Widget child,
    Size size}
)

Ví dụ:

SizedBox.fromSize (
    size: Size(250, 100),
    child: ElevatedButton(
      child: Text("Button "),
      onPressed: (){},
    )
)

3. SizedBox.expand

Constructor SizedBox.expand được sử dụng để tạo ra một SizedBox với chiều rộng và chiều cao là double.infinity, điều này có nghĩa là kích thước của SizedBox sẽ lớn nhất có thể trong sự cho phép của widget cha.

SizedBox.expand constructor

const SizedBox.expand(
    {Key key,
    Widget child}
)

4. SizedBox.shrink

Constructor SizedBox.shrink được sử dụng để tạo ra một SizedBox với kích thước nhỏ nhất theo gợi ý từ widget cha của nó.

SizedBox.shrink Constructor

const SizedBox.shrink(
    {Key key,
    Widget child}
)

Trong ví dụ này chúng ta có một SizedBox được tạo ra bởi constructor SizedBox.shrink, và widget cha của nó là một ConstrainedBox được thiết lập kích thước nhỏ nhất 80x20. SizedBox sẽ thu nhỏ (shrink) kích thước của nó để phù hợp nhất với kích thước nhỏ nhất của widget cha.

(ex6)

ConstrainedBox(
    constraints: new BoxConstraints( // Min: 80x20
        minWidth: 80.0,
        minHeight: 20.0
    ),
    child: SizedBox.shrink(
      child: ElevatedButton(
        child: Text('Button'),
        onPressed: () {},
      ),
    )
)

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