Adding a “Future” api call to json data as infinate scroll Flutter_gallery example project

问题

Attempting to learn the new flutter framework, looks incredibly promising! Gone through all the online demos and I am now attempting to add external data that can infinitely scroll via a new Future data call every 10 items to the flutter_gallery example project in the "pesto" section.

( https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/pesto_demo.dart )

I have been successful in making a "future" call to external data and populating the pesto section of the example, however now I want to take it to the next level and call another 10 items from another future data item when the user scrolls to the 7th item on the list.

Having trouble finding an example to unmask my confusion, wondering if anybody knows of any coded examples that pull apart this problem using the the flutter_gallery example. I'm having trouble understanding the proper structure to do this in the example with the CustomScrollView (there are plenty of ListView examples but that isn't helping) with either syntax or structure or both.

Look forward to any thoughts or code snippets.

回答1:

I also started learning Flutter a couple of weeks back and was facing the same situation and this is the first solution I was able to come up with. The answer can probably be improved let me know how you solve this.

I was able to implement a screen with a ListView that adds more items on scroll using StreamBuilder, BLoC and ListView.builder.

Below is the code snippet for StreamBuilder which I am calling as child: in body: of my Scaffold

StreamBuilder<List<Content>> _getContentsList() {
var page = 1;
return StreamBuilder<List<Content>>(
  stream: bloc.contents,
  initialData: [],
  builder: (context, snapshot) =>
      ListView.builder(itemBuilder: (context, index) {
        print('looping...');
        if (snapshot.data.isNotEmpty) {
          if (index < snapshot.data.length) {
            return ListTile(
              title: Text(
                snapshot.data.elementAt(index).title,
                style:
                    TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              ),
              subtitle: Text(
                snapshot.data.elementAt(index).description,
                style: TextStyle(fontSize: 14.0),
              ),
            );
          } else if (index / 9 >= page) {
            page++;
            print('index: $index, page: $page');
            bloc.index.add(index);
          } else
            return null;
        }
      }),
);}

In BLoC class I am calling an API that takes a starting index and returns 9 list items from that index.

来源：https://stackoverflow.com/questions/49326542/adding-a-future-api-call-to-json-data-as-infinate-scroll-flutter-gallery-examp