I want to have two forms of the UI based on an object value that I get from a Stream Provider.
In the widget, I get the object like this:
final recentPostData = Provider.of<List<RecentPostData>>(context) ?? [];
Then, I want to change the UI based on an attribute of RecentPostData:
return SingleChildScrollView(
child: Column(children: [
(recentPostData[0].attribute != '123') ?
RaisedButton( ... )
: SizedBox( ... ),
The problem: There is a delay of the stream value coming in, thus I get the initial error: "RangeError (index): Invalid value: Valid value range is empty: 0"
I tried to therefore use multiple conditions - hence check first (recentPostData,= []) and then check for the second condition. but this did not work (got the same error).
Do you have any idea how to solve this?
Many thanks in advance!
class _PostFeedState extends State<PostFeed> {
bool isLoading = false; // track if products fetching
@override
Widget build(BuildContext context) {
var recentPostData = Provider.of<List<RecentPostData>>(context) ?? [];
getProducts() async {
if (!hasMore) {
print('No More Products');
return;
}
if (isLoading) {
return;
}
setState(() {
isLoading = true;
});
QuerySnapshot querySnapshot;
if (lastDocument == null) {
querySnapshot = await firestore
.collection('posts')
.orderBy('timestamp', descending: true)
.limit(documentLimit)
.getDocuments();
print(0);
} else {
querySnapshot = await firestore
.collection('posts')
.orderBy('timestamp', descending: true)
.startAfterDocument(lastDocument)
.limit(documentLimit)
.getDocuments();
print(1);
}
if (querySnapshot.documents.length < documentLimit) {
hasMore = false;
}
if (querySnapshot.documents.length == 0) {
setState(() {
hasMore = false;
isLoading = false;
});
return;
}
lastDocument = querySnapshot.documents[querySnapshot.documents.length - 1];
products.addAll(querySnapshot.documents);
setState(() {
isLoading = false;
});
}
if (init) {
getProducts();
setState(() {
init = false;
});
}
void loadNewPosts() {
setState(() {
products = [];
lastDocument = null;
});
getProducts();
}
return SingleChildScrollView(
child: Column(children: [
(recentPostData != []) ? (recentPostData[0].pid != DatabaseServicePosts().postDataFromSnapshot(products[0]).pid) ?
RaisedButton(
onPressed: () {
loadNewPosts();
setState(() {
hasNew = false;
});
},
child: Text('New Posts Available'),
color: Colors.green[300],
)
: SizedBox(height: 0) : SizedBox(height: 0),
products.length == 0
? Center(
child: Text('No Data...'),
) :
Column(children: <Widget>[
...products.map((el) => PostTile (postData: DatabaseServicePosts().postDataFromSnapshot(el))),
],),
(hasMore && !init) ?
RaisedButton(
onPressed: () {
getProducts();
},
child: Text(
'More Posts',
style: TextStyle(color: Colors.white),
),
color: Colors.lightBlue[200],
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(102.0),
side: BorderSide(color: Colors.blueGrey[400])
),
)
: Padding(
padding: const EdgeInsets.all(10.0),
child: Container(child: Text('No more Posts')),
),
isLoading
? Container(
child: Text('Loading'),
)
: Container(),
SizedBox(height: 10),
]
),
);
}
}
I think before building widget checking size of recentPostData can solve your issue. Following code may help You.
recentPostData.length > 0 ? (recentPostData[0].attribute != '123') ?
RaisedButton( ... )
: SizedBox( ... ) : Text(" show Loading indicator")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.