Stworzyłem ekran na którym budowana jest dynamicznie lista jakiś elementów.
Po wejściu użytkownik przez 2 sekundy widzi ładowanie po czym pojawiają się 2 pierwsze elementy.
Jeżeli zjedzie scrollem w dół doładowywane są kolejne aż łącznie będzie ich 50.
Problem pojawia się kiedy 2 pierwsze elementy nie zajmują całego ekranu, wtedy nie ma scrolla a co za tym idzie nie ma jak wywołać metody która będzie dociągała kolejne elementy listy.
Czy można zrobić tak, że po wejściu na ekran ładowane są 2 pierwsze elementy a jeśli nie zajmują całego ekranu dociągane są kolejne aż do momentu kiedy scroll się pojawi i użytkownik dalej będzie mógł dociągać kolejne elementy przewijając w dół?
to mój kod:
class MyListScreen extends StatefulWidget {
@override
_MyListScreenState createState() => _MyListScreenState();
}
class _MyListScreenState extends State<MyListScreen> {
final List<String> items = List.generate(50, (index) => 'Element ${index + 1}');
final ScrollController _scrollController = ScrollController();
final int itemsPerLoad = 2;
int loadedItems = 0;
bool isLoading = false;
@override
void initState() {
super.initState();
_loadMoreItems();
_scrollController.addListener(() {
if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
_loadMoreItems();
}
});
}
Future<void> _loadMoreItems() async {
if (!isLoading && loadedItems < items.length) {
setState(() {
isLoading = true;
});
await Future.delayed(Duration(seconds: 2));
setState(() {
loadedItems = min(loadedItems + itemsPerLoad, items.length);
isLoading = false;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Lista Ładowana'),
),
body: ListView.builder(
controller: _scrollController,
itemCount: loadedItems + (isLoading ? 1 : 0),
itemBuilder: (context, index) {
if (index < loadedItems) {
return ListTile(
title: Column(
children: List.generate(3, (i) => Text('Losowy tekst ${Random().nextInt(100)}')),
),
);
} else if (isLoading) {
return ListTile(
title: Center(
child: CircularProgressIndicator(),
),
);
} else {
return Container(
height: 80,
);
}
},
),
);
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
}