title: Flutter: Lazy Load data from firestore
body: <p>Note: I have already seen answers on Lazy Load of ListView but those are for custom API not firestore database!</p>
  
  <p>I have a books summary app, App fetches data from my <code>Firebase/Firestore</code> database and then display it using a <code>ListView.builder</code> which is wrapped inside a <code>StreamBuilder</code>.</p>
  
  <p>Now, I want to fetch data lazily, I mean as the user scrolls through the List the required data gets loaded rather than loading data at once and then displaying it lazily. </p>
  
  <pre><code>//The Widget used to display data:
  
  Widget feed() {
    return Container(
      width: deviceWidth,
      height: deviceHeight / 3,
      child: StreamBuilder(
          stream: Firestore.instance
              .collection('feedItem')
              .orderBy('feedId', descending: true)
              .snapshots(),
  
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              int totalLength = snapshot.data.documents.length;
              return ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: totalLength &gt; 10 ? 10 : totalLength,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    width: deviceWidth / 2.5,
                    child: GestureDetector(
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (BuildContext context) =&gt; FeedIntro(
                                    snapshot.data.documents[
                                        ((totalLength - 1) - index)]['feedId'])));
                      },
                      child: Card(
                          child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: &lt;Widget&gt;[
                          Container(
                            // width: 150,
                            height: 150,
                            foregroundDecoration: BoxDecoration(
                                image: DecorationImage(
                                    image: NetworkImage(
                                      snapshot.data.documents[index]['feedImage'],
                                    ),
                                    fit: BoxFit.fill)),
                          ),
                          Center(
                              child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(snapshot.data.documents[index]['title']),
                          )),
                        ],
                      )),
                    ),
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Center(child: Text('Sorry Something went wrong!'));
            } else {
              return Center(
                child: SizedBox(
                  child: CircularProgressIndicator(),
                  width: 50,
                  height: 50,
                ),
              );
            }
          }),
    );
  }
  </code></pre>