Flutter’da RefreshIndicator
widget’ı, genellikle bir ListView
veya GridView
gibi kaydırılabilir bir liste içeriğini yenilemek için kullanılır. Kullanıcı ekranı aşağıya doğru çektiğinde bir yükleme animasyonu gösterir ve belirtilen bir fonksiyonu tetikler. Bu fonksiyon genellikle veri kaynağınızdan yeni verileri çekmek için kullanılır. İşlem tamamlandığında, yükleme animasyonu sona erer ve kullanıcıya güncellenmiş içerik sunulur.
Temel bir RefreshIndicator
kullanımı şöyle görünebilir:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<String> items = List.generate(20, (i) => "List item $i");
Future<void> refreshList() async {
await Future.delayed(Duration(seconds: 2));
setState(() {
items.addAll(List.generate(5, (i) => "New list item $i"));
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Refresh Indicator Demo'),
),
body: RefreshIndicator(
onRefresh: refreshList,
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) => ListTile(
title: Text(items[index]),
),
),
),
);
}
}
Bu örnekte, RefreshIndicator
bir ListView.builder
ile kullanılmıştır. onRefresh
özelliği, kullanıcı ekranı aşağıya çektiğinde çağrılacak refreshList
fonksiyonuna bağlanmıştır. Bu fonksiyon asenkron bir işlemi temsil eder ve genellikle sunucudan yeni veriler çekmek için kullanılır. Burada, demo amaçlı 2 saniye bekledikten sonra yeni öğeler listeye eklenir ve setState
ile widget ağacı yeniden oluşturulur.
RefreshIndicator
widget’ını kullanırken dikkat edilmesi gereken önemli bir nokta, çocuğunun kaydırılabilir bir widget olması gerektiğidir (örneğin, ListView
, GridView
, CustomScrollView
). Eğer doğrudan bir kaydırılabilir widget kullanmıyorsanız, çocuğu bir Scrollable
widget ile sarmalamanız gerekebilir.
Bu Yazıya Tepkin Ne Oldu ?
YORUMLAR