Flutter: BottomNavigationBar[EP: 3]with floating button look more friendly.

จากตัวอย่างที่แล้วใน Ep2 ที่เราได้ BottomBar with Floating button แล้ว แต่ถ้าเอามาวาง onTop กันตรงกลาง แลดูไม่สวยเลย เพราะเป็นการวางซ้อนกับปุ่มด้านหลัง ทำให้กดปุ่มด้านหลังยากกว่าเดิม

ฉะนั้นเราลองมา refactor code และจัดปุ่มให้ดูมีรสนิยมมากขึ้นดีกว่า

https://tenor.com/view/like-what-what-do-you-mean-tell-me-more-interested-matthew-rhys-gif-14901655

1. อันดับแรก 3 ปุ่มมันดูไม่ balance ลองเปลี่ยนให้เป็นสี่ปุ่มดีกว่า

{
  'icon': Icon(Icons.settings),
  'label': 'Settings',
  'body': TabSettings(),
},

เพิ่ม tab ‘Settings’ ขึ้นมา

2. แต่ในการเพิ่ม notch ระหว่าง floating button และ navigation bar ไม่สามารถทำได้ เพราะยังไม่มี property รองรับ จึงต้องทำการเปลี่ยนจาก BottomNavigationBar() ไปใช้ BottomAppBar() แทน

ซึ่ง items ด้านในเราจะต้อง custom ขึ้นมาเอง ไม่มีมาให้เหมือนกับ BottomNavigationBar()

code ในส่วนของ button ที่มีใน navigation bar

ซึ่ง button แต่ละตัวได้มีการ custom ขึ้นมาเองเพื่อให้เหมือนกับการใช้ BottomNavigationBar()

Widget ที่ return ออกมาเป็น button ซึ่งเล่นท่ายากนิดหน่อย

มาถึงขั้นตอนนี้เราก้อจะได้ BottomNavigationBar ในแบบที่เราได้ customize ขึ้นมาเองแล้ว ซึ่ง floating button ตรงกลางก็ onTop แบบก่อนหน้านนี้แล้ว (มี notchMargin ให้ดู friendly ขึ้น)

Implement all buttons with floating button (also have notch margin between both) แต่ page body ยังไม่เปลี่ยนไปตามปุ่มที่กด

ถัดไปเราจะเรียกใช้ body ให้ตรงกับการเลือกที่ button แต่ละตัว

กำหนดให้กดปุ่มแต่ละปุ่ม จะส่ง index เข้าไป

index ที่ส่งเข้ามา จะถูก assign เข้า selectedIndex และนำไปใช้ในการเรียก widget มาแสดงใน bode:

ถึงขั้นตอนนี้จะได้ body ที่เปลี่ยนแปลงค่าไปตามปุ่มบน bottom bar แล้ว

Body of each pages change accordingly to button in navigation bar.

อันนี้คือ sample ของ tab ที่ button เรียกมาโชว์ใน body

ตัวอย่างของ TabHome() เมื่อกดที่ Home button.

ตัวอย่างของ code ที่แสดงแต่ละ tab ได้หมด

ถัดไปจะลองมาสร้าง Animation เล็กๆจาก Floating button ตรงกลาง โดยใช้ AnimatedContainer()

บริเวณ body เปลี่ยน layout เป็น Stack() และเพิ่ม Align() + AnimatedContainer()

เมื่อมีการกดปุ่ม จะทำงานเป็น toggle

สุดท้ายนี่คือ small animation together with button navigation bar.

Bottom navigation bar with floating button and animated Container.

ตัวอย่างของ code ที่แสดงพร้อม animation in floating button.

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

Referance:

https://medium.com/@jb.padamchopra/implementing-a-bottom-app-bar-with-floating-action-button-flutter-463560e1324