web analytics

Flutter : รู้จักกับ Sliver Delegate ตอนที่ 2

cove2

สวัสดีผู้อ่านครับ บล็อกนี้เป็นตอนที่สองของเรื่อง Sliver ใน Flutter ซึ่งจากในบล็อกตอนแรก ผมได้พาลองเล่นเกี่ยวกับการใช้งาน Sliver พื้นฐาน และ Sliver Delegate ต่างๆ ในบล็อกตอนี่สองนี้ จะพาลองเล่น Sliver อื่นๆนอกจาก Sliver หลักๆครับ

 

หากยังไม่ได้อ่านตอนที่ 1 แนะนำอ่านก่อนนะครับ

Flutter : รู้จักกับ Sliver Delegate ตอนที่ 1

 

SliverFixedExtentList

SliverFixedExtentList คือ Sliver ที่คล้ายกับ SliverList เพียงแต่จะบังคับขนาดที่แน่นอน เช่น 1 แถวมีความสูง 50px เท่านั้น   SliverList จึงยืดหยุ่นกว่าขึ้นอยู่กับขนาดของ Widget ที่เรากำหนด

การกำหนด delegate ก็เลือกระหว่าง SliverChildListDelegate หรือ SliverChildBuilderDelegate

เช่น

10-1

 

แบบ SliverChildBuilderDelegate

11-1

SliverFillViewport

SliverFillViewport คือ Sliver ที่จะการแสดงผลเต็มพื้นที่ของมัน โดยกำหนดความสูงของแต่ละ child ด้วยค่า fraction เช่น หากกำหนดค่า fraction = 0.25 จะหมายความว่า ในพื้นที่แสดงผล (viewport) ของเรา child แต่ละตัวจะมีขนาด 25% ของพื้นที่แสดงผล ดังนั้นถ้าเรากำหนดค่ามากกว่า 1 ทั้งหน้าจอก็จะแสดงอันเดียว ต้องสไลด์เลื่อนๆนั่นเอง

12

 

SliverPadding

หากจะใส่ padding ให้กับ sliver อื่นๆ ให้ใช้ SliverPadding ไปครอบ

a7

 

SliverSafeArea

SliverSafeArea คือ SafeArea สำหรับ sliver ที่นำไปครอบ sliver อื่นๆ แล้วให้อยู่ใน SafeArea

 

เช่น กรณีที่เครื่องของเรามี ติ่ง (Notch) ถ้าไม่ใส่ใน SafeArea ข้อมูลของเราก็อาจจะถูกบัง

13

 

แต่เมื่อนำ Sliver มาอยู่ใน SafeArea ก็จะไม่ถูกบังนั่นเอง จริงๆไม่ใช่แค่ติ่ง แต่รวมถึง statusbar ด้วย

14

 

สำหรับวิธีเพิ่มติ่งใน Android emulator อ่านได้จากบล็อกข้างล่างนี้

Android : วิธีเพิ่มติ่ง (Notch) ใน Android Emulator

 

SliverAppBar

AppBar ปกติไม่สามารถใช้งานร่วมกับ ScrollView ได้ เช่น เราใส่ AppBar ไว้ใน Scaffold ตัว AppBar ก็จะไม่เลื่อนตาม ScrollView แต่ว่าก็มีหลายๆครั้งที่ UX ของแอปเรา ต้องการให้ AppBar แสดงผลร่วมกับ ScrollView ดังนั้น จึงเป็นที่มาของ  SliverAppBar โดยตัว SliverAppBar ก็สามารถใส่ title , action , color ได้เหมือน AppBar

เช่น

 

จะเห็นว่า AppBar ถูกเลื่อนไปพร้อมกับ ScrollView แล้ว

a1

 

ที่นี้เราสามารถกำหนดให้เป็นแบบ Floating

 

ก็คือ หากเราเลื่อนหน้าจอลง แล้วพอจังหวะเลื่อนขึ้น ตัว AppBar จะแสดงออกมาอัตโนมัติ ไม่จำเป็นต้องเลื่อนขึ้นไปบนสุด

a2

 

SliverAppBar + FlexibleSpaceBar

ที่น่าสนใจคือ การใช้ SliverAppBar ร่วมกับ FlexibleSpaceBar ซึ่งจะทำให้ AppBar ของเราขยายได้ในจังหวะที่เราเลื่อนมากที่สุด  และยังปรับแต่ง Widget ได้อีกด้วย เช่น กำหนด AppBar สามารถขยายจนสุดได้ 200 เมื่อขยายสูงสุดจะสีน้ำเงินเข้ม แต่สีปกติจะเป็นสีฟ้า

a3

 

หรือจะกำหนด AppBar ให้พื้นหลังเป็นรูปภาพก็ได้

a4

 

กำหนดให้แสดงแบบ centerTitle ก็ได้ สังเกตว่า Text จะทำ Animation ย่อขนาดให้อัตโนมัติตามขนาด AppBar

a5

 

สรุป

สรุปจากทั้งสองตอน Sliver เป็นเรื่องของการปรับแต่ง ScrollView ให้ทำงานตามที่เราต้องการใน Flutter ซึ่งการใช้งาน ก็จะต้องเข้าใจเรื่องของ Sliver Delegate ในแบบต่างๆ ซึ่ง Flutter ก็มีรูปย่อของ Sliver ไว้ให้ใช้งานได้ง่ายๆ แต่ที่เราไม่เข้าใจ Sliver เราก็ใช้งาน Widget ที่ใช้งาน Sliver ไม่ได้นั่นเอง