very good infinite list
a very good infinite list widget created by very good ventures.
infinitelist comes in handy when building features like activity feeds, news feeds, or anywhere else where you need to lazily fetch and render content for users to consume.
example
usage
a basic infinitelist
requires two parameters:
itemloader
which is responsible for asynchronously fetching the contentbuilder
which is responsible for returning awidget
given a specific item (result)
import 'package:flutter/material.dart';
import 'package:very_good_infinite_list/very_good_infinite_list.dart';
void main() => runapp(myapp());
future<list<string>?> _itemloader(int limit, {int start = 0}) {
return future.delayed(
const duration(seconds: 1),
() => list.generate(limit, (index) => 'item ${start + index}'),
);
}
class myapp extends statelesswidget {
@override
widget build(buildcontext context) {
return materialapp(
home: scaffold(
appbar: appbar(title: text('infinite list')),
body: infinitelist<string>(
itemloader: _itemloader,
builder: infinitelistbuilder<string>(
success: (context, item) => listtile(title: text(item)),
),
),
),
);
}
}
customizations
infinitelist
infinitelist
has multiple optional parameters which allow you to customize the loading and error behavior.
infinitelist<string>(
itemloader: _itemloader,
builder: infinitelistbuilder<string>(...),
bottomloader: (context) {
// return a custom widget which will be rendered at the bottom of the list
// while more content is being loaded.
},
errorloader: (context, retry, error) {
// return a custom widget which will be rendered when `itemloader`
// throws a generic `exception` and there is prior content loaded.
// `retry` can be invoked to attempt to reload the content.
},
// how long to wait between attempts to load items.
// defaults to 100ms.
debounceduration: duration.zero,
// what percentage of the screen should be scrolled before
// attempting to load additional items.
// defaults to 0.7 (70% from the top).
scrolloffsetthreshold: 0.5,
);
infinitelistbuilder
infinitelistbuilder
has multiple optional parameters which allow you to render different widgets in response to various states that the infinitelist
can be in.
infinitelist<string>(
itemloader: _itemloader,
builder: infinitelistbuilder<string>(
empty: (context) {
// return a custom widget when `itemloader` returns an empty list
// and there is no prior content.
},
loading: (context) {
// return a custom widget when `itemloader` is in the process of
// fetching results and there is no prior content
},
success: (context, item) {
// return a custom widget when `itemloader` has returned content.
// here item refers to a specific result.
// this builder will be called multiple times as different results
// come into view.
},
error: (context, retry, error) {
// return a custom widget when `itemloader` throws an `infinitelistexception`.
// `error` will also be called when `itemloader` throws any `exception`
// if there is no prior content.
},
),
);
refer to the example to see both basic and complex usage of infinitelist
.
Comments are closed.