Flutter: Bottom NavigationBar [EP: 1]

https://medium.com/codechai/flutter-6-bottom-navigation-38b202d9ca23

Widget ตัวนี้คือ material widget ที่มากับ Flutter อยู่แล้วไม่ต้องติดตั้งอะไรเพิ่ม โดยปกติในการใช้งานจะใช้ร่วมกับ Scaffold ซึ่งมี argument ให้เรียกได้อยู่แล้ว ไปทดสอบกันเลย

เริ่มแล้วก้อสร้าง Scaffold layout และนำ example code นี้ไปใส่แล้วลองรันกันเลย

ผลลัพธ์ที่ได้จะเป็นลักษณะนี้

มี 3 tabs ให้เลือกได้

BottomNavigationBar นี้มี 2 attribute ที่สำคัญคือ
1. type
2. items

type — จะมีให้เลือก 2 อย่างคือ fixed กับ shifting โดยถ้าเราเลือก fixed type ปุ่มข้างล่างทั้งหมดจะไม่มี effect อะไร (ไม่มีการขยับ, ขยาย)เมื่อเราคลิก แต่ถ้าเลือก shifting จะมี animation เมื่อเราคลิกที่ button.

type: BottomNavigationBarType.fixed,  // ไม่มี effect 
type: BottomNavigationBarType.shifting,  // มี effect

items — สำหรับ attribute นี้ เราสามารถ pass BottomNavigationBarItem objects เข้าไปถ้า bottom navigation ของเราต้องการมีอย่างน้อย 2 ปุ่ม

items: const <BottomNavigationBarItem>[
  BottomNavigationBarItem(
    icon: Icon(Icons.home),
    label: 'Home',
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.business),
    label: 'Business',
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.school),
    label: 'School',
  ),
],

ซึ่งใน class BottomNavigationBarItem ก็มี required attributes อยู่ 2 อันคือ icon และ text ซึ่งตอนนี้ text ยังไม่ใช่ optional เรายังไม่สามารถ remove text ออกไปได้ ถ้าไม่ต้องการ text ก็ให้ทำเป็น empty text แทน

อธิบายการเชื่อมโยมใน code แต่ละส่วน

เราสามารถ refactor code เพื่อให้จัดการได้ง่ายโดยสร้างเป็นชุด List ของข้อมูล tab ทั้งหมดที่จะนำมาแสดง และตัว body ที่จะโชว์ในแต่ละ tab ด้วย เพื่อให้แยกทำแต่ละหน้าได้ แบบนี้

ภาพปลากรอบ เมื่อ refactor ให้จัดการได้ง่ายขึ้น

Refactor code to make it easier to implement.

แยก body ของ แต่ละ tab ออกมาเป็นแต่ละหน้า เพื่อให้จัดการได้ง่าย

PS:
.elementAt(int index) เป็น method ของ List ที่จะ return เป็น index ของ element นั้นๆ เช่น

List items = [1, 2, 3, 4, 5];
main() {
  print(items.elementAt(0)); // มีค่าเทียบเท่า items[0] 
}
// -------- output --------------
// 1

แล้วพบกันใหม่ครับ