Day 16-สร้าง Bottom Navigation Bar
สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days)
วันนี้จะมาทำ Bottom Navigation Bar อย่างง่ายๆ คือในตัว Bar ด้านล่างจะมีอยู่3ตัวเลือกพร้อมแสดงไอคอน คือ Home, Work, และ Landscape เมื่อผู้ใช้ทำการ tap ก็จะเรียก page หน้านั้นขึ้นมาแสดง ดังรูป
ก่อนอื่นก็ให้เราสร้าง mainโปรแกรมเพื่อเรียก runApp() ที่จะไปเรียก MyApp() ซึ่งเป็นstateful widget class ในส่วน state class เราจะประกาศตัวแปร _selectedPage เพื่อใช้เป็น index สำหรับPageที่ผู้ใช้เลือก โดยค่าเริ่มต้นจะตั้งเป็น0 และ ตัวแปร _pageOptions เพื่อจะเป็นการเรียกไปยังหน้า page ต่างๆ เช่น Home() เพื่อเรียกไปยังหน้า Home Page, Work() เพื่อเรียกไปยังหน้า Work Page และ landscape() เพื่อเรียกไปยังหน้า Landscape Page เป็นต้น ซึ่งเราจะต้องไปทำการสร้างไฟล์ home.dart, work.dart, และ landscape.dart เพื่อที่จะใส่โค๊ดสำหรับแสดงpage หน้านั้นๆด้วย
ที่ไฟล์ main.dart ให้ import ตัว material.dart และไฟล์home.dart,work.dart, และlandscape.dart เข้ามาด้วย
ในไฟล์ main.dart ส่วน build method ของstate class ก็จะreturn ตัว MaterialApp ที่มี home: Property เป็นScaffold โดยส่วนbody: Property จะเป็นการเรียกตัวแปร _pageOptions เพื่อทำการแสดงหน้าpage ที่ผู้ใช้เลือก และมีส่วนbottomNavigationBar: Property ที่จะเรียก BottomNavigationBar widget โดยใน onTap: Property จะเป็นการ setState หน้าที่ผู้ใช้เลือกจากค่า index และในส่วน BottomNavigationBarItem widget จะเป็นการสร้างไอคอนและชื่อสำหรับแต่ละตัวเลือกใน Bottom Navigation Bar
ในไฟล์ home.dart, work.dart, และlandscape.dart จะทำการสร้างstateless widget class โดยตั้งชื่อ Home, Work, และ Landscape ตามลำดับ ซึ่งในส่วนของbuild method ของแต่ละไฟล์จะเหมือนกันคือ return ตัว Container widget ที่มีการแสดงตัวหนังสือบอกชื่อของ page แต่จะมีสีของตัว Container จากcolor: Property ที่แตกต่างกัน ซึ่งแล้วแต่ว่าเราอยากจะแต่งรายละเอียดให้แตกต่างกันมากน้อยแค่ไหน
Support me at:
Ko-fi :https://ko-fi.com/bitesizestory
Buy me a coffee :https://www.buymeacoffee.com/bitesizestory
ติดตามบทความ สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days) ทั้งหมดได้จากลิงค์ด้านล่าง
Day25-สร้าง app สำหรับอัพเดทยอดผู้ติดเชื้อโควิด19 ทั่วโลก
Day24-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่3
Day23-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่2
Day22-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่1
Day21-ใช้ WebView ในการแสดงผลไฟล์ html5 ด้วย webview_flutter_plus package
Day20-ใช้ GridView และการเปลี่ยน interface แนวตั้งและแนวนอน
Day19-ทำ Flip Card ด้วย flip_card package
Day18-สร้าง ListView จากไฟล์ json
Day17-ทำ Splash Screen ง่ายๆด้วย splashscreen package
Day16-สร้าง Bottom Navigation Bar
Day15-สร้าง Animated Container
Day14-สร้าง Page Navigation Animation ง่ายๆ
Day13-สร้างหน้าจอ slideshow ด้วย carousel_slider package
Day12-สร้างBar Graph ด้วย charts_flutter package
Day11-การทำ Animated Bar Graph จากค่าสุ่มอย่างง่ายๆ
Day10-การทำ Bar Graph จากค่าสุ่มอย่างง่ายๆ
Day09-สร้าง Animationให้ Bar Graph
Day08-ทำ OnBoarding Screen ด้วย Package introduction_screen
Day07-สร้างInteractionง่ายๆบน Page Layout
Day04-สร้าง Interaction ให้กับไอคอนและเก็บค่าสถานะ
