★★★★★
#UI·디자인 · claude-code
무한 스크롤 (ListView.builder + pagination)
리스트 스크롤 시 자동으로 다음 페이지 로드.
#pagination#infinite-scroll#firestore
변수 1개 — 여기 채우면 아래 프롬프트에 바로 들어가요
리스트 스크롤 시 자동으로 다음 페이지 로드.
구현:
```dart
class InfiniteListState extends State {
List<Item> _items = [];
int _page = 0;
bool _isLoading = false;
bool _hasMore = true;
late ScrollController _scrollController;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
_scrollController.addListener(_onScroll);
_loadItems();
}
void _onScroll() {
if (_scrollController.position.pixels >=
_scrollController.position.maxScrollExtent - 200) {
if (!_isLoading && _hasMore) _loadItems();
}
}
Future<void> _loadItems() async {
setState(() => _isLoading = true);
final snap = await db.collection('items')
.orderBy('createdAt', descending: true)
.limit(10)
.startAfter([_page * 10])
.get();
if (snap.docs.isEmpty) {
setState(() => _hasMore = false);
} else {
setState(() {
_items.addAll(snap.docs.map((d) => Item.fromDoc(d)));
_page++;
});
}
setState(() => _isLoading = false);
}
@override
Widget build(BuildContext context) {
return ListView.builder(
controller: _scrollController,
itemCount: _items.length + (_isLoading ? 1 : 0),
itemBuilder: (context, index) {
if (index < _items.length) {
return ItemCard(_items[index]);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
}
```
{{COLLECTION_NAME}}에 맞춰 무한 스크롤 적용할까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.