Lazy loader adalah sebuah wrapper (pembungkus) yang digunakan pada ScrollView yang memungkinkan proses lazy loading. Fungsinya sangat berguna terutama ketika aplikasi ditujukan untuk menampilkan konten yang tak terbatas pada ListView, seperti pada aplikasi jejaring sosial Instagram, Facebook, dan platform lainnya.
Pada artikel ini, kita akan mempelajari proses implementasi Lazy loader pada aplikasi dengan membuat aplikasi sederhana yang menampilkan konten yang tak terbatas. Untuk mempermudah, kita akan menggunakan satu konten dan menggandakannya untuk menampilkan seluruh konten di dalam aplikasi. Berikut adalah langkah-langkah untuk melakukannya:
- Menambahkan dependency ke file pubspec.yaml
- Impor dependency ke file main.dart
- Gunakan StatefulWidget untuk struktur Homepage
- Panggil LazyLoaderScrollView di bagian body dari Homepage
- Desain konten dari Homepage
Mari kita lihat langkah-langkahnya secara detail.
Menambahkan dependency
Lazy loader dapat ditambahkan ke dependency di file pubspec.yaml seperti yang ditunjukkan di bawah ini:
Mengimport dependency
Baris kode berikut dapat ditambahkan ke file main.dart untuk mengimpor dependency lazy_load_scrollview:
import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';Membuat Homepage
Sebuah StatefulWidget dapat dipakai untuk membentuk Halaman Utama (Home Page) yang sederhana untuk aplikasi seperti yang ditunjukkan di bawah ini:
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
const MyApp({super.key});
//root dari aplikasi
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Contoh',
home: MyHomePage(title: 'Nextgen Tutorial'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
List data = [];
int currentLength = 0;
final int increment = 10;
bool isLoading = false;
@override
void initState() {
_loadMore();
super.initState();
}
Future _loadMore() async {
setState(() {
isLoading = true;
});
// dummy delay
await Future.delayed(const Duration(seconds: 2));
for (var i = currentLength; i <= currentLength + increment; i++) {
data.add(i);
}
setState(() {
isLoading = false;
currentLength = data.length;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.green,
),
// contents dari aplikasi akan dibuat di dalam body
body:
),
);
}
} Memanggil LazyLoaderScrollView
LazyLoaderScrollView adalah fungsi yang disediakan oleh paket lazy_load_scrollview yang digunakan untuk mengimplementasikan lazy loading pada aplikasi dan dapat diimplementasikan seperti yang ditunjukkan di bawah ini:
LazyLoadScrollView(
isLoading: isLoading,
onEndOfPage: () => _loadMore(),
child: ListView.builder(
itemCount: data.length,
itemBuilder: (context, position) {
return DemoItem(position);Mendesain Content
Di sini, StatelessWidget dapat dipakai menjadi isi konten teks yang dimuat secara tak terbatas oleh aplikasi seperti yang ditunjukkan di bawah ini:
class DemoItem extends StatelessWidget {
final int position;
const DemoItem(
this.position, {
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.deepOrange,
height: 40.0,
width: 40.0,
),
const SizedBox(width: 8.0),
Text("Item $position"),
],
),
const Text(
"Nextgen Tutorial dibuat dengan tujuan menyediakan solusi-solusi yang ditulis, dipikirkan, dan dijelaskan dengan baik untuk sejumlah pertanyaan yang terpilih."
),
],
),
),
);
}
} Source Code
import 'package:flutter/material.dart';
import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
// Widget ini adalah root dari aplikasi
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Contoh',
home: MyHomePage(title: 'Nextgen Tutorial'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
List data = [];
int currentLength = 0;
final int increment = 10;
bool isLoading = false;
@override
void initState() {
_loadMore();
super.initState();
}
Future _loadMore() async {
setState(() {
isLoading = true;
});
// Menambahkan delay untuk load data
await Future.delayed(const Duration(seconds: 2));
for (var i = currentLength; i <= currentLength + increment; i++) { data.add(i); } setState(() { isLoading = false; currentLength = data.length; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), backgroundColor: Colors.blue, ), body: LazyLoadScrollView( isLoading: isLoading, onEndOfPage: () => _loadMore(),
child: ListView.builder(
itemCount: data.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 Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.deepOrange,
height: 40.0,
width: 40.0,
),
const SizedBox(width: 8.0),
Text("Item $position"),
],
),
const Text(
"Nextgen Tutorial dibuat dengan tujuan menyediakan solusi-solusi"
" yang ditulis, dipikirkan, dan dijelaskan dengan baik untuk "
"sejumlah pertanyaan yang terpilih."),
],
),
),
);
}
}
Output:
Tutorial sebelumnya : Flutter Theme
Tutorial setelahnya : Orientasi UI Di Flutter
Semua Tutorial Flutter : Tutorial Flutter