marcelgarus / flutter_cached

🧾 Flutter widget allowing easy cache-based data display in a ListView featuring pull-to-refresh and error banners.

Often, apps just display data fetched from some server. This package introduces the concept of fetchable streams. They are just like normal Streams, but can be fetched.

Let's say you want to load Fruits from a server:

final stream = FetchStream.create<Fruit>(() {
  // Do some network request and parse it to obtain a Fruit.
});
stream.listen(print);

// By default, the stream never emits and events. Only after calling fetch(), it
// calls the provided function and emits the result.
stream.fetch();

// Calling fetch again executes the function again and provides the result to
// all listeners. If the function is already running, it's not called again.
stream.fetch();

// After your're done using the stream, dispose it.
await Future.delayed(Duration(seconds: 10));
stream.dispose();

The real magic happens by calling stream.cached(). This creates a cached version of this stream using the provided methods.

final cachedStream = stream.cached(
  save: (fruit) {
    // Save the fruit to storage.
  },
  load: (fruit) async* {
    // Load the fruit from storage and yield it. If there are updates to the
    // fruit, you can also optionally yied them too.
  },
);

And that's about it!

flutter_cached's Issues

Can't refresh data

Using your exemple project, on the CacheBuilder page, using pull-to-refresh OR calling directly controller.fetch() doesn't refresh the data, controller's fetcher function is only call the first time.

fetcher is called on every flutter build()

Since 4.2.5, the fecther is called on every flutter build(), which is not desired. It should only be called on initState, pull-to-refresh or if controller.fetch() is manually called.

Maybe it's because of the fix of #4.

To reproduce using your example, you can add an action button to the CachedBuildDemo's scaffold's appbar :

actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => Navigator.of(context).push(MaterialPageRoute(
              builder: (_) => Scaffold(
                body: Text('nothing'),
              ),
            )),
          )
        ],

When you tap on it, it will open a new page, flutter will call CachedBuildDemo's build(), and fetcher will be called (not desired).

Add animation

Custom Pull-to-refresh

With your current implementation, it seems that if I have a ListView inside a Column for instance (with a footer), the pull-to-refresh doesn't work.

             Column(
                children: <Widget>[
                  Expanded(
                    child: ListView(
                      children: List.generate(20, (index) => Text('$index')),
                      itemExtent: 100,
                    ),
                  ),
                  Text('Footer'),
                ],
              );

And if I set hasScrollBody: false, it throws.

I guess I would have to use the PullToRefersh directly above the ListView, inside the Expanded.
Maybe the pull-to-refresh should be optionnal or external, so we can use our custom behaviour ?
For instance I could want to implement a custom PullToRefresh component like this.

Thanks.

Caching strategies

As @MarcelGarus already said in #5 (comment):

Actually, the current behavior is somewhat intended as a temporary behavior. In the long term, I was thinking about implementing multiple caching strategies that you can choose from (for example, only fetching the first time or fetching only if the last fetch is some amount in the past)

Support limiting the returned list

Use case: In the Schul-Cloud App we want to show a card on the dashboard displaying only the three most recent news entries. We could limit the returned list on UI side but it's more efficient to only load required entitites from the database/network in the first place, especially in combination with pagination.

Skeleton loading

Hi !
When there is no data in cache and when the listview is refreshing, could you display a skeleton text loading with the package https://pub.dev/packages/skeleton_text ?