web analytics

รู้จักกับ Navigation Rail Widget ใน Flutter

สวัสดีครับ วันนี้มาลองเล่นหนึ่งในของใหม่ใน Flutter 1.17 ที่ปล่อยออกมาที่ widget มาใหม่ตัวนึง น่าสนใจสำหรับ material design เรียกว่า Navigation Rail โดย Google Team ซึ่งมันก็คือการแสดงเมนูแบบนึงที่เหมาะกับการแสดงผลที่เมนูต้องสลับไปสลับมาระหว่าง Desktop กับ Mobile บล็อกนี้ ผมก็จะลองเล่นว่าเจ้า Navigation rail มันมีอะไรให้ใช้งานบ้างนะ

เริ่มต้น

การใช้งาน Navigation Rail เท่าที่ลองเล่น ก็คล้ายๆกับ widget ตัวอื่นๆ นะ ก็คือ จะมีตัวหลักกับตัวลูก ตัวหลักคือ NavigationRail และก็มีลูกๆ คือเมนูย่อยๆ เรียกว่า NavigationRailDestination เราก็แค่กำหนด icon , label ให้มัน

ลองรัน

ลองดู property ต่างๆ ที่สามารถใช้ได้

property ที่น่าจะได้ใช้บ่อยๆ คือ labelType มีให้เลือก 3 แบบ คือ none , selected , all

การแสดงผลก็คือจะตามชื่อเลย

แล้วก็การจัดตำแหน่ง เรียกว่า group alignment มีค่าได้ระหว่าง -1 ถึง 1 โดยค่า 0 คือตรงกลาง

อีกอันที่น่าสนใจ คือ extended โดยมันจะเป็นการขยาย NavigationRail ให้เต็ม parent และแสดง label แต่ว่าเราจะต้องกำหนดให้ labelType เป็น none เท่านั้น โดยสามารถกำหนดความกว้างด้วย minExtendedWidth

ซึ่งเจ้า extended น่าจะเป็น mode ที่เอาไว้ใช้งานร่วมกับ action พวก toggle ต่างๆ เช่น ผมทำปุ่ม menu หากกดก็จะ toggle ค่า extended ของ NavigationRail

นอกจากนี้ก็มี leading , trailing ให้เราสามารถเพิ่ม widget ไปที่หัวและท้ายของ
NavigationRail ด้วย

สรุป

บล็อกนี้ก็เป็นการลองเล่นตัว Navigation Rail widget แบบคร่าวๆ ที่มาพร้อมกับ Flutter 1.17 ครับ น่าจะพอเห็นว่ามันทำอะไรได้บ้าง จริงๆเมนูแบบนี้ผมเคยเห็นบ่อยๆใน Windows App UWP เห็นด้วยที่มันเหมาะกับเอามาใช้ร่วมกับ Desktop ที่อนาคตเราน่าจะได้เอามาใช้ใน Flutter Desktop กัน

สำหรับใครที่ยังไม่ได้อ่าน Flutter 1.17 release ของ Flutter Team ลองอ่านได้นะ
https://medium.com/flutter/announcing-flutter-1-17-4182d8af7f8e

และสามารถลองเล่น Navigation Rail ใน Dart Pad ที่ Flutter ทำไว้ให้ได้ในนี้
https://dartpad.dev/b9c6cd345fd1cff643353c1f4902f888