zeba_academy_skeleton 0.0.1

Beautiful and customizable skeleton loading widgets for Flutter applications.

zeba_academy_skeleton

A lightweight, customizable, and production-ready skeleton loading package for Flutter applications.

Build beautiful loading states with animated shimmer placeholders for:

• Skeleton boxes
• Text placeholders
• Circular avatars
• Profile cards
• List items
• Custom skeleton layouts

No external dependencies required.

---

Features

• ✨ Smooth shimmer animation
• 📦 Ready-to-use skeleton boxes
• 📝 Text placeholder skeletons
• 👤 Circular avatar placeholders
• 🃏 Pre-built skeleton cards
• 📋 Skeleton list items
• 🎨 Custom base and highlight colors
• ⏱️ Custom animation duration
• 📐 Custom sizes and border radius
• 🌙 Works with Flutter themes and dark mode
• 🚀 Lightweight with zero external dependencies
• 🧩 Easy to compose into custom loading layouts
• 📱 Suitable for mobile, tablet, and desktop Flutter applications

---

Installation

Add zeba_academy_skeleton to your pubspec.yaml:

dependencies:
  zeba_academy_skeleton: ^0.0.1

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_skeleton/zeba_academy_skeleton.dart';

---

Quick Start

import 'package:flutter/material.dart';
import 'package:zeba_academy_skeleton/zeba_academy_skeleton.dart';

class SkeletonExample extends StatelessWidget {
  const SkeletonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            const SkeletonAvatar(
              size: 64,
            ),
            const SizedBox(height: 16),
            const SkeletonText(
              width: 200,
            ),
            const SizedBox(height: 8),
            const SkeletonText(
              width: 140,
            ),
          ],
        ),
      ),
    );
  }
}

---

Widgets

SkeletonBox

SkeletonBox is a general-purpose rectangular skeleton placeholder.

const SkeletonBox(
  width: 200,
  height: 20,
)

Customization

const SkeletonBox(
  width: double.infinity,
  height: 120,
  borderRadius: 16,
  baseColor: Color(0xFFE0E0E0),
  highlightColor: Colors.white,
  duration: Duration(milliseconds: 1200),
)

Properties

Property	Type	Default	Description
width	double?	null	Width of the skeleton
height	double	16	Height of the skeleton
borderRadius	double	8	Corner radius
baseColor	Color?	Theme color	Base skeleton color
highlightColor	Color?	Theme color	Shimmer highlight color
duration	Duration	1400ms	Animation duration

---

SkeletonText

SkeletonText is designed for text loading placeholders.

const Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    SkeletonText(
      width: 220,
    ),
    SizedBox(height: 8),
    SkeletonText(
      width: 160,
    ),
  ],
)

Example

const SkeletonText(
  width: 180,
  height: 14,
  borderRadius: 6,
)

---

SkeletonAvatar

SkeletonAvatar creates a circular skeleton placeholder.

const SkeletonAvatar(
  size: 56,
)

Example

const SkeletonAvatar(
  size: 80,
  baseColor: Color(0xFFE5E7EB),
  highlightColor: Colors.white,
)

Useful for:

• Profile pictures
• User avatars
• Chat applications
• Comment sections
• Social feeds

---

SkeletonCard

SkeletonCard provides a complete ready-to-use card skeleton.

const SkeletonCard()

Example

ListView(
  padding: const EdgeInsets.all(16),
  children: const [
    SkeletonCard(),
    SizedBox(height: 16),
    SkeletonCard(),
  ],
)

Customize the Card

const SkeletonCard(
  avatarSize: 56,
  titleWidth: 180,
  subtitleWidth: 120,
  contentHeight: 120,
  borderRadius: 20,
)

The card includes:

• Avatar placeholder
• Title placeholder
• Subtitle placeholder
• Content placeholder

---

SkeletonListItem

SkeletonListItem is useful for loading lists.

ListView.builder(
  itemCount: 8,
  itemBuilder: (context, index) {
    return const SkeletonListItem();
  },
)

Customize the List Item

const SkeletonListItem(
  avatarSize: 52,
  titleWidth: 180,
  subtitleWidth: 120,
)

---

Custom Colors

You can customize the skeleton colors:

const SkeletonBox(
  width: 200,
  height: 20,
  baseColor: Color(0xFFD1D5DB),
  highlightColor: Color(0xFFF9FAFB),
)

---

Custom Animation Speed

Control the shimmer animation speed:

const SkeletonBox(
  width: 200,
  height: 20,
  duration: Duration(milliseconds: 800),
)

Slower animation:

const SkeletonBox(
  width: 200,
  height: 20,
  duration: Duration(milliseconds: 2000),
)

---

Building Custom Skeleton Layouts

You can combine widgets to create your own loading layout.

class CustomSkeleton extends StatelessWidget {
  const CustomSkeleton({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        const SkeletonAvatar(
          size: 64,
        ),
        const SizedBox(width: 16),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              SkeletonText(
                width: 180,
              ),
              SizedBox(height: 10),
              SkeletonText(
                width: 120,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

---

Loading State Example

A common pattern is to show skeletons while data is loading:

class UserProfile extends StatelessWidget {
  const UserProfile({
    super.key,
    required this.isLoading,
  });

  final bool isLoading;

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return const SkeletonCard();
    }

    return const Text(
      'User profile loaded',
    );
  }
}

---

Available Widgets

Widget	Description
SkeletonBase	Base animated shimmer widget
SkeletonBox	General rectangular placeholder
SkeletonText	Text loading placeholder
SkeletonAvatar	Circular avatar placeholder
SkeletonCard	Complete card skeleton
SkeletonListItem	List item skeleton

---

Design Philosophy

zeba_academy_skeleton follows a simple philosophy:

Loading states should feel like part of the interface, not interruptions to it.

The package is designed to be:

• Simple
• Flexible
• Lightweight
• Dependency-free
• Easy to customize
• Easy to integrate into production Flutter applications

---

Compatibility

This package supports Flutter applications running on:

• Android
• iOS
• Web
• Windows
• macOS
• Linux

---

Requirements

• Dart SDK: ^3.12.0
• Flutter: >=1.17.0

---

Development

Clone the repository:

git clone https://github.com/your-username/zeba_academy_skeleton.git

Navigate to the package:

cd zeba_academy_skeleton

Get dependencies:

flutter pub get

Format the code:

dart format lib test

Analyze the package:

flutter analyze

Run tests:

flutter test

Validate publishing:

flutter pub publish --dry-run

---

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at:

➡ sufyanism.com

Or connect with me on:

➡ LinkedIn

---

Your All-in-One Learning Hub

🚀 Explore courses and resources in coding, technology, and development at Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to:

• Coding
• Technology
• Software development
• Practical learning
• Real-world projects

➡ Visit our main site: zeba.academy

➡ Explore hands-on courses and resources: code.zeba.academy

➡ Watch tutorials on YouTube: Zeba Academy

➡ Follow us on Instagram: Zeba Academy

---

License

Copyright © 2026 Sufyan bin Uzayr

This project is licensed under the GNU General Public License v3.0.

You may:

• Use the software
• Study the source code
• Modify the source code
• Redistribute the software

Under the terms of the GPL-3.0 license.

See the LICENSE file for the complete license text.

---

Thank You

Thank you for using zeba_academy_skeleton.

If this package helps you build better Flutter applications, consider supporting the project by sharing it with other developers.

⭐ Keep building. Keep learning. Keep creating.