Skeletonizer

Skeleton annotations allow you to change how specific widgets are treated when Skeletonizer is enabled. These annotations have no effect on the real layout when enabled is false.

Common annotations include:

• Skeleton.ignore: The widget will not be skeletonized.
• Skeleton.leaf: Marks a container as a leaf, which is painted using a shader paint.
• Skeleton.keep: The widget is not skeletonized but is painted exactly as is.
• Skeleton.shade: The widget is not skeletonized but is shaded by a shader mask (required for CustomPainter widgets).
• Skeleton.replace: Replaces the widget with a placeholder (useful for widgets that fail with fake data, like NetworkImage).
• Skeleton.unite: Prevents multiple small bones from being drawn separately, treating them as one single bone.
• Skeleton.ignorePointers: The widget will ignore pointer events when skeletonizer is enabled.

Skeletonizer works by reducing an existing layout into a skeleton. Because the layout depends on data (e.g., the length of a list), you must provide fake data while loading so the layout has a shape to skeletonize.

If you don't provide data, the widget tree might be empty, leaving nothing for Skeletonizer to process.

Use BoneMock to easily generate realistic fake text for your mock data objects.

// Example: Providing fake data using BoneMock
final fakeUsers = List.filled(7, User(
    name: BoneMock.name,
    jobTitle: BoneMock.words(2),
    email: BoneMock.email,
    createdAt: BoneMock.date, 
  ),
);

return Skeletonizer(
  enabled: _loading,
  child: UserList(users: fakeUsers),
);

To change the launch screen image for your iOS application, you can either replace the image files directly in the filesystem or use Xcode.

Option 1: Filesystem replacement Replace the existing image files located in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.

Option 2: Using Xcode

1. Open your Flutter project's iOS workspace using: open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog.

To create skeleton loaders, wrap your existing layout with the Skeletonizer widget. You can control whether the skeleton effect is active using the enabled property. For sliver-based layouts, use SliverSkeletonizer or Skeletonizer.sliver.

To prevent skeletonizing container widgets (like Cards or Containers) and only focus on the content inside them, set ignoreContainers: true.

Skeletonizer(
  enabled: _loading,
  child: ListView.builder(
    itemCount: 7,
    itemBuilder: (context, index) {
      return Card(
        child: ListTile(
          title: Text('Item number $index as title'),
          subtitle: const Text('Subtitle here'),
          trailing: const Icon(Icons.ac_unit),
        ),
      );
    },
  ),
)

You can customize the shimmer effect by providing a custom effect to the Skeletonizer widget. The ShimmerEffect allows you to configure the baseColor, highlightColor, and the duration of the animation.

Skeletonizer(
  effect: const ShimmerEffect(
    baseColor: Colors.grey[300],
    highlightColor: Colors.grey[100],
    duration: Duration(seconds: 1),
  ),
  child: ...
)

When using fake data, some widgets (like NetworkImage) might throw errors if passed invalid or empty URLs. Use Skeleton.replace to swap these widgets with a placeholder during the loading state.

Skeleton.replace(
  width: 50,
  height: 50,
  replacement: // defaults to a DecoratedBox,
  child: Icon(Icons.ac_unit, size: 40),
)

You can provide global text configuration options to Skeletonizer widgets to control how text bones are rendered. Key options include:

• justifyMultiLineText: Boolean to control text justification.
• textBoneBorderRadius: Controls the border radius of text bones using TextBoneBorderRadius.

Skeletonizer(
    justifyMultiLineText: false,
    textBoneBorderRadius: TextBoneBorderRadius.fromHeightFactor(.5),
    ...
)

You can check the current loading state of a Skeletonizer ancestor from within any descendant widget using Skeletonizer.of(context).enabled.

bool isLoading = Skeletonizer.of(context).enabled;

The following configuration options are available on the Skeletonizer widget:

• ignoreContainers: If true, all containers are ignored and only their children are skeletonized.
• containersColor: If provided, all containers will be painted with this color. Otherwise, the actual color is used.