การสร้าง TabBar บน Flutter และวิธีทำให้ไม่ต้องรีเฟรสหรือโหลดหน้าใหม่เมื่อเปลี่ยน Tab

ในการสร้าง TabBar บน Flutter จะมีส่วนประกอบ 3 ส่วนคือ

  • TabBar คือ เมนูที่ใช้สำหรับคลิกเปลี่ยนหน้า
  • TabBarView คือ หน้าหรือเนื้อหาที่จะแสดงเมื่อมีการเปิดหรือคลิกที่ Tab นั้นๆ 
  • TabController คือ ตัวเชื่อมระหว่าง TabBar กับ TabBarView เช่นคลิก Tab 1 ก็ให้เปิดหน้า TabBarView 1 ขึ้นมา

ขั้นตอนในการสร้าง TabBar 

1. สร้าง TabBar ขึ้นในตำแหน่งของ AppBar โดยนำโค๊ดด้านล่างนี้ไปใส่

bottom: TabBar(
    labelColor: Color(0xffffffff), // สีของข้อความปุ่มที่เลือก
    unselectedLabelColor: Color(0x55ffffff), // สีของข้อความปุ่มที่ไม่ได้เลือก
    tabs: <Tab>[
        Tab(icon: Icon(Icons.home), text: 'หน้า 1'),
        Tab(icon: Icon(Icons.book), text: 'หน้า 2'),
        Tab(icon: Icon(Icons.more), text: 'หน้า 3'),
    ],
    controller: controller,
),

ตัวอย่างเมื่อใส่ TabBar เสร็จแล้ว จะได้หน้าตาของโค๊ดประมาณนี้


2. สร้าง TabBarView ในตำแหน่งใต้ Body โดยนำโค๊ดด้านล่างนี้ไปใส่ ( อาจจะอยู่ที่ body หรืออยู่ใน child ภายใต้ body ก็ได้ แล้วแต่ว่าเราจะวาง layout ยังไง )

body: TabBarView(
    children: <Widget>[MyPage(title:'หน้า 1'), MyPage(title:'หน้า 2'), MyPage(title:'หน้า 3')],
    controller: controller,
),

ตัวอย่างเมื่อใส่ TabBarView เสร็จแล้ว จะได้หน้าตาของโค๊ดประมาณนี้


3. สร้าง TabController เพื่อควบคุม TabBar และ TabBarView ให้ทำการเชื่อมต่อกัน โดยเพิ่มโค๊ด 3 บรรทัดนี้ในแต่ละส่วนตามรูปภาพด้านล่าง

  • with SingleTickerProviderStateMixin
  • TabController controller;
  • controller = TabController(length: 3, vsync: this);

เท่านี้ TabBar ของเราก็สามารถทำงานเชื่อมต่อกันได้แล้ว แต่เรายังขาด Widget หรือเนื้อหาที่จะมาแสดงใน TabBarView ด้านล่างนี้เป็นตัวอย่างโค๊ด โดยมีการเพิ่มการรับค่า title เพื่อจะใช้แสดงผล และการทำให้หน้า Widget ไม่ต้องรีเฟรสหรือโหลดหน้าใหม่เมื่อเปลี่ยน Tab

  • การรับค่า title
  • การกำหนดให้ไม่ต้องรีเฟรสหน้าใหม่เมื่อมีการเปลี่ยน Tab

  สามารถดาวน์โหลดหรือดูโค๊ดทั้งหมดได้ที่ github.com/ifelsecoth/flutter-tabbar

อ่านบทความฉบับเต็ม