Skeletonizer Plus

Overview

Skeletonizer Plus redefines how loading states are built in Flutter. Instead of creating a separate "Skeleton" version of your list item or card, you simply wrap your actual widget in a Skeletonizer. When enabled, it automatically replaces text, images, and containers with shimmering bone representations.

The Status Quo

Implementing loading states usually involves maintaining two UIs: the real one and the "fake boxy" one. When you update the real UI, you often forget to update the skeleton, leading to visual jarring when data loads.

Market Proposition

Zero-maintenance loading screens.

• Automatic Layout Mapping: Analyzes your widget tree to create a skeleton that matches your layout pixel-perfectly.
• Shimmer Effects: highly performant shader-based animations.
• Theming: Respects your app's theme colors automatically.

Usage

import 'package:skeletonizer_plus/skeletonizer_plus.dart';

Skeletonizer(
  enabled: isLoading,
  child: ListView.builder(
    itemCount: users.length,
    itemBuilder: (context, index) {
      return UserCard(user: users[index]);
    },
  ),
);

Hashtags

#Flutter #UI #UX #Animation #MobileDev #Productivity