★★★★★
#UI·디자인 · claude-code
Pull-to-Refresh (당겨서 새로고침)
리스트에서 아래로 당기면 데이터 새로고침.
#refresh#pull-to-refresh
변수 1개 — 여기 채우면 아래 프롬프트에 바로 들어가요
리스트에서 아래로 당기면 데이터 새로고침.
구현:
```dart
class PullRefreshListState extends State {
List<Item> _items = [];
Future<void> _refreshItems() async {
final snap = await db.collection('items')
.orderBy('createdAt', descending: true)
.limit(20)
.get();
setState(() {
_items = snap.docs.map((d) => Item.fromDoc(d)).toList();
});
}
@override
Widget build(BuildContext context) {
return RefreshIndicator(
onRefresh: _refreshItems,
child: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) => ItemCard(_items[index]),
),
);
}
}
```
커스텀:
```dart
RefreshIndicator(
color: Colors.blue,
backgroundColor: Colors.white,
onRefresh: _refreshItems,
child: ...,
)
```
{{DATA_TYPE}} 목록에 Pull-to-Refresh 추가할까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.