EdgeInsets Flutter คืออะไร พร้อมตัวอย่าง

EdgeInsets Flutter คือ class สำหรับกำหนดระยะห่างด้านซ้าย ขวา บน และล่าง (left, right, top, bottom) ของ widgets ที่รองรับ เช่น Container ร่วมกับคำสั่ง padding และ margin สามารถเขียนโปรแกรมได้ดังนี้

 

ตัวอย่าง การใช้ EdgeInsets กำหนดทั้ง 4 มุม

 Container(
  decoration: BoxDecoration(color: Colors.amberAccent),
  padding: EdgeInsets.all(8.0),
  child: Text(
    'Hello World',
  ),
)

จากตัวอย่างโค้ดใช้คำสั่ง EdgeInsets.all(8.0) ร่วมกับ padding คือ กำหนดระยะห่างทั้ง 4 ด้าน (left, right, top, bottom) ขนาด 8 logical pixels

 

ตัวอย่าง การใช้ EdgeInsets กำหนดเฉพาะมุมที่ต้องการ

Container(
  decoration: BoxDecoration(color: Colors.amberAccent),
  padding: EdgeInsets.only(top: 8, bottom: 8),
  child: Text(
    'Hello World',
  ),
)

จากตัวอย่างโค้ดใช้คำสั่ง EdgeInsets.only(top: 8, bottom: 8) ร่วมกับ padding คือ กำหนดระยะขอบบน 8 และระยะขอบล่าง 8 โดยไม่มีการกำหนดด้านซ้าย และด้านขวา

 

ตัวอย่าง การใช้ EdgeInsets กำหนดทั้ง 4 มุมแบบค่าไม่เท่ากัน

Container(
  decoration: BoxDecoration(color: Colors.amberAccent),
  padding: EdgeInsets.fromLTRB(20, 8, 20, 8),
  child: Text(
    'Hello World',
  ),
)

จากตัวอย่างโค้ดใช้คำสั่ง EdgeInsets.fromLTRB(20, 8, 20, 8) ร่วมกับ padding คือ กำหนดระยะขอบทั้ง 4 ด้วย fromLTRB คือ

- L (Left) เท่ากับ 20

- T (Top) เท่ากับ 8

- R (Right) เท่ากับ 20

- B (Bottom) เท่ากับ 8

 

สรุป class EdgeInsets ของ Flutter ใช้สำหรับกำหนดระยะห่าง หรือ offset ทั้ง 4 มุมคือ Left เท่ากับซ้าย, Right เท่ากับขวา, Top เท่ากับบน และ Bottom เท่ากับล่าง ร่วมกับ padding หรือ margin ของ Widgets ที่รองรับเช่น Container