Infinite scrolling ListView with BLoC integration for Flutter applications.
MIT License
The Infinite ListView widget is designed to simplify the creation of paginated lists in your Flutter application. This widget integrates seamlessly with the BLoC pattern and allows you to load more items as the user scrolls to the bottom of the list.
flutter_bloc
to manage states and events, ensuring a clean anddividerWidget
.To use the Infinite ListView, you need to provide an instance of your BLoC and an item builder. The BLoC should handle loading initial items and fetching more items as needed.
Extend the InfiniteListBloc
class to create your custom BLoC. Override the fetchItems
method to
define how items are fetched. Here’s an example of a custom BLoC implementation:
import 'package:bloc_infinity_list/bloc_infinity_list.dart';
class MyCustomBloc extends InfiniteListBloc<ListItem> {
@override
Future<List<ListItem>> fetchItems(
{required int limit, required int offset}) async {
try {
await Future.delayed(Durations.long1);
if (offset >= 50) {
return [];
}
return List.generate(
limit, (index) => ListItem(name: 'Item ${offset + index + 1}'));
} on Exception {
rethrow;
}
}
}
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:bloc_infinity_list/bloc_infinity_list.dart';
class MyListPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final MyCustomBloc bloc = MyCustomBloc();
return Scaffold(
appBar: AppBar(title: Text('Infinite ListView Example')),
body: InfiniteListView<ListItem>(
bloc: bloc,
itemBuilder: (context, item) => ListTile(title: Text(item.name)),
dividerWidget: Divider(),
loadingWidget: (context) => Center(child: CircularProgressIndicator()),
errorWidget: (context, error) => Center(child: Text('Error: $error')),
emptyWidget: (context) => Center(child: Text('No items available')),
padding: EdgeInsets.all(16.0),
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
borderColor: Colors.grey,
borderWidth: 2.0,
boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5.0)],
),
);
}
}