Flutter: Bottom NavigationBar[EP: 2] with floating button.

หลังจากที่ EP1: ตรงนี้ เราได้ Bottom Navigation Bar ขึ้นมาใช้งานแล้ว เราจะลองมา implement เพิ่มในส่วนของ floating button กันดูคับ

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

Floating button คือ ปุ่มที่เสมือนลอยอยู่บน content ซึ่งปกติใน Scaffold จะมีให้ใช้งานในชื่อ Scaffold.floatingActionButton field.

ในที่นี้เราจะลองนำมาใช้ร่วมกับ bottomBar ซึ่งมีแนวทางในการใช้อยู่ 2 แบบคือ

1. เพิ่มปุ่มให้อยู่เหนือ (above) แถบ navigation bar
   คือ ด้านบนของ bottom bar แต่ไม่ซ้อนกัน
2. เพิ่มปุ่มให้ลอยอยู่บน (on top) แถบ navigation bar
   ซึ่งซ้อนกันด้วย

ต่างกันยังไงเรามาดูเลยดีกว่า

จาก code ของ bottom navigation bar ครั้งก่อน ให้เราเพิ่มในส่วนของ floatingActionButton เข้าไป (ซึ่งเป็น attribute ของ Scaffold คับ)

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: new FloatingActionButton(
  onPressed: () {
    _incrementTab(1);
  },
  tooltip: 'Increment',
  child: new Icon(Icons.add),
),

จาก code ด้านบนจะเป็นการเพิ่ม float button เข้าไป เมื่อมีการกดก็จะเรียก function _incrementTab(1) โดยส่ง 1 เข้าไป หน้าตาของ ui จะเป็นแบบนี้

1. FloatingActionButtonLocation.centerDocked

centerDocked แบบนี้เรียกว่า on Top ของ bottom bar.

2. FloatingActionButtonLocation.centerFloat

centerFloat

3. FloatingActionButtonLocation.endDocked

endDocked

4. FloatingActionButtonLocation.endFloat

endFloat คือ ตัวอย่างของ example code เลย เวลาสร้าง project

5. FloatingActionButtonLocation.endTop

endTop

จริงๆแล้ว มี property ให้เราเลือกวางในตำแหน่งต่างๆได้อีกมาก

Locations ต่างๆของ floating button.

Example code that used in demo.

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