Flutter: Flexible vs Expanded

Flutter Jul 3, 2020

บางครั้งเราต้องการให้ Widget ของเรา Take space ที่เหลือทั้งหมดของ Column/Row นั้น ๆ หรือ เราอาจต้องการให้ Widget แต่ละส่วนใน​ Column/Row ใช้ Space เท่า ๆ กัน แน่นอนว่า Widget 2 ตัว ที่มักถูกใช้รับมือกับสถานการณ์แบบนี้ คงหนีไม่พ้น Flexible และ Expanded แล้วทั้งสองตัวนี้ต่างกันอย่างไร?


Flexible

Flexible ใช้สำหรับทำให้ Child Widget ขยายจนเต็มพื้นที่ว่างที่เหลืออยู่ตามแกนหลัก (Main Axis เช่น Row จะเป็นแนวนอน หากเป็น Column จะเป็นแนวตั้ง) แต่ไม่บังคับ นั่นคือเราอาจตั้งให้ Child ตัวนั้นมีค่าของ width/height ไว้ก็ได้ โดย Properties ที่สำคัญของ Flexible คือ fit ซึ่งใช้สำหรับบอกว่าจะให้ Child Widget จัดการกับพื้นที่อย่างไร โดย fit ต้องการค่าประเภท FlexFit ซึ่งมีอยู่ด้วยกัน 2 แบบ คือ FlexFit.loose และ FlexFit.tight ซึ่งโดย Default จะเป็น FlexFit.loose ซึ่งไม่บังคับว่า Child Widget ต้องใช้ Space ทั้งหมด โดยอาจมีขนาดใดก็ได้ที่ใหญ่ที่สุดเท่ากับที่ว่างที่เหลือ หรือเล็กกว่านั้น ในขณะที่ FlexFit.tight จะบังคับให้ Child Widget ใช้พื้นที่ทั้งหมดที่เหลืออยู่

นอกจากนี้ Flexible ยังมีประโยชน์ในกรณีที่เราต้องการแบ่งพื้นที่ออกเป็นอัตราส่วนต่าง ๆ ได้ด้วย ด้วย Property flex ซึ่งมีค่า Default เป็น 1 เราสามารถตั้งให้เป็นเลขต่าง ๆ เพื่อให้เกิดการคำนวณตามอัตราส่วนได้อีกด้วย เมื่อใช้คู่กับ Flexible ตัวอื่น

โดยการคำนวณพื้นที่ของ flex จะหาพื้นที่ทั้งหมดที่ใช้ได้มาลบกับพื้นที่ของ Widget ที่ Inflexible (Widget ที่มีขนาดแบบ Static เช่น การกำหนด width/height โดยตรง) จากนั้นจะนำมาหารตามอัตราส่วน เช่น หากมี Flexible 2 อัน อันแรกกำหนด flex: 1 อันที่ 2 กำหนด flex: 2 และมี Container อีกหนึ่งอันที่กำหนด width: 50 อยู่ใน Row เดียวกัน สมมติว่าเรามีพื้นที่งหมดที่เป็นไปได้เท่ากับ 350 ตามแนวนอน

การคำนวณจะเริ่มจากการนำ 350 มาตั้ง ลบด้วยขนาดตามแกนหลัก ซึ่งในที่นี้ คือ แนวนอน (width) ของ Inflexible Widget มาลบ ซึ่งเรามีหนึ่งอันคือ Container ที่มี width: 50 ทำให้เราเหลือพื้นที่ที่จะนำมาหารเท่ากับ 300 จากนั้น เราจะไปดูว่า flex รวมกันเท่ากับเท่าไร ซึ่งเรามี flex: 1 และ flex: 2 รวมกันเท่ากับ 3 เราจึงนำ 300 / 3 = 100 นั่นแปลว่า 1 ส่วนของพื้นที่เท่ากับ 100 เราจะให้พื้นที่ตามอัตราส่วนของแต่ละ Widget โดย Flexible ที่มี flex: 1 จะได้ width เท่ากับ 100 ส่วน Flexible ที่มี flex: 2 จะได้ width เท่ากับ 200 นั่นเอง


Expanded

แล้ว Expanded ละ คือ อะไร คำตอบ คือ มันคือ Flexible ที่มี fit: FlexFit.tight นั่นเอง นั่หมายความว่า Expanded ทำได้ทุกอย่างเหมือน Flexible แต่บังคับให้ Child Widget ต้องใช้พื้นที่ที่ว่างทั้งหมดนั่นเอง


📚 Hope you enjoy reading! 📚


Tags

Pittawat Taveekitworachai

A CS student who passionate about web and mobile technology with the belief that technology can enhance people's life.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.