easy_infinite_scroll

Description:

easy infinite scroll

Easy Infinite Scroll #

A simple, but flexible and powerful Flutter plugin to handle infinite scroll lists
Preview #

ToDo #

Add retry widget on error
Add refresh on empty list

Usage #
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
easy_infinite_scroll: ^1.0.0
copied to clipboard
You can create a simple autocomplete input widget with the following example:
import 'package:easy_infinite_scroll/easy_infinite_scroll.dart';
import 'package:flutter/material.dart';

void main() {
runApp(const MyHomePage());
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _pageCount = 1;

Future<List<Color>> _fetchData() async {
List<Color> _colors = [];

if (_pageCount <= 3) {
await Future.delayed(const Duration(milliseconds: 1500)).then((value) {
_colors = List.generate(15, (index) {
return Colors.pink;
});
setState(() => _pageCount++ );
});
}

return _colors;
}

Future<List<Color>> _refreshData() async {
List<Color> _colors = [];

await Future.delayed(const Duration(milliseconds: 1500)).then((value) {
_colors = List.generate(15, (index) {
return Colors.pink;
});
// We loaded the first part of data and want to load the second part on next fetch
// If we set this to 1, it will fetch the first piece of data twice
setState(() => _pageCount = 2 );
});

return _colors;
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Example'),
),
body: EasyInfiniteScroll<Color>(
hasMoreData: _pageCount <= 3,
onFetch: () async => _fetchData(),
onRefresh: () async => _refreshData(),
widgetBuilder: (data) {
return Container(
width: double.infinity,
height: 50,
margin: const EdgeInsets.all(5),
decoration: BoxDecoration(
color: data,
borderRadius: BorderRadius.circular(5)
)
);
}
)
)
);
}
}
copied to clipboard

In the example above we created a list that has a type of Color, but you can use any other model or datatype you prefer.

API #



Attribute
Type
Required
Description
Default value




onFetch
Future<List<T>> Function()
✔️
A Future method that returns a List with the selected data type on fetch



onRefresh
Future<List<T>> Function()
✔️
A Future method that returns a List with the selected data type on refresh



hasMoreData
bool
✔️
A bool to determine if the lists has more data to be loaded



widgetBuilder
Widget Function(dynamic data)
✔️
A function that that receives values for the current data index and returns a widget that can be filled using the param data



loaderBuilder
Widget? Function()?
❌
A function that can be used to create a widget to display a custom loader



noMoreItemsBuilder
Widget? Function()?
❌
A function that can be used to create a widget to display a custom No more items widget



noItemsBuilder
Widget? Function()?
❌
A function that can be used to create a widget to display a custom No items widget



noMoreItemsText
String
❌
A String param that can be changed to display a different message when there are no more items to load
No more items


noItemsText
String
❌
A String param that can be changed to display a different message when there are no items to load
No items



Issues & Suggestions #
If you encounter any issue you or want to leave a suggestion you can do it by filling an issue.
Thank you for the support! #