Skip to main content

One post tagged with "Layout"

View All Tags

Layout Widgets trong Flutter

· 4 min read

Layout Widgets in Flutter

Layout Widgets là những widget cơ bản trong Flutter dùng để sắp xếp và bố cục các widget con. Bài viết này sẽ giới thiệu về 4 widget bố cục phổ biến nhất: Container, Row, Column và Stack.

1. Container​

Container là một widget linh hoạt nhất trong Flutter, cho phép bạn tùy chỉnh nhiều thuộc tính của widget con.

Đặc điểm của Container:​

  • Có thể thêm padding và margin
  • Có thể tùy chỉnh kích thước
  • Có thể thêm border và background
  • Có thể thêm shadow và gradient

Ví dụ về Container:​

Container(
  width: 200,
  height: 200,
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 4,
        offset: const Offset(0, 2),
      ),
    ],
  ),
  child: const Text(
    'Hello World',
    style: TextStyle(color: Colors.white),
  ),
)

2. Row​

Row là widget dùng để sắp xếp các widget con theo chiều ngang.

Đặc điểm của Row:​

  • Sắp xếp các widget con theo chiều ngang
  • Có thể điều chỉnh alignment và spacing
  • Có thể sử dụng Expanded và Flexible
  • Có thể wrap các widget con

Ví dụ về Row:​

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    const Text('Left'),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.blue,
      child: const Text('Center'),
    ),
    const Text('Right'),
  ],
)

Các thuộc tính quan trọng của Row:​

  • mainAxisAlignment: Căn chỉnh theo chiều ngang
  • crossAxisAlignment: Căn chỉnh theo chiều dọc
  • mainAxisSize: Kích thước theo chiều ngang
  • textDirection: Hướng của text
  • verticalDirection: Hướng của các widget con

3. Column​

Column là widget dùng để sắp xếp các widget con theo chiều dọc.

Đặc điểm của Column:​

  • Sắp xếp các widget con theo chiều dọc
  • Có thể điều chỉnh alignment và spacing
  • Có thể sử dụng Expanded và Flexible
  • Có thể scroll nếu nội dung dài

Ví dụ về Column:​

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    const Text('Top'),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.blue,
      child: const Text('Center'),
    ),
    const Text('Bottom'),
  ],
)

Các thuộc tính quan trọng của Column:​

  • mainAxisAlignment: Căn chỉnh theo chiều dọc
  • crossAxisAlignment: Căn chỉnh theo chiều ngang
  • mainAxisSize: Kích thước theo chiều dọc
  • textDirection: Hướng của text
  • verticalDirection: Hướng của các widget con

4. Stack​

Stack là widget dùng để xếp chồng các widget con lên nhau.

Đặc điểm của Stack:​

  • Xếp chồng các widget con
  • Có thể định vị chính xác các widget con
  • Có thể sử dụng Positioned để đặt vị trí
  • Phù hợp cho các layout phức tạp

Ví dụ về Stack:​

Stack(
  children: [
    Image.network('https://example.com/image.jpg'),
    Positioned(
      bottom: 16,
      right: 16,
      child: Container(
        padding: const EdgeInsets.all(8),
        color: Colors.black.withOpacity(0.5),
        child: const Text(
          'Overlay Text',
          style: TextStyle(color: Colors.white),
        ),
      ),
    ),
  ],
)

Các thuộc tính quan trọng của Stack:​

  • alignment: Căn chỉnh các widget con
  • fit: Cách widget con được fit vào Stack
  • clipBehavior: Cách xử lý overflow
  • children: Danh sách các widget con

5. Kết hợp các Layout Widgets​

Ví dụ về form đăng nhập:​

Container(
  padding: const EdgeInsets.all(16),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Text(
        'Login',
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      ),
      const SizedBox(height: 16),
      TextField(
        decoration: InputDecoration(
          labelText: 'Username',
          border: OutlineInputBorder(),
        ),
      ),
      const SizedBox(height: 8),
      TextField(
        decoration: InputDecoration(
          labelText: 'Password',
          border: OutlineInputBorder(),
        ),
        obscureText: true,
      ),
      const SizedBox(height: 16),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          TextButton(
            onPressed: () {},
            child: const Text('Forgot Password?'),
          ),
          ElevatedButton(
            onPressed: () {},
            child: const Text('Login'),
          ),
        ],
      ),
    ],
  ),
)

6. Best Practices​

6.1. Sử dụng Container​

  • Sử dụng Container khi cần tùy chỉnh nhiều thuộc tính
  • Tránh lồng nhiều Container không cần thiết
  • Sử dụng BoxDecoration cho các hiệu ứng phức tạp

6.2. Sử dụng Row và Column​

  • Sử dụng mainAxisAlignment và crossAxisAlignment phù hợp
  • Sử dụng Expanded và Flexible khi cần
  • Tránh Row và Column quá sâu

6.3. Sử dụng Stack​

  • Sử dụng Positioned để đặt vị trí chính xác
  • Cẩn thận với overflow
  • Sử dụng clipBehavior phù hợp

Kết luận​

Layout Widgets là những công cụ mạnh mẽ trong Flutter để tạo giao diện người dùng. Hiểu rõ cách sử dụng Container, Row, Column và Stack sẽ giúp bạn tạo ra các layout phức tạp một cách dễ dàng và hiệu quả.

Tài liệu tham khảo: