A wrapper for a ScrollView that will enable lazy loading
Add lazy_load_scrollview
dependency to your pubspec.yaml
:
dependencies:
lazy_load_scrollview: 1.3.0
In your Dart code, import package:lazy_load_scrollview/lazy_load_scrollview.dart
Then you can wrap your ListView
, GridView
, RefreshIndicator
etc with the LazyLoadScrollView
. Make sure you add an endOfPageListener
which will receive the call when the bottom of the list has been reached.
import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: LazyLoadScrollView(
onEndOfPage: () => loadMore(),
child: ListView.builder(
itemCount: data.length,
itemBuilder: (context, position) {
return Text("Position $position");
},
),
),
);
}
LazyLoadScrollView(
endOfPageListener: () => loadMore(), // The callback when reaching the end of the list
scrollOffset: 100 // Pixels from the bottom that should trigger a callback
child: Widget, // A subclass of `ScrollView`
);
Run this command:
With Flutter:
$ flutter pub add lazy_load_scrollview
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
lazy_load_scrollview: ^1.3.0
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
import 'package:flutter/material.dart';
import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Lazy Load Demo',
home: new MyHomePage(title: 'Lazy Load Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<int> verticalData = [];
List<int> horizontalData = [];
final int increment = 10;
bool isLoadingVertical = false;
bool isLoadingHorizontal = false;
@override
void initState() {
_loadMoreVertical();
_loadMoreHorizontal();
super.initState();
}
Future _loadMoreVertical() async {
setState(() {
isLoadingVertical = true;
});
// Add in an artificial delay
await new Future.delayed(const Duration(seconds: 2));
verticalData.addAll(
List.generate(increment, (index) => verticalData.length + index));
setState(() {
isLoadingVertical = false;
});
}
Future _loadMoreHorizontal() async {
setState(() {
isLoadingHorizontal = true;
});
// Add in an artificial delay
await new Future.delayed(const Duration(seconds: 2));
horizontalData.addAll(
List.generate(increment, (index) => horizontalData.length + index));
setState(() {
isLoadingHorizontal = false;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: LazyLoadScrollView(
isLoading: isLoadingVertical,
onEndOfPage: () => _loadMoreVertical(),
child: Scrollbar(
child: ListView(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Nested horizontal ListView',
textAlign: TextAlign.center,
),
),
Container(
height: 180,
child: LazyLoadScrollView(
isLoading: isLoadingHorizontal,
scrollDirection: Axis.horizontal,
onEndOfPage: () => _loadMoreHorizontal(),
child: Scrollbar(
child: ListView.builder(
itemCount: horizontalData.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, position) {
return DemoItem(position);
})))),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Vertical ListView',
textAlign: TextAlign.center,
),
),
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: verticalData.length,
itemBuilder: (context, position) {
return DemoItem(position);
},
),
],
),
),
),
);
}
}
class DemoItem extends StatelessWidget {
final int position;
const DemoItem(
this.position, {
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
width: MediaQuery.of(context).size.width,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.grey,
height: 40.0,
width: 40.0,
),
SizedBox(width: 8.0),
Text("Item $position"),
],
),
Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed vulputate orci. Proin id scelerisque velit. Fusce at ligula ligula. Donec fringilla sapien odio, et faucibus tortor finibus sed. Aenean rutrum ipsum in sagittis auctor. Pellentesque mattis luctus consequat. Sed eget sapien ut nibh rhoncus cursus. Donec eget nisl aliquam, ornare sapien sit amet, lacinia quam."),
],
),
),
),
);
}
}
Download details:
Author: quirijngb.com
Source: https://github.com/QuirijnGB/lazy-load-scrollview