Flutter ListView not updating on data change - flutter

Question

I am new in Flutter. Currently learning and developing a flutter project. Here is my code. But my list view is not updating. Advance thanks for pointing out any mistake
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:stacked/stacked.dart';
import 'package:sx_tvapp_app/data/network/models/favourite_item.dart';
import 'package:sx_tvapp_app/ui/views/favourite_items/favourite_items_viewmodel.dart';
class FavouriteItemsView extends StatefulWidget {
final FavouriteItemsViewType type = FavouriteItemsViewType.one;
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _FavouriteItemsViewState();
}
}
class _FavouriteItemsViewState extends State<FavouriteItemsView> {
final String title = 'お気に入り';
List<String> items = ['A', 'B', 'C', 'D', 'E', 'F'];
FavouriteItemPage page;
List<FavouriteItemContent> contents = List();
bool isLoading = false;
FavouriteItemsViewModel viewModel;
void showLoading() {
setState(() {
isLoading = true;
});
}
Future loadData() async {
print('loadData');
print(contents.length.toString());
if (page == null) {
this.viewModel.getFavouriteItemForLoggedOutUser();
showLoading();
} else {
if (page.totalPages > page.number) {
this.viewModel.getFavouriteItemForLoggedOutUser(page: page.number + 1);
showLoading();
}
}
}
void bindModel(FavouriteItemsViewModel viewModel) {
viewModel.pageSubject.listen((value) {
print(value);
page = value;
});
viewModel.favouriteItemSubject.listen((value) {
print(' content is going to be added');
print(value.contents.length);
setState(() {
// contents.addAll(value.contents);
for (int i = 0; i < value.contents.length; i++) {
var commonItem = contents.where((element) {
return element.id == value.contents[i].id;
}).toList();
if (commonItem.length == 0) {
print('item is being addedf');
contents.add(value.contents[i]);
}
}
// contents = contents.toSet().toList();
isLoading = false;
});
});
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return ViewModelBuilder<FavouriteItemsViewModel>.reactive(
viewModelBuilder: () => GetIt.instance.get<FavouriteItemsViewModel>(),
onModelReady: (model) {
this.viewModel = model;
this.bindModel(model);
// this.loadData();
model.getFavouriteItemForLoggedOutUser();
},
builder: (context, viewModel, child) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
children: <Widget>[
Expanded(
child: NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification scrollInfo) {
if (!isLoading &&
scrollInfo.metrics.pixels ==
scrollInfo.metrics.maxScrollExtent) {
loadData();
}
},
child: buildListView(),
),
),
Container(
height: isLoading ? 50.0 : 0,
color: Colors.transparent,
child: Center(
child: new CircularProgressIndicator(),
),
),
],
),
);
},
);
}
Widget buildListView() {
return ListView.builder(
itemCount: contents.length,
padding: EdgeInsets.fromLTRB(0, 9, 0, 9),
itemBuilder: (context, index) {
return buildRow(contents[index]);
});
}
Widget buildRow(FavouriteItemContent content) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 15,
height: 0,
),
//TODO: Handle this after null image url issue is fixed
// CachedNetworkImage(
// fit: BoxFit.fill,
// height: 25,
// width: 25,
// imageUrl: content.channelIconUrl,
// placeholder: (context, url) => CircularProgressIndicator(),
// errorWidget: (context, url, error) => new Icon(Icons.error),
// ),
getImage(content.channelIconUrl, 25, 25),
Container(
width: 9,
height: 0,
),
Container(
child: Text(
content.name,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
letterSpacing: -0.25,
color: Color.fromRGBO(96, 96, 96, 1.0),
),
),
),
],
),
Container(
width: 0,
height: 30,
),
//TODO: Handle this after null image url issue is fixed
// CachedNetworkImage(
// fit: BoxFit.fill,
// height: 211,
// width: double.infinity,
// imageUrl: content.imageUrl,
// placeholder: (context, url) => CircularProgressIndicator(),
// errorWidget: (context, url, error) => new Icon(Icons.error),
// ),
getImage(content.imageUrl, double.infinity, 211),
Container(
width: 0,
height: 13,
),
Padding(
padding: EdgeInsets.fromLTRB(15, 12.5, 15, 9),
child: Text(content.details),
)
],
);
}
Widget getImage(String url, double width, double height) {
if (url != null) {
return CachedNetworkImage(
imageUrl: url,
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Image(
image: AssetImage(
'assets/images/product_detail/product_detail_placeholder.png'),
),
);
} else {
return Image(
width: width,
height: height,
image: AssetImage(
'assets/images/product_detail/product_detail_placeholder.png'),
);
}
}
}
enum FavouriteItemsViewType { one, two, three, four }
The thing I do here is, I request for a get API at the beginning which gives me data for the first page. Then I request again after scrolling down to the bottom. This is a ListView with pagination.

Answer 1

What you would likely want to use is a StreamBuilder which will rebuild whatever it contains when new data arrives from the stream. Streambuilder will become your go to for most data in flutter.
https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html