flutter: NotificationListener di TabController untuk scroll tak terbatas
Saya memiliki 4 tab dan saya ingin menambahkan lazy load atau opsi gulir tak terbatas di dalamnya. Sebelumnya saya mencoba dengan Scroll Controller tetapi ketika mencapai akhir. Peristiwa yang terjadi lebih dari sekali. Oleh karena itu, ada beberapa permintaan http Future ke API.
Saya membaca beberapa pertanyaan tentang SO dan menemukan saya mungkin perlu menggunakan NotificationListener. Saya tidak yakin saya perlu mendefinisikannya sekali atau untuk semua tab. Saya tidak tahu cara menggunakan NotificationListener.
class _Searchstate extends State<Search> with SingleTickerProviderStateMixin{
ScrollController _scrollController = new ScrollController();
final _scaffoldKey = GlobalKey<ScaffoldState>();
TabController _controller;
TabBarView(
controller: _controller,
children: [
// Text("TAB ONE CONTENT"),
RefreshIndicator(
onRefresh: refreshData,
child:Container(
decoration: BoxDecoration(
color: Colors.black87,
),
padding: EdgeInsets.only(top: 10, bottom: 5),
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: ListView.builder(
controller: _scrollcontroller,
itemCount: (recommended) ? lists.length : searchlists.length,
itemBuilder: (BuildContext context, int index) {
return buildList1(context, index);
}),
),
),
//Text("TAB TWO CONTENT"),
RefreshIndicator(
onRefresh: refreshData1,
child:Container(
decoration: BoxDecoration(
color: Colors.black54,
),
padding: EdgeInsets.only(top: 10, bottom: 5),
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: ListView.builder(
controller: _scrollcontroller,
itemCount: (nearme) ? lists1.length : searchlists1.length,
itemBuilder: (BuildContext context, int index) {
return buildList2(context, index);
}),
),
),
Di bawah ini adalah buildList tempat saya menggunakan Listview.Builder untuk menampilkan data yang berasal dari database. Saya mencoba menggunakan ScrollController dalam hal ini juga seperti di bawah ini.
Widget buildList1(BuildContext context, int index) {
_scrollController.addListener((){
print(_scrollController.position.pixels);
print(_scrollController.position.maxScrollExtent);
if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
print(recommended);
if(recommended){
//getData();
print('getData()1;');
}
// getData();
}
});
Saya telah menambahkan beberapa kode yang relevan hanya dalam pertanyaan ini karena kode lengkapnya sangat panjang. Beri tahu saya jika Anda membutuhkan lebih banyak kode.
Edit:
Saya mencoba menggunakan pendengar Pemberitahuan dan jika saya mendefinisikannya sekali di sekitar SCaffold maka itu bekerja setidaknya saya dapat melihat acara gulir tetapi saya memiliki 4 tab dan saya tidak yakin bagaimana saya dapat menerapkannya untuk semua. Karena akan cukup sulit untuk mengatur kondisi keempat tab tersebut.
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollNotification>(
child:Scaffold(
---- -- - - - - - More Codes -----
onNotification: (notificationInfo) {
if (notificationInfo is ScrollEndNotification) {
print("scroll");
print("detail:"+notificationInfo.dragDetails.toString());
/// your code
}
return true;
},
);
Kode yang sama saya coba masukkan ke dalam tab tetapi tidak mendeteksi acara gulir.
Jawaban
Saya berhasil membuatnya bekerja tetapi tidak yakin ini adalah cara yang efisien atau tidak. Mungkin orang lain yang mungkin menghadapi masalah serupa.
Kode di bawah ini akan membantu untuk mengidentifikasi tab yang aktif.
void initState(){
_controller = TabController(vsync: this, length: 4);
currentTab = (_controller.index);
_controller.addListener(() {
if(_controller.indexIsChanging) {
print("tab is animating. from active (getting the index) to inactive(getting the index) ");
}else {
//tab is finished animating you get the current index
print(_controller.index);
currentTab = (_controller.index);
_handleTabSelection();
}
});
dan di bawah kode saya telah menambahkan di NotificationListner.
onNotification: (notificationInfo) {
if (notificationInfo is ScrollEndNotification && notificationInfo.metrics.pixels == notificationInfo.metrics.maxScrollExtent) {
print("scroll");
if(currentTab == 0){
if(recommended == true && tab0 == 'Suggested' ){
// getData();
print('fire the 1 event');
}else{
print('Name()1;');
}
}
if(currentTab == 1){
if(nearme == true && tab1 == 'Near Me'){
//getData();
print('fire the 2nd event ');
}else{
}
}
if(currentTab == 2){
if(byRating == true && tab2 == 'By Rating'){
//getData();
print('fire the 3rd event');
}else{
}
}
if(currentTab == 3){
if(byprice == true && tab3 == 'Active'){
//getData();
print('fire the 4 event');
}else{
}
}
/// your code
}
return true;
},
);
Sunting : Karena saya memiliki beberapa ketukan, kode di atas juga aktif di scroll kiri dan kanan. Untuk mencegahnya saya telah mengubah kode menjadi seperti di bawah ini.
if (notificationInfo is ScrollEndNotification && notificationInfo.metrics.axisDirection == AxisDirection.down && notificationInfo.metrics.pixels == notificationInfo.metrics.maxScrollExtent) {