flutter_cached 4.0.0 flutter_cached: ^4.0.0 copied to clipboard
🧾 Flutter widget allowing cache-based data display featuring swipe-to-refresh and an error banner.
When building an app that caches data, there are many special cases to think about.
For example, according to the Material Design guidelines, you need to worry about displaying offline data, handling swipe to refresh, showing error banners and displaying empty states.
This package aims to make implementing cached Flutter apps as easy as possible.
Usually, the frontend asks the backend to fetch data and the backend then offers a continuous Stream
of data to your frontend.
When listening to bare-bone streams in Dart, you usually have to work with AsyncSnapshot
s quite often.
This package offers a new, augmented type of communication path between backend and frontend designed around the providing of cached data.
+----------+ +----+
| business +-----------------+ updates | UI |
| logic | CacheController |==========>| |
| | |<==========| |
| +-----------------+ fetch() | |
| | | |
| +-----------------+ updates | |
| | CacheController |==========>| |
| | |<==========| |
| +-----------------+ fetch() | |
+----------+ +----+
The communication: CacheUpdate
#
This type provides not only data or an error (like a normal AsyncSnapshot
), but also contains information about whether data is still being fetched. Also, every error is accompanied by a stack trace.
For comparison, here are the possible states of the AsyncSnapshot
:
no data | has data | |
---|---|---|
no error | nothing | with data |
has error | with error | - |
Here are the possible states of a CacheUpdate
:
no data | has data | ||
---|---|---|---|
fetching | no error | loading | cached |
fetching | has error | - | - |
not fetching | no error | initial | success |
not fetching | has error | error | error but cache |
Now that looks like an upgraded version of AsyncSnapshot
!
The data layer #
CacheController
s glue together the logic for fetching data with the UI.
You can call fetch
on these controllers to fetch data. And you can call updates
to get a stream of CacheUpdate
s.
There are currently two types of CacheController
s:
- The
SimpleCacheController
accepts three functions:fetcher
,saveToCache
andloadFromCache
. Whenfetch
is called, it simultaneously calls thefetcher
and theloadFromCache
function. IfloadFromCache
returns first, it sends out aCacheUpdate
containing the cached data. When finally thefetcher
returns, it sends out anotherCacheUpdate
containing the actual data. It also passes the data tosaveToCache
. - The
PaginatedCacheController
is aCacheController
specific toList
s of items. It works just like theSimpleCacheController
except that thefetcher
returns both a list of items as well as aPaginationState
(this can be any class that implementsisDone
).
Next to thefetch
method, thePaginatedCacheController
also has afetchMore
method, which calls thefetcher
again, passing in the last state it returned.
By saving the offset or a pagination token or something similar in thePaginationState
, it's quite easy for clients to implement pagination.
Here's an example of how each of these controllers work:
// A simple controller asking the International Chuck Norris Database for
// jokes. The second fetch call causes a joke to be immediately printed.
// (Although this is not that great of an example, because the jokes are
// non-deterministic.)
final controller = SimpleCacheController<String>(
fetcher: () async {
final response = http.get('http://api.icndb.com/jokes/random/');
return json.decode(response)['value']['joke'];
},
saveToCache: (joke) async {
await File('cache.txt').writeAsString(joke);
},
loadFromCache: () async {
return await File('cache.txt').readAsString();
},
);
controller.updates.forEach(print);
await controller.fetch();
await controller.fetch();
class MyPaginationState implements PaginationState {
MyPaginationState({this.offset, this.isDone});
final int offset;
final bool isDone;
}
// A paginated controller that requests an API with an increasing offset.
final controller = PaginatedCacheController<String, int>(
fetcher: (state) async {
final response = json.decode(http.get('…?offset=${state.offset}')).
final items = response['items'].cast<String>().toList();
return PaginationResponse(
items: items,
state: MyPaginationState(
offset: state.offset + items.length,
isDone: items.isEmpty,
),
);
},
saveToCache: (data) => …;
loadFromCache: () => …,
);
controller.updates.forEach(print);
// Fetches data and some more data.
await controller.fetch();
await controller.fetchMore();
await controller.fetchMore();
// Re-fetches data. Displays the cached data as long as the Future is still
// loading.
await controller.fetch();
await controller.fetchMore();
The UI layer #
CachedRawBuilder
#
Because parsing Stream<CacheUpdate<T>>
is tedious, there's an equivalent to Flutter's built-in StreamBuilder
that makes reacting to CacheUpdate
s easy:
CachedRawBuilder(
controller: controller,
builder: (context, update) {
return Container(color: update.hasData ? Colors.green : Colors.red);
},
),
CachedBuilder
#
Often, CacheUpdate
s are handled similarly.
The CachedBuilder
provides several builder for special cases:
// The CachedBuilder supports pull-to-refresh out of the box.
CachedBuilder(
controller: controller,
loadingScreenBuilder: (context) => …,
// When an error occurs during fetching but there is cached data, the data is
// still shown but an error banner is displayed at the top.
errorBannerBuilder: (context, error, stackTrace) => …,
// When there's no cached data and an errors occurs, it's shown in
// full-screen.
errorScreenBuilder: (context, error, stackTrace) => …,
// There is data to show (either cached data or live data).
builder: (context, data) {
return Center(child: Text(data));
},
),
Note: By default, the
CachedBuilder
assumes that thebuilder
returns a scrollable widget, like aListView
orGridView
. If that's not the case, you need to sethasScrollBody
tofalse
in order for the swipe to refresh to work.
PaginatedListView
#
Quite often, the cached data is a paginated list. This view takes care of loading more items.
And that's it! More description coming soon!