★★★★★
#UI·디자인 · claude-code
Loading 인디케이터 — Shimmer, Skeleton UI
네트워크 데이터 로드 중 Skeleton UI 보여주기.
#loading#shimmer#skeleton
네트워크 데이터 로드 중 Skeleton UI 보여주기.
패키지: `shimmer: ^3.0.0`
구현:
```dart
Widget _buildShimmerLoading() {
return Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: ListView.builder(
itemCount: 5,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(width: double.infinity, height: 150, color: Colors.white),
SizedBox(height: 8),
Container(width: double.infinity, height: 20, color: Colors.white),
],
),
),
),
);
}
```
FutureBuilder와 함께:
```dart
FutureBuilder<List<Product>>(
future: _fetchProducts(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return _buildShimmerLoading();
} else if (snapshot.hasError) {
return Center(child: Text('에러'));
}
return ListView(...);
},
)
```
pubspec.yaml에 `shimmer` 추가 후 적용할까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.