scroll_infinity

Description:

scroll infinity

Scroll Infinity #
Installation #
Run this command:
flutter pub add scroll_infinity
copied to clipboard
Usage Example #
Here are some examples of how to use the package to create a list with infinite scrolling:
Vertical:
import 'package:flutter/material.dart';
import 'package:scroll_infinity/scroll_infinity.dart';

class Example extends StatefulWidget {
const Example({super.key});

@override
State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
static const _maxItems = 20;

@override
Widget build(BuildContext context) {
return Scaffold(
body: ScrollInfinity(
maxItems: _maxItems,
loadData: (pageKey) async {
await Future.delayed(
const Duration(
seconds: 2,
),
);

return List.generate(_maxItems, (index) {
return _maxItems * pageKey + index + 1;
});
},
itemBuilder: (value, index) {
return ListTile(
title: Text('Item $value'),
subtitle: const Text('Subtitle'),
trailing: const Icon(
Icons.keyboard_arrow_right_rounded,
),
);
},
),
);
}
}
copied to clipboard
Horizontal:
import 'package:flutter/material.dart';
import 'package:scroll_infinity/scroll_infinity.dart';

class Example extends StatefulWidget {
const Example({super.key});

@override
State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
static const _maxItems = 6;

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 64.0,
child: ScrollInfinity(
scrollDirection: Axis.horizontal,
maxItems: _maxItems,
loadData: (pageKey) async {
await Future.delayed(
const Duration(
seconds: 2,
),
);

return List.generate(_maxItems, (index) {
return _maxItems * pageKey + index + 1;
});
},
itemBuilder: (value, index) {
return Center(
child: SizedBox(
width: MediaQuery.sizeOf(context).width * 0.5,
child: ListTile(
onTap: () {},
title: Text('Item $value'),
subtitle: const Text('Subtitle'),
trailing: const Icon(
Icons.keyboard_arrow_right_rounded,
),
),
),
);
},
),
),
),
);
}
}
copied to clipboard

With Interval #
Intervals are identified when the value of itemBuilder is null.
To allow the value of itemBuilder to be nullable, facilitating the verification of the value, use ScrollInfinity with the expected value type followed by ?.
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:scroll_infinity/scroll_infinity.dart';

class Example extends StatefulWidget {
const Example({super.key});

@override
State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
static const _maxItems = 20;
final _random = Random();

@override
Widget build(BuildContext context) {
return Scaffold(
body: ScrollInfinity<int?>(
maxItems: _maxItems,
interval: 2,
loadData: (pageKey) async {
await Future.delayed(
const Duration(
seconds: 2,
),
);

if (_random.nextInt(4) == 0) {
return null;
}

return List.generate(_maxItems, (index) {
return _maxItems * pageKey + index + 1;
});
},
itemBuilder: (value, index) {
if (value == null) {
return const SizedBox(
height: 60.0,
child: Placeholder(),
);
}

return ListTile(
title: Text('Item $value'),
subtitle: const Text('Subtitle'),
trailing: const Icon(
Icons.keyboard_arrow_right_rounded,
),
);
},
),
);
}
}
copied to clipboard
With Loader #
Add custom loading for initial items.
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:scroll_infinity/scroll_infinity.dart';

class Example extends StatefulWidget {
const Example({super.key});

@override
State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
final _notifier = ScrollInfinityInitialItemsNotifier<int?>(null);

static const _maxItems = 20;
final _random = Random();

Future<void> _initLoader() async {
_notifier.value = await _loadData(0);
}

Future<List<int>?> _loadData(int pageIndex) async {
await Future.delayed(
const Duration(
seconds: 2,
),
);

if (_random.nextInt(4) == 0) {
return null;
}

return List.generate(_maxItems, (index) {
return _maxItems * pageIndex + index + 1;
});
}

@override
void initState() {
_initLoader();

super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: ScrollInfinityLoader(
notifier: _notifier,
scrollInfinityBuilder: (items) {
return ScrollInfinity<int?>(
maxItems: _maxItems,
disableInitialRequest: true,
initialPageIndex: 1,
initialItems: items,
interval: 2,
loadData: _loadData,
itemBuilder: (value, index) {
if (value == null) {
return const SizedBox(
height: 60.0,
child: Placeholder(),
);
}

return ListTile(
title: Text('Item $value'),
subtitle: const Text('Subtitle'),
trailing: const Icon(
Icons.keyboard_arrow_right_rounded,
),
);
},
);
},
),
);
}
}
copied to clipboard
Properties #

scrollDirection: Defines the scrolling direction of the list. Can be Axis.vertical or Axis.horizontal.

scrollDirection: Axis.vertical,
copied to clipboard

scrollbars: Shows scrollbars if true. Default is false.

scrollbars: true,
copied to clipboard

padding: Specifies the internal padding of the list.

padding: EdgeInsets(8.0),
copied to clipboard

disableInitialRequest: Disables the initial data request if set to true. Default is false.

disableInitialRequest: true,
copied to clipboard

initialPageIndex: Initial page index. Default is 0.

initialPageIndex: 1,
copied to clipboard

enableRetryOnError: Determines if retrying to load data after an error is enabled. Default is true.

enableRetryOnError = false,
copied to clipboard

error: Widget used to display custom content when an error occurs.

error: Text('Error message'),
copied to clipboard

header: Listing header.

header: HeaderWidget(),
copied to clipboard

initialItems: Specifies the initial items to be displayed in the list.

initialItems: <Widget>[
// items
],
copied to clipboard

interval: Specifies the range in which the null value is passed.

interval: 20,
copied to clipboard

loading: Allows passing a custom loading component.

loading: LoadingWidget(),
copied to clipboard

loadingStyle: Defines the style of the CircularProgressIndicator. Use this property to customize the appearance of the default loading indicator.

loadingStyle: CircularProgressIndicator(
color: Colors.blue,
strokeWidth: 8.0,
),
copied to clipboard

maxItems: Specifies the maximum number of items per request. This will be used to determine when the list reaches the end.

maxItems: 20,
copied to clipboard

loadData: Function responsible for loading the data. It should return a list of items.

loadData: (pageIndex) async {
// Logic to load the data
},
copied to clipboard

separatorBuilder: Builds the separator component between the items in the list. Use this property to add custom dividers between the items.

separatorBuilder: (context, index) {
return Divider(
color: Colors.grey,
height: 1.0,
);
},
copied to clipboard

itemBuilder: Builds the items in the list. This function should return the widget that represents each item in the list.

itemBuilder: (value, index) {
final item = items[index];

return ListTile(
title: Text(item.title),
subtitle: Text(item.subtitle),
);
},
copied to clipboard
Author #
This Flutter package was developed by Dário Matias.
Donations #
Help maintain the project with donations.