Flutter: Hide or show appbar and bottom navigation bar on scrolling วิธีเท่ๆในการเพิ่มพื้นที่ใช้งานแอฟ

เรามักจะเห็นหลายๆแอฟที่ทำงานแบบนี้คือ

Scroll up (ไถขึ้น) = จะมีการซ่อน AppBar และ BottomBar เพื่อเพิ่มพื้นที่ในการดูข้อมูลด้านล่าง เช่น Youtube, Chat.
Scroll down (ไถลง) = เมื่อไถลงจึงมีการเรียก AppBar และ ButtomBar กลับมา

Scroll up to hide Appbar and ButtomBar to expand area for seeing data.

มาดูวิธีการทำกันได้เลยคับ (ไม่ต้องใช้ package เพิ่มใดๆ)

Explain about how to create animated hiding of AppBar and BottomNavigatorBar.

Code:

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

GRASSROOT ENGINEER

References:
https://stackoverflow.com/questions/55033031/flutter-how-to-hide-bottomappbar-on-scroll-when-using-sliver-widgets

https://medium.com/nonstopio/hide-or-show-app-bar-and-bottom-navigation-bar-while-scrolling-in-flutter-3994f78e52c0