Expanded Flutter คืออะไร ตัวอย่างการใช้งาน

Expanded คือ widget ชนิดหนึ่งใน Flutter ใช้สำหรับขยายการแสดงผลให้เต็มพื้นที่ โดยใช้ร่วมกับคำสั่ง flex เพื่อกำหนดอัตราส่วนสำหรับการแสดงผล เช่น flex 1 จะแสดงผล 1 ส่วน และ flex 2 จะแสดงผล 2 ส่วนเป็นต้น สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง การใช้งาน Expanded Flutter

Row(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(
        decoration: BoxDecoration(color: Colors.red),
        padding: EdgeInsets.all(8.0),
        child: Text(
          'A',
        ),
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        decoration: BoxDecoration(color: Colors.green),
        padding: EdgeInsets.all(8.0),
        child: Text(
          'B',
        ),
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        decoration: BoxDecoration(color: Colors.blue),
        padding: EdgeInsets.all(8.0),
      ),
    )
  ],
),

ผลลัพธ์

จากตัวอย่างโค้ดใช้ Expanded คลุม Container และกำหนดพื้นที่แสดงผลดังนี้

1. พื้นที่สีแดง (A) กำหนด flex 1 คือ แสดงผล 1 ส่วน

2. พื้นที่สีเขียว (B) กำหนด flex 2 คือ แสดงผล 2 ส่วน

3. พื้นที่สีฟ้า (C) กำหนด flex 1 คือ แสดงผล 1 ส่วน

ทำให้เมื่อพิจารณาค่าของ flex จะทำให้ พื้นที่การแสดงผล A และ C จะเท่ากัน และ B จะกว้างกว่า 1 ส่วน