Flutter - 提供者 - 如何根据提供者的值更改 UI？

Question

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),
      ]  
    ),
  ); 

  }
}

Answer 1

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")