Documentation Index
Fetch the complete documentation index at: https://synapsync.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The Nebux Design System provides a complete set of shimmer/skeleton loading components for creating professional loading states in Flutter applications. These components use gradient-based shimmer animations to indicate loading content.
Components
NbxShimmerAnimation - Base animation wrapperNbxShimmerContainer - Basic shimmer containerNbxShimmerContainerExpanded - Expanded shimmer containerNbxShimmerContainerList - List of shimmer containersNbxShimmerTwiceContainerList - Two-row shimmer container listNbxShimmerListTile - Shimmer list tile with multiple elementsNbxShimmerListTileListView - Scrollable list of shimmer tilesNbxShimmerGrid - Grid of shimmer items
ShimmerSkeletonStyle
All shimmer components use ShimmerSkeletonStyle for configuration.
Width of the shimmer container.
Height of the shimmer container. If null, container will size to content.
Border radius for rectangular containers.
boxShape
BoxShape
default:"BoxShape.rectangle"
Shape of the container (BoxShape.rectangle or BoxShape.circle).
Custom color override for the shimmer container.
NbxShimmerAnimation
Base animation wrapper that provides shimmer effect to any child widget.
Properties
Child widget to be wrapped with shimmer animation.
Custom gradient for the shimmer effect. If null, uses default gradient.
Example
NbxShimmerAnimation(
child: Container(
width: 200,
height: 100,
color: Colors.grey[300],
),
)
NbxShimmerContainer
A basic shimmer container with customizable styling.
Properties
style
ShimmerSkeletonStyle
required
Style configuration for the shimmer container.
Examples
// Rectangle shimmer
NbxShimmerContainer(
style: ShimmerSkeletonStyle(
width: 200,
height: 100,
borderRadiusDouble: 12,
),
)
// Circular shimmer
NbxShimmerContainer(
style: ShimmerSkeletonStyle(
width: 50,
height: 50,
boxShape: BoxShape.circle,
),
)
NbxShimmerContainerList
Displays a list of shimmer containers in horizontal or vertical layout.
Properties
style
ShimmerSkeletonStyle
required
Style configuration for the shimmer containers.
Number of containers to display in the list.
Whether to display containers in a column (vertical) layout. If false, displays horizontally.
Examples
// Vertical list
NbxShimmerContainerList(
style: ShimmerSkeletonStyle(
width: double.infinity,
height: 60,
),
itemCount: 5,
isColumn: true,
)
// Horizontal list
NbxShimmerContainerList(
style: ShimmerSkeletonStyle(
width: 120,
height: 80,
borderRadiusDouble: 8,
),
itemCount: 4,
isColumn: false,
)
NbxShimmerListTile
A shimmer widget that simulates a list tile with customizable elements.
Properties
titleStyle
ShimmerSkeletonStyle
required
Style configuration for the title element.
Style configuration for the leading element (e.g., avatar).
Style configuration for the subtitle element.
Style configuration for the paragraph element.
Style configuration for the trailing element.
Padding around the entire list tile.
Spacing between content elements horizontally.
Vertical spacing between elements.
Whether to wrap the tile in a container with background.
Examples
// Simple list tile
NbxShimmerListTile(
leadingStyle: ShimmerSkeletonStyle(
width: 50,
height: 50,
boxShape: BoxShape.circle,
),
titleStyle: ShimmerSkeletonStyle(
width: 150,
height: 20,
),
subtitleStyle: ShimmerSkeletonStyle(
width: 100,
height: 16,
),
)
// List tile with container
NbxShimmerListTile(
hasContainer: true,
leadingStyle: ShimmerSkeletonStyle(
width: 60,
height: 60,
borderRadiusDouble: 8,
),
titleStyle: ShimmerSkeletonStyle(
width: 200,
height: 18,
),
subtitleStyle: ShimmerSkeletonStyle(
width: 150,
height: 14,
),
paragraphStyle: ShimmerSkeletonStyle(
width: double.infinity,
height: 12,
),
trailingStyle: ShimmerSkeletonStyle(
width: 24,
height: 24,
boxShape: BoxShape.circle,
),
padding: EdgeInsets.all(16),
contentSpacing: 12,
verticalSpacing: 8,
)
NbxShimmerListTileListView
A scrollable list of shimmer list tiles with separators.
Properties
Number of list tiles to display.
titleStyle
ShimmerSkeletonStyle
required
Style for title elements in each tile.
Total height of the list view.
Style for leading elements in each tile.
Style for subtitle elements in each tile.
Style for paragraph elements in each tile.
Style for trailing elements in each tile.
Padding around each list tile.
Spacing between content elements in each tile.
Vertical spacing between elements in each tile.
Whether to add container background to each tile.
Custom divider widget between tiles. If null, uses default divider.
Example
NbxShimmerListTileListView(
itemCount: 10,
heightFull: 600,
leadingStyle: ShimmerSkeletonStyle(
width: 50,
height: 50,
boxShape: BoxShape.circle,
),
titleStyle: ShimmerSkeletonStyle(
width: 180,
height: 18,
),
subtitleStyle: ShimmerSkeletonStyle(
width: 120,
height: 14,
),
padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
)
NbxShimmerGrid
Displays a grid of shimmer skeleton items, typically for icon-based content.
Properties
Number of grid items to display.
Example
NbxShimmerGrid(
itemCount: 9,
)
Usage Patterns
Product List Loading
class ProductListShimmer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return NbxShimmerListTileListView(
itemCount: 5,
leadingStyle: ShimmerSkeletonStyle(
width: 80,
height: 80,
borderRadiusDouble: 8,
),
titleStyle: ShimmerSkeletonStyle(
width: 150,
height: 20,
),
subtitleStyle: ShimmerSkeletonStyle(
width: 100,
height: 16,
),
paragraphStyle: ShimmerSkeletonStyle(
width: double.infinity,
height: 14,
),
hasContainer: true,
padding: EdgeInsets.all(12),
);
}
}
class ProfileHeaderShimmer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
// Avatar
NbxShimmerContainer(
style: ShimmerSkeletonStyle(
width: 100,
height: 100,
boxShape: BoxShape.circle,
),
),
SizedBox(height: 16),
// Name
NbxShimmerContainer(
style: ShimmerSkeletonStyle(
width: 200,
height: 24,
borderRadiusDouble: 4,
),
),
SizedBox(height: 8),
// Bio
NbxShimmerContainer(
style: ShimmerSkeletonStyle(
width: 150,
height: 16,
borderRadiusDouble: 4,
),
),
],
);
}
}
Card Grid Shimmer
class CardGridShimmer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 0.75,
),
itemCount: 6,
itemBuilder: (context, index) {
return NbxShimmerAnimation(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(8),
),
),
),
SizedBox(height: 8),
Container(
height: 16,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(4),
),
),
SizedBox(height: 4),
Container(
height: 14,
width: 100,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(4),
),
),
],
),
);
},
);
}
}
Conditional Loading
class ProductList extends StatelessWidget {
final bool isLoading;
final List<Product> products;
const ProductList({
required this.isLoading,
required this.products,
});
@override
Widget build(BuildContext context) {
if (isLoading) {
return NbxShimmerListTileListView(
itemCount: 5,
titleStyle: ShimmerSkeletonStyle(width: 150, height: 20),
leadingStyle: ShimmerSkeletonStyle(
width: 60,
height: 60,
borderRadiusDouble: 8,
),
);
}
return ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return ProductTile(product: products[index]);
},
);
}
}
NbxShimmerContainerExpanded
A shimmer container that expands to fill available vertical space in its parent.
Properties
style
ShimmerSkeletonStyle
required
Style configuration for the shimmer container appearance
Usage Example
Row(
children: [
NbxShimmerContainer(
style: ShimmerSkeletonStyle(width: 100, height: 200),
),
SizedBox(width: 16),
NbxShimmerContainerExpanded(
style: ShimmerSkeletonStyle(borderRadiusDouble: 8),
),
],
)
NbxShimmerTwiceContainerList
A shimmer widget that displays two separate lists of skeleton containers, useful for complex loading states with multiple content sections.
Properties
Total height of the widget
Layout axis direction (horizontal or vertical)
skeletonListOneStyle
ShimmerSkeletonStyle
required
Style configuration for the first list of containers
Number of containers in the first list
Whether the first list uses vertical layout
skeletonListTwoStyle
ShimmerSkeletonStyle
required
Style configuration for the second list of containers
Number of containers in the second list
Whether the second list uses vertical layout
Usage Example
NbxShimmerTwiceContainerList(
heightFull: 300,
axis: Axis.horizontal,
skeletonListOneStyle: ShimmerSkeletonStyle(
width: 100,
height: 100,
borderRadiusDouble: 8,
),
itemCountListOne: 3,
isColumnListOne: false,
skeletonListTwoStyle: ShimmerSkeletonStyle(
width: 80,
height: 80,
borderRadiusDouble: 8,
),
itemCountListTwo: 4,
isColumnListTwo: false,
)
Customization
Custom Gradient
NbxShimmerAnimation(
gradient: LinearGradient(
colors: [
Colors.grey[300]!,
Colors.grey[100]!,
Colors.grey[300]!,
],
stops: [0.0, 0.5, 1.0],
),
child: YourWidget(),
)
Custom Colors
NbxShimmerContainer(
style: ShimmerSkeletonStyle(
width: 200,
height: 100,
customColor: Colors.blue[100],
),
)
Best Practices
- Match Layout: Design shimmers to match the actual content layout
- Appropriate Count: Show a reasonable number of shimmer items (3-5 for lists)
- Consistent Sizing: Use dimensions similar to real content
- Loading State: Always show shimmer when fetching data
- Quick Transitions: Ensure smooth transitions between shimmer and real content
See Also