Flutter for beginner

Mở Đầu

Expanded làm việc với Flex/Flexbox layout. Nó là một trong những widget tốt nhất để phân chia không gian giữa các items với nhau

Làm quen với Expanded

 

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

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                decoration: const BoxDecoration(color: Colors.red),
              ),
              flex: 3,
            ),
            Expanded(
              child: Container(
                decoration: const BoxDecoration(color: Colors.green),
              ),
              flex: 2,
            ),
            Expanded(
              child: Container(
                decoration: const BoxDecoration(color: Colors.blue),
              ),
              flex: 1,
            ),
          ],
        ),
      );
    }

Nhìn ví dụ trên bạn sẽ thấy rằng flex chính là tỉ lệ phân chia kích thước của các widget. Các widget sẽ được phân chia theo tỉ lệ lần lượt là 3:2:1

Kết bài

Như vậy sau bài viết làm quen với Expanded này. Các bạn đã biết cách sử dụng Expanded 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