Introducing Skeletonizer: Effortless Skeleton Loading for Flutter

Skeleton loading has become a crucial technique in enhancing user experience during web and app loading. Skeletonizer is an innovative flutter package that provides an easy and customizable solution for creating skeleton loaders.

Generating Skeletons with Skeletonizer

Integrating Skeletonizer is incredibly straightforward. Simply wrap your layout with the Skeletonizer widget:

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),
        ),
      );
    },
  ),
)

Customizing the Skeletonizer

Skeletonizer offers a range of customization options to suit your specific needs:

1. Loading Effects:

Skeletonizer features three distinct loading effects:

• Shimmer
• Pulse
• Gradient

You can choose the effect that aligns best with your app's aesthetic and optimize its appearance through customization.

2. Text Skeleton Configuration:

Configure text-based skeletons by adjusting properties such as:

• Justification of multi-line text
• Border radius of text bones
• Font size and spacing (inherited from the theme)

3. Containers:

• ignoreContainers: Exclude containers from skeletonization, only skeletonizing their children.
• containersColor: Override the color of all containers with a specified color.

4. SkeletonizerConfig Widget:

Introducing the SkeletonizerConfig widget, which allows you to set global configuration options for all Skeletonizer widgets within its subtree. This provides a centralized way to manage skeletonization parameters throughout your app.

Use Cases and Benefits

Skeletonizer removes the hassle of creating and maintaining skeleton layouts, saving you time and effort. It:

• Enhances user experience by providing visual feedback during loading.
• Eliminates the need for complex fake data, reducing code duplication.
• Simplifies the process of updating skeleton layouts as the real layout changes.

Support and Contributions

Support the development of Skeletonizer by liking it on Pub, starring it on GitHub, and sharing your ideas or reporting issues. Your contributions will help accelerate its progress and make it even more valuable for the Flutter community.