Flutter Pinned View on Item List as Navigation Bar
This week i tried to create custom bar navigation that can pinned when user scrolling, actually it easy if you create header, just use SliverAppbar, and SliverListDelegate, but how we can do for footer? Exploring many documentation and web surfing none of that can provided as i expect, Some of that only create footer and header that cant be pinned. So how we can achieve this goals?
Sliver is good, but i prefer use ListView Builder, so i experiment on ListView widget and Stack Widget, Stack widget is layered view that can help use create layered Widget. When we create pinned footer so we should create bottom navigation on the second layer of stack view, the first layer should be ListView.
How create pinned Navigation? the logic is simple create two View, one view for floating and can visible before the index position of listView, but after the index position it must hide. this Index position on ListView will fill the navigation widget same as the floating widget, just reuse the widget. Example we put navigation on ListView, index 20, also put navigation widget on stack view on second layer as Floating Widget. before index 20 the floating navigation will visible to user, but when scroll until item index 20 shown the floating must be hide.
How to achieve this? There is must be listener when user scrolling, we use ScrollController class. The ScrollController class after method that can be use as listener if the position is visible in the screen. ScrollController -> position -> extentAfter. so the controller will notify if the position is alredy shown, if the validation is satisfied it will reflect on the navigation bar to hide and in veca versa. But another problem is the Scrollcontroller cannot get the exact position on ListView, it only provide the scroll pixel based device. So the number of extentAfter cant be use as indicate the position.
How to get the real position based ScrollController? I tried to trial and error how achieve the exact number based on the index position. Actually there are one variable on ScrollController class that can be used to get the formula, 3 variable;
Formula
find the position based on the scroll = item widget height size * index
those formula can use if you need get into position on the listView.
scrollController.jumpTo({item widget height size * index position}). this will trigger to scroll into index position, after scroll done the item will shown on top of screen. There are for we cant get those number as validation for footer, because we need validate item that shown on the bottom of screen. To obtain this
Formula
final diffNav = navigationFooterHeight - itemHeight;final diff = (itemHeight * totalItem) - ((navigationPosition * itemHeight) + diffNav) ;
