Print
Details: Category: บทความ Flutter | Published: 09 February 2020 | Hits: 890

อะไร ? คือ Botton Navigation Bar

Screen Shot 2563 02 08 at 031709

Botton Navigation Bar จะอยู่ด้านล่าง คลิกที่ Icon จะเปลี่ยน State ได้ครับ

Screen Shot 2563 02 08 at 031713

นี่ครับ รูปเต็มๆ ของ Bottom Navigation Bar

Screen Shot 2563 02 08 at 031729

แล้ว ทำ Botton Navigation Bar อย่างไร ? สิ่งแรกครับ ต้องทำ ไฟร์ dart สามไฟร์ แบบนี่ก่อน จากตัวอย่าง account.dart, braket.dart, main_page.dart

Screen Shot 2563 02 08 at 031745

แต่ละไฟร์ วาดโค้ดอารมณ์ นี่ครับ

Screen Shot 2563 02 08 at 031804

กลับมาที่ State หลักที่เราจะแปะ Bottom Navigation Bar กำหนดตัวแปรแบบ Array ใส่สมาชิคเป็น Widget ของ Object ของไฟร์ Dart ทั้งสามที่เราทำขึน และ กำหนด Index มีค่าเริ่มต้นเป็น 0 ไว้ครับ (เพราะเราจะเอาหน้า main_page.dart เป็นหน้าแรกไง)

Screen Shot 2563 02 08 at 031824

 

สร้าง เมธอด ที่ Return ค่ากลับเป็น BottonNavigationBarItem ทั้งสามอันแบบนี่

Screen Shot 2563 02 08 at 031837 

สร้างเมธอด ที่ Return ค่ากลับ เป็น BottomNavigationBar แบบนี้

Screen Shot 2563 02 08 at 031847

นำไปประกอบใน เมธอด build และ ลอง flutter run

Screen Shot 2563 02 08 at 031713

 จะได้แบบนี่ครับ ลองทำตามดูนะครับ แต่ถ้าไม่ได้อย่างไร ? การทำ Botton Navigatin Bar เป็นหัวข้อการทำ Workshop Flutter กับมาสเตอร์ อึ่ง สนใจ หาเวลา สะดวกๆ มาสั่ก 2 วันครับ รับรอง Flutter ไม่ยากอย่างที่คิดครับ

ดูเพิ่มเติมที่

https://www.androidthai.in.th/private-project-android-flutter-course.html