Halo teman-teman pada artikel kali ini saya akan membahas tentang Expanded Widget.

Jika kalian belum begitu memahami apa itu Expanded Widget kalian bisa menonton video resmi dari Flutter nya langsung:

Basics

Jika kalian memiliki beberapa widget dalam satu baris atau kolom, Anda dapat memeluk children seperti ini:

Row(
  children: [
    Container(height: 50, width 50, color: Colors.yellow),
    Container(height: 50, width 50, color: Colors.yellow),
    Container(height: 50, width 50, color: Colors.yellow),
  ],
),

Jika kalian ingin salah satu widget diperluas untuk mengisi ruang ekstra di baris atau kolom, Anda dapat membungkusnya dengan widget Expanded:

Row(
  children: [
    Container(height: 50, width 50, color: Colors.yellow),
    Expanded(
      child: Container(height: 50, width 50, color: Colors.yellow),
    ),
    Container(height: 50, width 50, color: Colors.yellow),
  ],
),

Jika kalian memiliki beberapa widget yang ingin kalian bagikan ruang ekstra (tetapi tidak sama), Anda dapat mengatur flex nya:

children: [
   Container(height: 50, width 50, color: Colors.yellow),
    Expanded(
      flex: 2,
      child:  Container(height: 50, width 50, color: Colors.yellow),
    ),
     Container(height: 50, width 50, color: Colors.yellow),
    Expanded(
      flex: 1,
      child:  Container(height: 50, width 50, color: Colors.yellow),
    ),
  ],
),