flutter-shimmerlisted
Install: claude install-skill noory-code/noory-ai
# Flutter Shimmer
A skeleton animation for loading states. Improves the UX while data is being fetched.
---
## Installation
```bash
flutter pub add shimmer
```
---
## Quick Reference
### Basic Usage
```dart
import 'package:shimmer/shimmer.dart';
Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Container(
width: 200,
height: 100,
color: Colors.white,
),
)
```
### Skeleton Card
```dart
Widget buildShimmerCard() {
return Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// avatar
CircleAvatar(radius: 24, backgroundColor: Colors.white),
SizedBox(height: 12),
// title
Container(width: 150, height: 16, color: Colors.white),
SizedBox(height: 8),
// description
Container(width: double.infinity, height: 12, color: Colors.white),
SizedBox(height: 4),
Container(width: 200, height: 12, color: Colors.white),
],
),
),
),
);
}
```
### List Skeleton
```dart
Widget buildShimmerList({int itemCount = 5}) {
return ListView.builder(
itemCount: itemCount,
itemBuilder: (context, index) => Shimmer.fromColors(
baseColor: Colors.grey[300]!,