Flutter for beginner

Mở Đầu

Mặc định các widget sẽ được tạo với kích thước của chính nó.Nhưng đôi khi chúng ta muốn tạo một widget có kích thước lớn hơn kích thước hiện tại của nó, Ở đây chúng ta có thể làm việc đó bằng ConstrainedBox Widget

Làm quen với ConstrainedBox

Làm quen với ConstrainedBox: Flutter for beginer

  • Card(child: const Text('Hello World!'), color: Colors.yellow)
  • BoxConstraints.expand()

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: const Card(
            child: const Text('Hello World!'),
            color: Colors.yellow,
          ),
        ),
      );
    }

 

Với kiểu BoxConstraints.expand() thì không gian chiếm của nó sẽ là lớn nhất mà nó có thể chiếm. Ở đây là toàn bộ màn hình.

Với BoxConstraints bạn có thể thiết lập một không gian với kích thước xác định trước. Như sau
BoxConstraints.expand(height: 300.0,width: 200.0)

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ConstrainedBox(
          constraints: BoxConstraints.expand(height: 300.0,width: 200.0),
          child: const Card(
            child: const Text('Hello World!'),
            color: Colors.yellow,
          ),
        ),
      );
    }

Kết bài

Như vậy sau bài viết làm quen với ConstrainedBox này. Các bạn đã biết cách sử dụng ConstrainedBox như thế nào và khi nào thì cần đến nó rồi nhỉ :D.

Nếu có bất cứ vấn đề gì thắc mắc các bạn có thể comment bên dưới bài viết, mình sẽ phản hồi sớm nhất cho thể. Down source code tại đây

LEAVE A REPLY

Please enter your comment!
Please enter your name here